您的位置：首页 > Web前端 > JQuery

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件

2013-08-16 17:28 537 查看

默认datepicker的安装启用

探索它的配置选项

安装启用一个触发按钮

配置一个供选择的动画

dateFormat选项

简单的国际化

多月datepicker

日期范围选择

datepicker的方法

使用AJAX的datepicker

按着Ctrl键期间，箭头可以用来选择新的day cell，按Return键选中。

1 默认的datepicker

<label for="date">Enter a date:</label> <input id="date"> $(function(){ $("#date").datepicker(); });

2 datepicker的配置选项

Option	Default value	Usage
altField	“”	指定一个候选的<input>CSS选择器，当选择日期后，日期也被加入该选择器
altFormat	“”	为候选<input>指定一个候选的日期格式。
appendText	“”	当<input>显示被选择日期时，加入的text
autoSize	false	自动设置<input>元素的宽度，使其能适应特定的日期格式
buttonImage	“”	为<button>触发器指定一个图片路径
buttonImageOnly	false	当设置为true时，用一个图片替代button触发器
buttonText	“…”	在<button>触发器上显示的文本
calculateWeek	$.datepicker.iso8601Week	接收一个函数，用来计算这天是这年的第几周
changeMonth	false	显示month的下拉列表
chengeYear	false	显示year的下拉列表
constrainInput	true	约束<input>的日期格式
defaultDate	null	当datepicker打开时,<input>为空，设置高亮日期
disable	false	禁用
duration	“normal”	设置datepicker打开的速度
gotoCurrent	false	设置当前日期链接，使datepicker移动到当前被选择的日期，而不是今天
hideIfNoPreNext	false	当没有需要的时候，隐藏 pre/next 链接，而不是禁用他们
maxDate	null	设置能被选择的最大日期。接受一个日期对象或相对数字。例如，+7，或者一个字符串，如 +6m
minDate	null	试着能被选择的最小日期，同上
navigationAsDateFormat	false	允许我们使用prev ,next, current links指定月的名字
numberOfMonths	1	设置在datepicker上一页只显示的一个月的日期
selectOtherMonths	false	允许上个月和下个月的日期在当前月的panel上，可被选择。显不显示由showOtherMonths决定。
shortYearCutoff	“+10”	当使用 y year 代表当前世纪的年
showAnim	“show”	设置datepicker显示时的动画
showButtonPanel	false	显示由关闭，当前链接构成的buttons panel
showCurrentAtPos	0	设置当前月份在多月份datepicker中的位置
showOn	“focus”	设置触发datepicker的事件
showOptions	{}	一个文字对象，包含控制动画配置的选项
showOtherMonths	false	显示前一个月和后一个月的最后一个和第一个日子。能不能被选择由selectOtherMonths决定。
showWeek	false	用一个列显示这是这年的第几周。与calculateWeek选项关联
stepMonths	1	设置使用上一个下一个链接时，被导航几个月
yearRange	“-10:+10”	指定year下拉框的范围

2.1 基本选项

(function($){ var pickerOpts = { appendText: "mm/dd/yy", defaultDate: "+5", showOtherMonths: true }; $("#date").datepicker(pickerOpts); })(jQuery);

appendText选项的值，在datepicker出现之前，就显示在初始页面上，通过<span>直接显示在<input>后面。处于样式的目的，我们可以通过 .ui-datepicker-append classname触发这个新的<span>元素。

当datepicker打开初始化，此时的<input>为空时，defaultDate 选项设置高亮的日期。Enter键可以选择高亮的日期。若给defaultDate传null或者一个标准的 JavaScript 日期对象,，则当前日期会被选中。

current date和 default date的显示效果不同。current date 是亮黄色，default date有着灰边框。

一旦日期已经被选择过，接下来打开时，被选择的日期会作为default date。

2.2 最大最小日期

默认地，没有上下边界。

var pickerOpts = { minDate: new Date(), maxDate: "+10" };

我们传递一个标准的，没有修改的JavaScript date object 给 minDate 选项，它会设置最小值今天。

最大最小日期也接受 +6w , –10m , 1y 。

2.3 改变datepicker ui 的元素

datepicker API 暴露了大量的能够直接添加移除附加 datepicker 中 UI 元素的选项。

var pickerOpts = { changeMonth: true, changeYear: true };

这两个选项能够启用年和月的下拉框。默认地，年的下拉框包含前10年和后10年。

var pickerOpts = { changeMonth: true, changeYear: true, yearRange: "-25:+25" };

通过 yearRange选项可以扩大可选年的范围。

var pickerOpts = { showButtonPanel: true };

启用button panel。

2.4 添加button触发器

var pickerOpts = { showOn: "button", buttonText: "Open Picker" };

这个配置选项，会为在关联的<input>后面直接地、自动地添加一个button元素。buttonText指定了该button的文本。

var pickerOpts = { showOn: "button", buttonText: "Open Picker" buttonImage: "img/cal.png", };

此时button显示的是图片，没有显示buttonText。原因是，buttonText选项的值被自动作为<img>元素的title 和 alt 属性。

var pickerOpts = { showOn: "button", buttonImage: "img/date-picker/cal.png", buttonText: "Open Picker", buttonImageOnly: true }

2.5 配置可选的动画效果

这里有 duration , showAnim , showOptions 配置选项。

duration 可以简单地配置 datepicker 打开关闭的速度。它需要一个字符串参数（slow , normal ,fast），或者一个以 milliseconds 为单位的数字。

showAnim会改变动画。默认的动画用来简单地显示动画，但是我们也能使用库中的任何 show/hide 效果。

var pickerOpts = { showAnim: "drop", showOptions: {direction: "up"} };

为了使用showAnim 和 showOption 选项，我们需要引用 jquery.effects.core.js和 jquery.effects.drop.js 两个文件。

2.6 多个月

var pickerOpts = { numberOfMonths: 3 };

控件没有限制能够显示month的数量。但是多一个就会影响性能。和多月datepickers关联的选项还有stepMonths，它控制当我们点击上一个或下一个链接时，多少个月会变化。

另一个和多月datepicker相关的是showCurrentAtPos选项。默认当前月位于所有打开的月的第一个。可以通过以零开头的索引，改变当前页所处的位置。

2.7 改变日期格式

有大小写之分 case-sensitive

d	适用与一个数字的日
dd	两个数字的日
m	适用于一个数字的月
mm	两个数字的月
y	两个数字的年
yy	四个数字的年
D	短日名
DD	全日名
M	短月名
MM	长月名
‘…’	任何字符串
@	UNIX 时间戳，从1970/01/01开始的总milliseconds

dates以代码地方式返回，是通过getDate方法，传递GMT标准日期时间。为了转换日期格式，会用到$.datepicker.formatDate()功能。

当我们在date开始处添加 Selected: 字符串，我们需要使用 Selecte’d’: 字符串。因为小写的 d 是短日名的格式。

var pickerOpts = { dateFormat:"Selecte'd': d MM yy" };

这里也有一些内置的公共标准格式。这些格式以常量和能被通过 $.datepicker 访问的对象，添加到组件。

Option value Short-hand Formatted as…
$.datepicker.ATOM "yy-mm-dd" 2011-04-13
$.datepicker.COOKIE "D, dd M y" Wed, 13 Apr 2011
$.datepicker.ISO_8601 "yy-mm-dd" 2011-04-13
$.datepicker.RFC_822 "D, d M y" Wed, 13 Apr 11
$.datepicker.RFC_850 "DD, dd-M-y" Wednesday, 13-Apr-11
$.datepicker.RFC_1036 "D, d M y" Wed, 13 Apr 11
$.datepicker.RFC_1123 "D, d M yy" Wed, 13 Apr 2011
$.datepicker.RFC_2822 "D, d M yy" Wed, 13 Apr 2011
$.datepicker.RSS "D, d M y" Wed, 13 Apr 11
$.datepicker.TIMESTAMP @ (UNIX timestamp) 1302649200000
$.datepicker.W3C "yy-mm-dd" 2011-04-13

2.8 更新附加的input元素

有时我们想通过选择一个时期更新两个<input>，并显示不同的日期格式。

var pickerOpts = {
altField: "#alt",
altFormat: $.datepicker.TIMESTAMP
};

2.9 本地化

这里也有一些区域化的选项。他们能够为简单地用可选的语言显示datepicker的文本，或者改变英语单词，从而简单地提供客户本地化支持。

