jQuery UI Datepicker
jQuery UI Datepicker小部件可帮助用户轻松直观地输入日期。用户可以自定义日期格式和语言，限制可选日期范围，轻松添加按钮和其他导航选项。
jQuery UI datepicker()方法创建一个日期选择器，并通过添加新的CSS类来更改页面上HTML元素的外观。
语法:
您可以以两种形式使用datepicker()方法:
$(selector, context).datepicker(options)
$(selector, context).datepicker("action", [params])
第一种方法
datepicker(options)方法指定<input>元素(或<div>或<span>)，具体取决于您选择如何显示日历，应作为日期选择器进行管理。 options参数指定datepicker元素的行为和外观。
语法:
$(selector, context).datepicker(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则应使用逗号将它们分开，如下所示:
$(selector, context).datepicker({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
| 选项 |
说明 |
| altField |
此选项为该字段指定一个jQuery选择器，该选择器也会随着任何日期选择而更新。 altFormat选项可用于设置该值的格式。这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用，同时向用户显示更加用户友好的格式。默认情况下，其值为""。 |
| altFormat |
在指定altField选项时使用此选项。它提供了将值写入备用元素的格式。默认情况下，其值为""。 |
| appendText |
此选项是要放置在<input>元素之后的字符串值，用于向用户显示指令。默认情况下，其值为""。 |
| autoSize |
此选项设置为true时，将调整<input>元素的大小，以适应使用dateformat选项设置的datepicker的日期格式。默认情况下，其值为false。 |
| beforeShow |
此选项是一个回调函数，它在显示日期选择器之前被调用，并以<input>元素和datepicker实例作为参数传递。该函数可以返回用于修改日期选择器的选项哈希。默认情况下，其值为""。 |
| beforeShowDay |
此选项是一个回调函数，它以日期作为参数，在日期选择器显示之前，每天在日期选择器中调用该日期，并将日期作为唯一参数。这可以用来替代day元素的某些默认行为。此函数必须返回一个三元素数组。默认情况下，其值为null。 |
| buttonImage |
此选项通过将showOn选项设置为按钮中的一个或两个来指定要在启用的按钮上显示的图像的路径。如果还提供buttonText，则按钮文本将成为按钮的alt属性。默认情况下，其值为""。 |
buttonImageOnly
|
如果将此选项设置为true，则指定由buttonImage指定的图像将独立显示(不在按钮上)。 showOn选项仍必须设置为按钮之一或两者都显示。默认情况下，其值为false。 |
| buttonText |
此选项通过将showOn选项设置为按钮之一或两者都指定启用按钮的标题。默认情况下，其值为" ..."。 |
| calculateWeek |
此选项是一个自定义函数，用于计算并返回作为lone参数传递的日期的星期数。默认实现是$ .datepicker.iso8601week()实用工具功能提供的。 |
| changeMonth |
如果将此选项设置为true，则显示月份下拉列表，允许用户直接更改月份，而无需使用箭头按钮来逐步浏览。默认情况下，其值为false。 |
| changeYear |
如果将此选项设置为true，则会显示年份下拉列表，使用户可以直接更改年份，而无需使用箭头按钮来逐步浏览。选项yearRange可用于控制哪些年份可供选择。默认情况下，其值为false。 |
| closeText |
此选项指定用于替换关闭按钮的默认标题done的文本。通过showbuttonpanel选项显示按钮面板时使用。默认情况下，其值为"完成"。 |
| constrainInput |
如果将此选项设置为true(默认设置)，则输入到<input>元素的文本将限于当前dateformat选项允许的字符。默认情况下，其值为true。 |
| currentText |
此选项指定用于替换当前按钮的今天默认标题的文本。如果通过showButtonPanel选项显示按钮面板，则使用此选项。默认情况下，其值为今天。 |
| dateFormat |
此选项指定要使用的日期格式。默认情况下，其值为mm/dd/yy。 |
| dayNames |
此选项是一个由7个元素组成的数组，提供全天名称，第0个元素代表星期日。它可以用于本地化控件。默认情况下，其值为[" Sunday"，" Monday"，" Tuesday"，" Wednesday"，" Thursday"，" Friday"，" Saturday"]。 |
| dayNamesMin |
此选项是一个7元素的数组，提供最少的日期名称，第0个元素表示星期日，用作列标题。它可用于本地化控件。默认情况下，其值为[" Su"，" Mo"，" Tu"，" We"，" Th"，" Fr"，" Sa"]。 |
| dayNamesShort |
此选项指定一个由7个元素组成的数组，该数组提供短日期名称，第0个元素表示星期日。它可以用于本地化控件。默认情况下，其值为[" Sun"，" Mon"，" Tue"，" Wed"，" Thu"，" Fri"，" Sat"]。 |
| defaultDate |
如果<input>元素没有值，则此选项设置控件的初始日期，并覆盖今天的默认值。这可以是日期实例，从今天开始的天数，或者是指定绝对或相对日期的字符串。默认情况下，其值为null。 |
| duration |
此选项指定使日期选择器出现的动画速度。它可以是慢速，正常或快速之一，也可以是动画跨越的毫秒数。默认情况下，其值为正常。
|
| firstday |
此选项指定将哪一天视为一周的第一天，并将显示在最左侧的列中。默认情况下，其值为0。
|
| gotocurrent |
此选项设置为true时，当前日期链接设置为所选日期，覆盖今天的默认值。默认情况下，其值为false。 |
| hideIfNoPrevNext |
如果设置为true，则该选项将隐藏下一个和上一个链接(而不是仅禁用它们)，这取决于mindate和maxdate选项的设置。默认情况下，其值为false。 |
| isRTL |
如果此选项设置为true，则将本地化指定为从右到左的语言。默认情况下，其值为false。 |
| maxDate |
此选项设置控件的最大可选择日期。这可以是日期实例，从今天开始的天数，或者是指定绝对或相对日期的字符串。默认情况下，其值为null。 |
| minDate |
此选项设置控件的最小可选日期。这可以是日期实例，从今天起的天数，或者是指定绝对或相对日期的字符串。默认情况下，其值为null。 |
| monthnames |
此选项是一个12元素的数组，提供完整的月份名称，其中第0个元素表示一月。它可用于本地化控件。默认情况下，其值为["一月"，"二月"，"三月"，"四月"，"五月"，"六月"，"七月"，"八月"，"九月"，"十月"，"十一月"， "十二月"]。 |
| monthNamesShort |
此选项指定一个12元素的数组，该数组提供短月份名称，第0个元素表示一月。它可用于本地化控件。默认情况下，其值为[" Jan"，" Feb"，" Mar"，" Apr"，" May"，" Jun"，" Jul"，" Aug"，" Sep"，" Oct"，" Nov"， " Dec"]。 |
| navigationAsDateFormat |
如果此选项设置为true，则在显示之前，将通过$ .datepicker.formatdate()函数传递nexttext，prevtext和currenttext的导航链接。这允许为那些被相关值替换的选项提供日期格式。默认情况下，其值为false。 |
| nexttext |
此选项指定用于替换下个月导航链接的next的默认标题的文本。 themeRoller将该文本替换为图标。默认情况下，它的值是next。 |
numberOfMonths
|
此选项指定在日期选择器中显示的月份数。默认情况下，其值为1。 |
| onChangeMonthYear |
此选项是一个回调，当日期选择器移至新的月份或年份时，使用selecte调用该回调d年，月(基于1的)和datepicker实例作为参数传递，并且函数上下文设置为输入字段元素。默认情况下，其值为null。 |
| onClose |
此选项是每当关闭日期选择器时调用的回调，将选定的日期作为文本(如果没有选择，则为空字符串)，日期选择器实例以及将函数上下文设置为输入字段元素的形式传递。默认情况下，其值为null。 |
| onSelect |
此选项是在选择日期时调用的回调，将所选日期作为文本(如果没有选择，则为空字符串)以及datepicker实例传递，并且函数上下文设置为输入字段元素。默认情况下，其值为null。 |
| prevText |
此选项指定用于替换上个月导航链接的默认prev标题的文本。(请注意，themeroller用一个图标替换了此文本)。默认情况下，其值为PrevdefaultDatedayNamesMin。 |
| selectOtherMonths |
如果此选项设置为true，则可以选择显示的月份之前或之后的天数。除非showOtherMonths选项为true，否则不会显示这些日期。默认情况下，其值为false。
|
| shortYearCutoff |
此选项(如果有数字)指定0到99年之间的值，在此之前任何2位数字的年值将被视为属于上个世纪。如果此选项是字符串，则该值将进行数字转换并添加到当前年份。默认值为+10，表示距当前年份的10年。 |
| showAnim |
此选项指定设置用于显示和隐藏日期选择器的动画的名称。如果指定，则必须是show(默认)，fadein，slidedown或jquery ui的show/hide动画之一。默认情况下，其值为show。 |
| showButtonPanel |
如果此选项设置为true，则显示日期选择器底部的按钮面板，其中包含当前和关闭按钮。这些按钮的标题可以通过currentText和closeText选项提供。默认情况下，其值为false。 |
| showCurrentAtPos |
此选项从左上角开始指定从0开始的索引，该位置应将包含当前日期的月份放置在多月显示中。默认情况下，其值为0。 |
| showMonthAfterYear |
此选项指定如果设置为true，则在日期选择器的标题中将月份和年份的位置颠倒。默认情况下，其值为false。 |
| showOn |
此选项指定何时应显示日期选择器。可能的值是焦点，按钮或两者。默认情况下，其值为焦点。 |
| showOptions |
当为showAnim选项指定jQuery UI动画时，此选项提供要传递给动画的哈希。默认情况下，其值为{}。 |
| showOtherMonths |
如果此选项设置为true，则显示当月第一天和最后一天之前或之后的日期。除非selectOtherMonths选项也设置为true，否则这些日期是不可选择的。默认情况下，其值为false。 |
| showWeek |
如果此选项设置为true，则在月份显示左侧的一栏中显示星期数。可以使用calculateWeek选项来更改确定此值的方式。默认情况下，其值为false。 |
| stepMonths |
此选项指定单击月份导航控件之一时要移动的月份。默认情况下，其值为1。 |
| weekHeader |
此选项指定当showWeek为true时，要为星期数列显示的文本，覆盖wk的默认值。默认情况下，其值为wk。 |
| yearRange |
此选项以以下形式指定在下拉列表中显示年份的限制: to changeYear为true时。值可以是绝对值或相对值(例如: 2005: +2，表示从现在到2年的2005)。前缀c可用于使相对值偏离所选年份而不是当前年份(例如c-2: c + 3)。默认情况下，其值为c-10: c + 10。 |
| yearSuffix |
此选项在datepicker标头中的年份之后显示其他文本。默认情况下，其值为""。 |
jQuery UI datepicker()示例1
让我们举一个简单的示例来演示datepicker功能，该函数不向datpicker()方法传递任何参数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-1").datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-1"></p>
</body>
</html>
jQuery UI datepicker()方法示例2
内联日期选择器:
让我们举一个简单的示例来演示内联日期选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-2").datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
Enter Date: <div id="datepicker-2"></div>
</body>
</html>
jQuery UI datepicker()方法示例3
使用appendText，dateFormat，altField和altFormat:
一个示例来演示jQueryUI datepicker()方法中选项，appendText，dateFormat，altField和altFormat的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-3").datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-3"></p>
<p>Alternate Date: <input type="text" id="datepicker-4"></p>
</body>
</html>
jQuery UI datepicker()方法示例4
使用showWeek，yearSuffix和showAnim:
让我们举个例子演示showWeek，yearSuffix和showAnim在jQueryUI的datepicker函数中的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-11").datepicker({
showWeek:true,
yearSuffix:"-CE",
showAnim: "explode"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-11"></p>
</body>
</html>
第二种方法
datepicker (action, params)方法用于对日历执行操作，例如选择新日期。该操作在第一个参数中指定为字符串，并且可以选择根据该操作使用一个或多个参数。
语法:
$(selector, context).datepicker ("action", [params]);
以下是与此方法一起使用的操作的列表。
动作
|
说明 |
| destroy() |
此操作将完全删除日期选择器功能。这将使元素返回其初始状态。此方法不接受任何参数。 |
| dialog(Date[,onSelect] [,settings] [,Pos]) |
此操作在jQuery ui对话框中显示日期选择器。 |
| getDate() |
此操作将返回与所选日期相对应的日期。此方法不接受任何参数。 |
| hide() |
此操作将关闭以前打开的日期选择器。此方法不接受任何参数。 |
| isDisabled() |
此操作将检查是否禁用了日期选择器功能。此方法不接受任何参数。 |
| option(optionName) |
此操作将检索当前与指定的optionName关联的值。 |
| option() |
此操作获取一个对象，该对象包含表示当前datepicker选项哈希的键/值对。此方法不接受任何参数。 |
option(optionName，Value)
|
此操作设置与指定的optionName关联的datepicker选项的值。 |
| option(Options) |
此操作为日期选择器设置一个或多个选项。 |
| refresh() |
此操作在进行了一些外部修改后重绘了日期选择器。此方法不接受任何参数。 |
| setdate(date) |
此操作将指定的日期设置为日期选择器的当前日期。 |
| show() |
此操作将打开日期选择器。如果将日期选择器附加到输入，则对于显示日期选择器，输入必须是可见的。此方法不接受任何参数。 |
| widget() |
此操作将返回一个包含日期选择器的jQuery对象。 |
jQuery UI datepicker()方法示例5
让我们以示例来演示上表中操作的用法。在此示例中，我们使用setDate()操作。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-12").datepicker();
$( "#datepicker-12").datepicker("setDate", "10w+1");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-12"></p>
</body>
</html>
