欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery插件实现的日历功能示例【附源码下载】

程序员文章站 2023-12-03 18:06:28
本文实例讲述了jquery插件实现的日历功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下：

本文实例讲述了jquery插件实现的日历功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

jQuery插件实现的日历功能示例【附源码下载】

具体代码如下：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.jb51.net jquery日历插件</title>
<!--引入jquery类库文件-->
<script src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker-zh-cn.js"></script>
<!--引入css样式类库文件-->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="external nofollow" />
<style>
 #starttime,#endtime{
  /* background-color:red;*/
 }
</style>
<script type="text/javascript">
  $(function(){
    //设置日历显示的采用的地区 是中国
    $.datepicker.setdefaults( $.datepicker.regional[ "zh-cn" ] );
    $("#starttime,#endtime").datepicker({
    //altfield:"#actualdate",
    //altformat:"dd, d mm, yy",
  autosize:false ,//自动调整大小的操作 改变的输入框的大小
  changemonth:false,//如果为true 弹出一个下拉的菜单
  changeyear:false, //前边有默认10年 当前年份的 后边有默认10年组成的下拉菜单
  dateformat:"yy-mm-dd", //日期的格式 呈现在输入的文本框中
  defaultdate:+1, //缺省的日期  + - 相对于当前的日期 计算
    showweek: true, //显示当前年的周数
  firstday:1, //当前年份开始的第一天
  showon:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件
  buttonimage: "images/calendar.png", //设置按钮的图片
  buttonimageonly: true,    //设置这按钮只显示图片效果 不要有button的样式
  showanim:"toggle", //弹出日历的效果
  prevtext:"上一月",
  nexttext:"下一月",
  yearrange:"c-5:c+5", //年份的前后取值范围
  //mindate:1,
  //maxdate:25,
  /*
   结束日期的最小值 必须大于等于  开始日期的最大值
  */
  //showothermonths: true, //显示当前月份日期的其他日期值
  //selectothermonths: true, //显示当前月份日期的其他日期值 并且是可以选择的 默认是不可以选择的
    numberofmonths:1, //连续弹出3个月的日历
  showbuttonpanel:true,
  closetext:"guan",
  //gotocurrent:true
  onselect:function(textdate,inst){
    alert(textdate);
   }
   });
  });
</script>
</head>
<body>
   <div>演示日历的效果</div>
   <!-- <div id="datepicker"></div>-->
   开始日期:<input type="text" id="starttime" />
   结束日期:<input type="text" id="endtime" />
</body>
</html>

附：完整实例代码点击此处。

ps：这里再为大家推荐几款时间及日期相关工具供大家参考：

在线日期/天数计算器：

在线日期天数差计算器：

unix时间戳(timestamp)转换工具：

网页万年历日历：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery日期与时间操作技巧总结》、《jquery拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery选择器用法总结》及《jquery常用插件及用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： 搜索引擎优化的沙盒效应说明

下一篇： oracle 数据库学习 基本结构介绍

推荐阅读