首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery日期插件datepicker的使用方法

Posted in Javascript onMarch 03, 2016

 JQuery是一款非常优秀的脚本框架，其丰富的控件使用起来也非常简单，配置非常灵活。下面做一个使用日期插件datapicker的例子。

1、下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后到官网http://jqueryui.com/download下载jquery-ui压缩包（可以选择喜欢的theme），里面就包含对datepicker的支持，当然您也可以下载datepicker，包括ui.core.js和ui.datepicker.js。

2、在HTML中引用下载下来的js文件： 

<!-- 引入 jQuery --> 
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script> 
<!--添加datepicker支持--> 
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>

3.在HTML中引入默认样式表文件，这个文件在ui压缩包中。如果在官网下载，首页就有这个CSS文件下载，也可选择其他皮肤的CSS。

<!--引入样式css--> 
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />

4.在HTML中插入文本域，最好设置成只读，不接受用户的手动输入，防止格式混乱，以id标记好。

<input type="text" id="selectDate" readonly="readonly"/>

5.编写js代码，实现最终效果。

$(document).ready(function() {   
   $('#selectDate').datepicker();   
 });

效果如下图：

JQuery日期插件datepicker的使用方法

这里只是做了一个最基本的日期控件，我们还需要以中文显示，限制日期选择范围等需求，稍微修改js代码：

<mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: 'yy-mm-dd',//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: '年', //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:'2011-03-10',//默认日期 
      minDate:'2011-03-05',//最小日期 
      maxDate:'2011-03-20',//最大日期 
      monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
      dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
      dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
      dayNamesMin: ['日','一','二','三','四','五','六'], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 
   
// --></mce:script>

效果如下：

JQuery日期插件datepicker的使用方法

这里基本上就满足我们使用的需要了。datepicker控件默认是英文的，可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值，但是每次使用是都配置这些属性不免太麻烦了，可以增加一个js文件将中文配置都放在里面，每次使用直接引用即可，这里放在jquery.ui.datepicker-zh-CN.js中，内容如下：

jQuery(function($){ 
  $.datepicker.regional['zh-CN'] = { 
    closeText: '关闭', 
    prevText: '<上月', 
    nextText: '下月>', 
    currentText: '今天', 
    monthNames: ['一月','二月','三月','四月','五月','六月', 
    '七月','八月','九月','十月','十一月','十二月'], 
    monthNamesShort: ['一','二','三','四','五','六', 
    '七','八','九','十','十一','十二'], 
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
    dayNamesMin: ['日','一','二','三','四','五','六'], 
    weekHeader: '周', 
    dateFormat: 'yy-mm-dd', 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: '年'}; 
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
});

6.在页面中引入中文插件

<!-- 添加中文支持--> 
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>

完整的页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <TITLE>日期控件datepicker</TITLE> 
   
  <!-- 引入 jQuery --> 
  <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script> 
 
  <!--添加datepicker支持--> 
  <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
  <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script> 
  <!-- 或者引入jquery ui包，其中也包含对datepicker的支持 
  <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script> 
  --> 
 
  <!--引入样式css--> 
  <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" /> 
 
  <!-- 添加中文支持--> 
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script> 
 
  <mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: 'yy-mm-dd',//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: '年', //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:'2011-03-10',//默认日期 
      minDate:'2011-03-05',//最小日期 
      maxDate:'2011-03-20',//最大日期 
      //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
      //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
      //dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
      //dayNamesMin: ['日','一','二','三','四','五','六'], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 
   
// --></mce:script> 
 </HEAD> 
 <BODY> 
 <input type="text" id="selectDate" readonly="readonly"/> 
 </BODY> 
</HTML>

注意：由于jquery datepicker首页上ui.core.js和ui.datepicker.js不是最新版本的，如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题，所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。

以上就是本文的全部内容，关于JQuery日期插件datepicker就为大家介绍这么多，希望对大家的学习有所帮助。

JQuery日期插件datepicker的使用方法

- Author -

cuisea

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
JS跨域总结
Aug 30 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
详解vue组件之间的通信
Aug 30 Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
JS动态增删表格行的方法
Mar 03 #Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 #Javascript
基于javascript html5实现多文件上传
Mar 03 #Javascript
编写高质量JavaScript代码的基本要点
Mar 02 #Javascript
PHILIPS(3) 飞利浦(2) 德劲1103(3) 山进(2) D1875(1) D1835(1) L4X25T(1) SANGEAN(1) 德生PL330(2) 德生9700DX(1)
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
Json解析的方法小结
2016/06/22 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python实现ID3决策树算法
2017/12/20 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
世界首屈一指的在线男士内衣权威：HisRoom
2017/08/05 全球购物
美国滑雪和滑雪板商店：Buckman
2018/03/03 全球购物
Skyscanner澳大利亚：全球领先的旅游搜索网站
2018/03/24 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
中学运动会广播稿
2014/01/19 职场文书
个人党性剖析材料
2014/02/03 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
户外拓展活动方案
2014/02/11 职场文书
货车司机岗位职责
2014/03/18 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
安全演讲稿大全
2014/05/09 职场文书
社区健康教育工作方案
2014/06/03 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
学校食品安全责任书
2015/01/29 职场文书
报案材料怎么写
2015/05/25 职场文书
干货：如何写好工作计划！
2019/05/17 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
Elasticsearch 基本查询和组合查询
2022/04/19 Python