时间紧张，先记一笔，后续优化与完善。

期日择选组件在平常开辟中应用还是非常泛广的，jQuery UI Datepicker作为jQuery UI的期日择选组件，不仅应用活灵、主题富丰多样，更因为平常泛广应用jQuery，所以是一个不错的择选。

相干源资引用

到http://jqueryui.com/download/下载应相的脚本及式样，可以下载全体或者择选要需的停止下载；另外还可以到http://github.com/jquery/jquery-ui下载它的全部码源。

对于在文中的呈现，还要需额定的一个脚本：https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js

由于jQuery UI应用了em作为单位，直接在网页中应用，会变得大巨比无，所以要需额定附加一点式样(这里命名为jqueryui-fakes.css)：

body { font-size: 12px; }.ui-widget { font-size: 1em; }.ui-datepicker { font-size: 11px; } .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; }

终究引入的源资如下：

应用方法

jQuery UI Datepicker应用非常简略，首先在面页中有文本框作为标目：

默许情况下只要需在DOMLoaded用调datepicker方法可即：

$(function() { $(".dp").datepicker();});

使文本框只读

这里要需注意，如果文本框不允许输入的话，要需设置readonly属性：

$(".dp").prop("readOnly", true).datepicker();

另外还要需注意，如非必要，不要直接在文本框的html属性上设置readonly(特别是asp.net TextBox)，否则后台可能不能畸形取获。

控制输入的字符

开启constrainInput属性，以可就控制文本框的输入只能为dateFormat属性中定规的(没启用readonly情况下)：

$(".dp").datepicker({ constrainInput: true });

显示年、月择选框

默许情况下择选年、月比较麻烦，这里可以开启两个属性是年、月变为下拉框择选：

$(".dp").datepicker({ changeMonth: true, changeYear: true });

另外还可以把年下拉框显示在月下拉框之前：

$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });

设置择选的年的范围，可以是具体的年份或者是特定的格式：

"-nn:+nn"相对于当前年份，当前2012年，如"-5:+5"就是从2007-2017范围
"c-nn:c+nn"相对于选中的年份，如选中2013，"c-5:c+5"就是从2008-2018范围
"nnnn:nnnn"直接指定年份，如"2010-2013"

$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" }); $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" }); $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });

每日一道理
即使青春是一枝娇艳的花，但我明白，一枝独放永远不是春天，春天该是万紫千红的世界。即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。

显示期日的格式

通过设置dateFormat属性来实现，分别用yy、mm、dd来表示年、月、日；默许值为mm/dd/yy，文中环境下一般设置为：

$(".dp").datepicker({ dateFormat: "yy-mm-dd" });

控制期日范围

通过minDate/maxDate来设置可以择选的期日范围，可以是期日类型；

或者是特定的格式，应用三个字符来表示：

第一个字符为+或-
第二个字符为数字
第三个字符表示单位如y,m,w,d表示年、月、周、天，可以拼出N中结果如："+1y" "-1m"
而且可以叠加，只要中间空格隔开可即如："+1m +1w +2d"表示一个月+一周+两天

$(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" }); $(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) });

显示今天及确定按钮

$(".dp").datepicker({ showButtonPanel: true });

还可以设置点击今天调到当前月份的日历视图：

$(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });

其他属性就不再一一展示了，请直接看官方API文档：http://api.jqueryui.com/datepicker/

择选时间功能

jQuery UI Datepicker没有提供择选时间功能，不过有人基于jQuery UI Datepicker创造了timepicker：http://trentrichardson.com/examples/timepicker/

可以从https://github.com/trentrichardson/jQuery-Timepicker-Addon取获它的最新版本

源资引入

除了要需引入上面jQuery UI Datepicker应用的源资以外，还要需一下源资：

应用方法

它的功能分为两部分：一种是可以同时择选期日和时间的datetimepicker，另一种是只能选时间的timepicker

$(".dp").datetimepicker(); $(".dp").timepicker();

参数设置

它也有自己的一些参数可以设置，这里仅列出重要的：

timeFormat 设置时间格式，其中两个相同字母的表示不足两位补0
1. H/HH：24小时
2. h/hh：12小时
3. m/mm：分钟
4. s/ss：秒钟
5. l：毫秒
6. t/tt,T/TT：设置AM/PM即上午/下午
7. z：失去
defaultTimezone：默许时区"+0000"
showHour/showMinute/showSecond/…showTimezone/showTime分别设置是否显示应相择选
stepHour/stepMinute/StepSecond…分别设置拖动滑块时增减的数值
maxDateTime/minDateTime：控制时间范围
controlType：控件类型："select"(下拉择选)、"slide"(拖动滑块，默许)

格式化输入

有时候可能会要需可以择选也可以输入，这时候可以额定附加脚本：http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的组件

定义好mask格式：

$(".dp").datepicker().setMask("9999-19-39")

over

文章结束给大家分享下程序员的一些笑话语录： AdobeFlash拖垮Windows拖垮IE！又拖垮Linux拖垮Ubuntu拖垮FirxEox！还拖垮BSD拖垮MacOS拖垮Safri！简直无所不拖！AdobeFlash滚出网路世界！不要以为市占有率高就可以持续出烂货产品！以后替代品多得是！

文本框下载jQuery UI Datepicker精美的日期选择组件相关推荐

antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
jQuery UI Datepicker 选择时分秒
jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepicker-addon.js正是基于jQuery U ...
坑爹的jquery ui datepicker
1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...
jQuery UI Datepicker日期日历改造为年月日历
jQuery UI Datepicker日期日历改造为年月日历参数为:yymm 显示如下效果参数为:yymmdd 显示效果如: 具体代码修改如下,红色为修改内容 /*! * jQuery UI ...
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了 ...
重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]
新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...
ajax 文本框搜索,JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
php 文本框事件,jQuery监控文本框事件并处理步骤详解
这次给大家带来jQuery监控文本框事件并处理步骤详解,使用jQuery监控文本框事件的注意事项有哪些,下面就是实战案例,一起来看一下.//事情委托 $(document) .on('input pr ...
Jquery日期选择组件
lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 43 reposi ...

文本框下载jQuery UI Datepicker精美的日期选择组件

相干源资引用

应用方法

使文本框只读

控制输入的字符

显示年、月择选框

显示期日的格式

控制期日范围

显示今天及确定按钮

择选时间功能

源资引入

应用方法

参数设置

格式化输入

文本框下载jQuery UI Datepicker精美的日期选择组件相关推荐

最新文章

热门文章