Option	Default	Usage
closeText	“Close”	关闭按钮上显示的文本
currentText	“Current”	当前日期链接上显示的文本
dateFormat	“mm/dd/yy”	当添加到<input>时，日期的格式
dayNames	[“Sunday”,”Monday”,”Tusday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”]	一星期每天的名字数组
dayNamesMin	["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]	一星期中，每天两个字的名字数组
dayNamesShort	["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]	一星期中，每天简短的名字数组
firstDay		指定datepicker第一列的日期
isRTL	false	将日历设置为从右向左的格式
monthNames	["January", "Febru-ary", "March", "April", "May", "June", "July, "August", "September", "October", "November", "December"]	月的名字数组
monthNamesShot	["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]	月的简短名字数组
nextText	“Next”	下一个链接上的文本
prevText	“Prev”	上一个链接上的文本
showMonthAfterYear	false	在控件header上显示下一年的月
yearSuffix	“”	在month header中的年后面显示一个附加的字符串文本。

var pickerOpts = {
closeText: "Kthxbai",
currentText: "Todai",
nextText: "Fwd",
prevText: "Bak",
monthNames: ["January", "February", "March", "April", "Mai", "Jun",
"July", "August", "Septembr", "Octobr", "Novembr", "Decembr"],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec"],
dayNames: ["Sundai", "Mondai", "Tuesdai", "Wednesdai", "Thursdai",
"Fridai", "Katurdai"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Kat"],
The Datepicker Widget
[ 180 ]
dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Ka"],
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showButtonPanel: true
};

可以手工配置每个部分的名字，也可以使用默认配置。一个大范围的不同翻译已经被提供，就位于 i18n 文件夹中。

2.10 回调属性

Event	Fired when…
beforeShow	将要打开
beforeShowDay	每个日期个体都会被提出来，用来检测是否这个日期应该被选择
onChangeMonthYear	当前月或年变化
onClose	关闭后
onSelect	一个日期被选择

<select id="language"> <option id="en-GB">English</option> <option id="ar">Arabic</option> <option id="ar-DZ">Algerian Arabic</option> <option id="az">Azerbaijani</option> <option id="bg">Bulgarian</option> <option id="bs">Bosnian</option> <option id="ca">Catalan</option> <option id="cs">Czech</option> <option id="da">Danish</option> <option id="de">German</option> <option id="el">Greek</option> <option id="en-AU">English/Australia</option> <option id="en-NZ">English/New Zealand</option> <option id="en-US">English/United States</option> <option id="eo">Esperanto</option> <option id="es">Spanish</option> <option id="et">Estonian</option> <option id="eu">Euskarako</option> <option id="fa">Farsi</option> <option id="fi">Finnish</option> <option id="fo">Faroese</option> <option id="fr">French</option> <option id="fr-CH">Swiss-French</option> <option id="gl">Galician</option> <option id="he">Hebrew</option> <option id="hr">Croatian</option> <option id="hu">Hungarian</option> <option id="hy">Armenian</option> <option id="id">Indonesian</option> <option id="is">Icelandic</option> <option id="it">Italian</option> <option id="ja">Japanese</option> <option id="ko">Korean</option> <option id="kz">Kazakh</option> <option id="lt">Lithuanian</option> <option id="lv">Latvian</option> <option id="ml">Malayalam</option> <option id="ms">Malaysian</option> <option id="nl">Dutch</option> <option id="no">Norwegian</option> <option id="pl">Polish</option> <option id="pt-BR">Brazillian</option> <option id="pt">Portuguese</option> <option id="rm">Romansh</option> <option id="ro">Romanian</option> <option id="ru">Russian</option> <option id="sk">Slovakian</option> <option id="sl">Slovenian</option> <option id="sq">Albanian</option> <option id="sr-SR">Serbian</option> <option id="sv">Swedish</option> <option id="ta">Tamil</option> <option id="th">Thai</option> <option id="tr">Turkish</option> <option id="uk">Ukrainian</option> <option id="vi">Vietnamese</option> <option id="zh-CN">Chinese</option> <option id="zh-HK">Chinese</option> <option id="zh-TW">Taiwanese</option> </select> <input id="date"> $(function(){
var pickerOpts = {
beforeShow: function() {
var lang = $(":selected", $("#language")).attr("id");
$.datepicker.setDefaults($.datepicker.regional[lang]);
}
};
$("#date").datepicker(pickerOpts);
$.datepicker.setDefaults($.datepicker.regional['']);
});

我们使用beforeShow回调函数，每次datepicker显示时都会执行它。获得被选中的选项的id，传递给 $.datepicker.regional 选项。这个选项通过 $.datepicker.setDefaults() 功能设置。

3 功能方法

Utility	Used to…
formatDate	用指定的格式将日期对象转换为字符串。当使用dateFormate 方法时，日期会通过 formatDate 以指定的格式返回。这个方法接受三个参数，要转成的格式，要转换的日期，一个附加的配置选项（包括 dayNamesShort , dayNames , monthNamesShort , monthNames）
iso8601Week	依据 ISO8601 日期时间标准，返回指定日期的周数。这个方法接受一个参数——指定日期
noWeekends	使得周末不能被选中。它能被传递给 beforeShowDay 事件
parseDate	与 formatDate相反，转换一个格式化的日期字符串成日期对象。接收三个参数，预期的日期解析格式，要转换的日期字符串，一个配置对象选项（shortYearCutoff，dayNamesShort，dayNames，monthNameShort，monthNames）
regional	设置datepicker的语言
setDefaults	为所有的datepicker设置配置选项。接受一个包含新配置选项的字符对象

这些方法被$.datepicker管理对象作为一个单独的实例被调用。在初始化时，它自动被控件创建。

4 选择方法

Method	Used to…
dialog	在对话框控件中打开datepicker
getDate	得到当前被选择的日期
hide	以编码的形式关闭
isDisabled	检测datepicker是否被关闭
refresh	重绘一个datepicker
setDate	以编码的形式选择一个日期
show	以编码的形式显示一个datepicker

4.1 以代码的方式选择一个日期

<input id="date"> <button id="setDate" type="button">SetDate</button> $(function(){
$("#date").datepicker();
$("#setDate").click(function(){
$("#date").datepicker("setDate","+7")
});
});

像defaultDate配置选项一样，支持相对文本，或者一个日期对象。

4.2 在 dialog box 中显示 datepicker

5 AJAX datepicker

<body> <div id="bookingForm" class="ui-widget ui-corner-all"> <div class="ui-widget-header ui-corner-top"> <h2>Booking Form</h2> </div> <div class="ui-widget-content ui-corner-bottom"> <label>Appointment date:</label><input id="date"> </div> <div> <script src="development-bundle/jquery-1.4.4.js"></script> <script src="jq/jquery-ui-1.8.9.js"></script> <script> (function($){
var months = [],
days = [];
$.getJSON(
"http://www.danwellman.co.uk/bookedDates.php?jsoncallback=?",
function(data) {
for (var x =0; x < data.dates.length; x++) {
months.push(data.dates[x].month);
days.push(data.dates[x].day);
}
}
);
function addDates(date){
if (date.getDay() ==0|| date.getDay() ==6) {
return [false, ""];
}
for (var x =0; x < days.length; x++) {
if (date.getMonth() == months[x] -1&& date.getDate() == days[x]) {
return [false, "preBooked_class"];
}
}
return [true, ""];
}
var pickerOpts = {
beforeShowDay: addDates,
minDate: "+1" };
$("#date").datepicker(pickerOpts);
})(jQuery);
</script> <style> #bookingForm { width:503px;} #bookingForm h2 { margin-left:20px;} #bookingForm .ui-widget-content { padding:20px 0; border-top:none; } label { margin:4px 20px 0; font-family:Verdana; font-size:80%; float:left; } #date { width:302px;} .ui-datepicker .preBooked_class { background:none;} .ui-datepicker .preBooked_class span { color:#ffffff; background:url(./img/date-picker/red_horizon.gif) no-repeat; } </style> </body>

服务器返回的数据如下

jsonp1376646626023({ 'dates':[
{'month':1,'day':5},
{'month':1,'day':6},
{'month':1,'day':19},
{'month':2,'day':9},
{'month':2,'day':10},
{'month':3,'day':16},
{'month':3,'day':23},
{'month':4,'day':13},
{'month':4,'day':15},
{'month':5,'day':4},
{'month':5,'day':12},
{'month':5,'day':13},
{'month':6,'day':15},
{'month':6,'day':16},
{'month':7,'day':13},
{'month':8,'day':17},
{'month':9,'day':9},
{'month':9,'day':10},
{'month':9,'day':11},
{'month':10,'day':13},
{'month':10,'day':14},
{'month':10,'day':27},
{'month':11,'day':16},
{'month':12,'day':28},
{'month':12,'day':29},
{'month':12,'day':30}
]})

此处如果自己制作服务端，要注意需要有一个回调函数的返回。

第一部分，我们初始化定义了两个空数组，它们执行AJAX请求，从服务端获得JSON对象。JSON对象包含一个单一的叫做dates的选项。这个选项的值是一个数组，每一个item都是一个对象。

它的每一个子对象都包含month和day属性，代表不能被选择的一天。

下面，我们定义了一个addDates回调函数，被beforeShowDay事件调用。这个函数传入一个日期，返回一个包含至多两个items的数组。第一个是boolean，代表是否这天能被选中。第二个是可选的，给这个禁用的日期提供一个classname。

我们的函数首先检查是否当前日期是否为一周中的0 sunday或 6 saturday。如果是，返回false作为数组的第一个item，使得周末不能被选中。

这里有一个内建的管理对象$.datepicker().noWeekends()能自动使得周末不能被选中。

接着，我们遍历months 和 days 数组，查看任何被传递给回调函数是否能匹配。如果 month 和 days 都匹配这个日期，则返回false，用自定义的classnames给他。如果不匹配，则返回一个包含true的数组，来表示这天可选。这允许我们指定任意数量的天数，不能被选中。

最后，我们定义了一个配置对象。它的属性简单地调用函数，使得JSON对象中指定的日期不能被选择。minDate选项设为相对地“+1”，证明我们不想让任何人选择过去的，或者今天。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航