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


Posted in jQuery onSeptember 07, 2018

本文实例讲述了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>3water.com 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>
jQuery 相关文章推荐
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
You might like
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
srcElement表格样式
2006/09/03 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python实现检测文件MD5值的方法示例
2018/04/11 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python实现整数的二进制循环移位
2019/03/08 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
2014年乡镇植树节活动方案
2014/02/28 职场文书
总经理人事任命书
2014/06/05 职场文书
贷款委托书
2014/08/01 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
Django显示可视化图表的实践
2021/05/10 Python