首页
所有分类
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系列（14） 作用域链介绍(Scope Chain)
Apr 12 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 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
虚拟键盘(1) HarmonyOS(1) 华为(1) 蓝牙(1) 蓝牙耳机(1) Debian(1) 鸿蒙(2) 鸿蒙3.0(1) xhunter1.sys(1) RustDesk(1)
You might like
php 文章采集正则代码
2009/12/28 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php生成短域名函数
2015/03/23 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue之延时刷新实例
2019/11/14 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python构建自定义回调函数详解
2017/06/20 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python版飞机大战代码分享
2018/11/20 Python
python动态视频下载器的实现方法
2019/09/16 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python序列类型种类详解
2020/02/26 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python接口自动化测试的实现
2020/08/28 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
美国手工艺品市场的领导者：Annie’s
2019/04/04 全球购物
学生档案自我鉴定
2013/10/07 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
62句有关感恩节文案（推荐收藏）
2019/11/28 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python