首页
所有分类
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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 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) 车机(1) 海燕B411(1) 电子管(5) 修复(2) 接收机(2) DSP(2) 矿石收音机(1) TECSUN(1) 德生(17)
You might like
两种php调用Java对象的方法
2006/10/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
json简单介绍
2008/06/10 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解
2016/05/31 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
详解python使用turtle库来画一朵花
2019/03/21 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
汽车销售顾问求职自荐信
2014/01/01 职场文书
《自选商场》教学反思
2014/02/14 职场文书
客户接待方案
2014/02/26 职场文书
学习演讲稿范文
2014/05/10 职场文书
宿舍标语大全
2014/06/19 职场文书
房产公证书
2015/01/23 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
六年级语文教学反思
2016/03/03 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
python opencv通过按键采集图片源码
2021/05/20 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle