首页
所有分类
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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JavaScript严格模式详解
Jan 16 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
js页面加载后执行的几种方式小结
Jan 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
访问日志(2) UV(1) 线程(1) 连接数(1) 内存(1) 缓存(3) ipv6(1) 弱口令(1) 策略(1) PV(1)
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
SSO单点登录的PHP实现方法（Laravel框架）
2016/03/23 PHP
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
js判断节假日实例代码
2017/12/27 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python去掉行尾的换行符方法
2017/01/04 Python
Python tkinter label 更新方法
2018/10/11 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
python mock测试的示例
2020/10/19 Python
python时间time模块处理大全
2020/10/25 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
iPad和Surface Pro蓝牙键盘：Brydge
2018/11/10 全球购物
新西兰优惠网站：Treat Me
2019/07/04 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
保护水资源的标语
2014/06/17 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
施工安全责任协议书
2016/03/23 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android