jQuery UI 实例讲解 - 日期选择器(Datepicker)

2023-09-24 14:56:05 61

默认功能

日期选择器（Datepicker）绑定到一个标准的表单input字段上。把焦点移到input上（点击或者使用tab键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击Esc键来关闭。如果选择了一个日期，则反馈显示为input的值。





jQueryUI日期选择器（Datepicker）-默认功能








日期：

动画

当打开或关闭datepicker时使用不同的动画。从下拉框中选择一个动画，然后在输入框中点击来查看它的效果。您可以使用三个标准动画中任意一个，或者使用UI特效中的任意一个。





jQueryUI日期选择器（Datepicker）-动画








日期：

动画：


Show(默认)
滑下
淡入
Blind(UI百叶窗特效)
Bounce(UI反弹特效)
Clip(UI剪辑特效)
Drop(UI降落特效)
Fold(UI折叠特效)
Slide(UI滑动特效)
无

其他月份的日期

datepicker可以显示其他月份的日期，这些日期也可以设置成可选择的。





jQueryUI日期选择器（Datepicker）-其他月份的日期








日期：

显示按钮栏

通过布尔值的showButtonPanel选项为选择当天日期显示一个"Today"按钮，为关闭日历显示一个"Done"按钮。默认情况下，当按钮栏显示时会启用每个按钮，但是按钮可通过其他的选项进行关闭。按钮文本可自定义。





jQueryUI日期选择器（Datepicker）-显示按钮栏








日期：

内联显示

datepicker是嵌套在页面中显示，而不是显示在一个覆盖层中。只需要简单地在div上调用.datepicker()即可，而不是在input上调用。





jQueryUI日期选择器（Datepicker）-内联显示








日期：

显示月份&年份菜单

显示月份和年份的下拉框，而不是显示静态的月份/年份标题，这样便于在大范围的时间跨度上导航。添加布尔值changeMonth和changeYear选项即可。





jQueryUI日期选择器（Datepicker）-显示月份&年份菜单








日期：

显示多个月份

设置numberOfMonths选项为一个整数2，或者大于2的整数，来在一个datepicker中显示多个月份。





jQueryUI日期选择器（Datepicker）-显示多个月份








日期：

格式化日期

以各种方式显示日期反馈。从下拉框中选择一种日期格式，然后在输入框中点击并选择一个日期，查看所选格式的日期显示。





jQueryUI日期选择器（Datepicker）-格式化日期








日期：

格式选项：


Default-mm/dd/yy
ISO8601-yy-mm-dd
Short-dM,y
Medium-dMM,y
Full-DD,dMM,yy
Withtext-'day'd'of'MM'intheyear'yy

图标触发器

点击输入框旁边的图标来显示datepicker。设置datepicker在获得焦点时打开（默认行为），或者在点击图标时打开，或者在获得焦点/点击图标时打开。





jQueryUI日期选择器（Datepicker）-图标触发器








日期：

本地化日历

本地化datepicker日历语言和格式（默认为English/Western格式）。datepicker包含对从右到左读取的语言的内建支持，比如Arabic和Hebrew。





jQueryUI日期选择器（Datepicker）-本地化日历












日期：

Arabic(?(???????
ChineseTraditional(繁體中文)
English
French(Fran?ais)
Hebrew(?(?????

填充另一个输入框

使用altField和altFormat选项，无论何时选择日期，会在另一个输入框中填充带有一定格式的日期。这个功能通过对电脑友好性的日期进一步加工后，向用户呈现一个用户友好性的日期。





jQueryUI日期选择器（Datepicker）-填充另一个输入框








日期：

限制日期范围

通过minDate和maxDate选项限制可选择的日期范围。设置起止日期为实际的日期（newDate(2009,1-1,26)），或者为与今天的一个数值偏移（-20），或者为一个周期和单位的字符串（'+1M+10D'）。如果设置为字符串，使用'D'表示天，使用'W'表示周，使用'M'表示月，使用'Y'表示年。





jQueryUI日期选择器（Datepicker）-限制日期范围








日期：

选择一个日期范围

选择要搜索的日期范围。





jQueryUI日期选择器（Datepicker）-选择一个日期范围








从

到

显示一年中的第几周

datepicker可以显示一年中的第几周。默认的计算是按照ISO8601定义：每周从星期一开始，每年的第一周包含该年的第一个星期四。这就意味着一年中的一些天可能是属于另一年中的周。





jQueryUI日期选择器（Datepicker）-显示一年中的第几周








日期：

jQuery的datepicker变成中文:jquery.ui.datepicker-zh-CN.js一般会找这个js,我把这个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']);
});

以上这篇jQueryUI实例讲解-日期选择器(Datepicker)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

jQuery UI 实例讲解 - 日期选择器(Datepicker)

热门推荐

随机推荐