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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python函数的万能参数传参详解
2019/07/26 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
《记金华的双龙洞》教学反思
2014/04/19 职场文书
会计求职信范文
2014/05/24 职场文书
如何写股份合作协议书
2014/09/11 职场文书
校园广播稿精选
2014/10/01 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
大学生社会实践感想
2015/08/11 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技