jQueryUI中的datepicker使用方法详解


Posted in Javascript onMay 25, 2016

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

之前做的一个排班考勤系统,跟时间打交道较多,对时间控件做过一些对比,觉得jqueryUI里的这个datepicker更为实用,下面抽点时间给大家整理,方便以后查阅,同时也希望能帮助到大家!

1,引入js,css

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

这个大概不需多说,datepicker是基于jqueryUI的控件,而使用jqueryUI肯定要先引入jquery.js

2,配置属性

在刚刚接触这个插件前,我也是网上各种找资料,但是找的大多都比较杂,各种属性全盘有序无序的列出来,挑不出重点。其实我们一个日常的使用不需要那么多,为了快速查看并使用,我这里直接在方法体列举用得最多的几个属性:

<input id="testDatepicker" class="test-datepicker" placeholder="请选择日期.."/> 
<script type="text/javascript">
$("#testDatepicker").datepicker({
showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
minDate: -1,//最小日期,可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
maxDate: +17,//最大日期,同上
defaultDate : +4, //默认日期,同上
duration : 'fast',//动画展示的时间,可选是"slow", "normal", "fast",''代表立刻,数字代表毫秒数
firstDay : 1 ,//设置一周中的第一天。默认星期天0,星期一为1,以此类推。
nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
prevText : '上一月',//设置“上个月”链接的显示文字。
showButtonPanel: true,//是否显示按钮面板 
currentText : '今天',//设置当天按钮的文本内容,此按钮需要通过showButtonPanel参数的设置才显示。
gotoCurrent : false,//如果设置为true,则点击当天按钮时,将移至当前已选中的日期,而不是今天。
}); 
</script>

3,常用事件

datepicker提供了相关事件,在实际开发中最常用的无非就是这三个,打开前beforeShow,关闭后onClose,onselect选中,我们可以通过控制台打印相关参数调试一下具体怎么使用,这样更能加深对插件的认知:

$("#testDatepicker").datepicker({
onselect: function(dateText, inst){//选中事件
console.log("onselect, dateText",dateText);
console.log("onselect, inst",inst);
},
beforeShow : function(input){//日期控件显示面板之前
console.log("beforeShow, input",input);
},
onClose : function(dateText, inst){//当日期面板关闭后触发此事件(无论是否有选择日期)
console.log("onClose, dateText",dateText);
console.log("onClose, inst",inst);
}
});

这里说一下onselect事件,一般我们实际项目中都会两个日期选择框,如一个开始日期,一个结束日期。那么我们肯定是会要做开始日期必须小于结束日期的校验,而我们通过onselect事件去改变另外一个日期框的最大/小日期即可做到输入的控制,如图:

jQueryUI中的datepicker使用方法详解jQueryUI中的datepicker使用方法详解

html:

<input class="ipt-datepicker" type="text" id="schduleDateStart" placeholder="排班开始日期.." name="schduleDateStart">
<input class="ipt-datepicker" type="text" id="schduleDateEnd" placeholder="排班结束日期.." name="schduleDateEnd">

js:

$("#schduleDateStart").datepicker({
onSelect:function(dateText,inst){
$("#schduleDateEnd").datepicker("option","minDate",dateText);
}
});
$("#schduleDateEnd").datepicker({
onSelect:function(dateText,inst){
$("#schduleDateStart").datepicker("option","maxDate",dateText);
}
});

注意:当我们绑定onselect事件后,这个文本框如果原来有的change事件会失效,或者说被覆盖,所以要将原来change事件后操作代码移到onselect事件的回调函数里面。

4,汉化:

到此为止,我们基本可以在实际项目中使用这个控件了。但是很遗憾,这个控件是老外开发的,所以底层肯定是英文的,这样用户体验肯定不好,所以我们需要引入一个zh-CN.js对控件汉化。代码很简单,当然像pervText,nextText这些我们也可以根据自己的需求做相关修改:

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

5,控件效果图:

jQueryUI中的datepicker使用方法详解

以上所述是小编给大家介绍的jQueryUI中的datepicker使用方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 #Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 #Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 #Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 #Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 #Javascript
详解Node.js模块间共享数据库连接的方法
May 24 #Javascript
You might like
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
手机端转换rem适应
2017/04/01 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
详解Anaconda 的安装教程
2020/09/23 Python
python中turtle库的简单使用教程
2020/11/11 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
团员的自我评价
2013/12/01 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
ant design charts 获取后端接口数据展示
2022/05/25 Javascript