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就为大家介绍这么多,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
JS编程小常识很有用
Nov 26 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Angular2.js实现表单验证详解
Jun 23 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 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
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
园长自我鉴定
2013/10/06 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
趣味体育活动方案
2014/02/08 职场文书
发展部经理职责规定
2014/02/22 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
团队精神口号
2014/06/06 职场文书
文案策划专业自荐信
2014/07/07 职场文书
2014年教研员工作总结
2014/12/23 职场文书
英语辞职信范文
2015/02/28 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
使用MybatisPlus打印sql语句
2022/04/22 SQL Server