本文概述
- 第一种方法
- jQuery UI datepicker()示例1
- jQuery UI datepicker()方法示例2
- jQuery UI datepicker()方法示例3
- jQuery UI datepicker()方法示例4
- 第二种方法
- jQuery UI datepicker()方法示例5
jQuery UI datepicker()方法创建一个日期选择器, 并通过添加新的CSS类来更改页面上HTML元素的外观。
句法：
你可以两种形式使用datepicker()方法：
$(selector, context).datepicker (options) Method$(selector, context).datepicker ("action", [params]) Method第一种方法【jQuery UI日期选择器】datepicker（选项）方法指定应将< 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 | 此选项指定文本以替换关闭按钮的默认标题“完成”。通过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 | 此选项指定用于替换下个月导航链接的下一个默认标题的文本。 themeRoller将该文本替换为图标。默认情况下, 它的值是next。 |
| numberOfMonths |
此选项指定在日期选择器中显示的月数。默认情况下, 其值为1。 |
| onChangeMonthYear | 此选项是一个回调, 当日期选择器移动到新的月份或年份, 并以所选的年, 月（从1开始）和datepicker实例作为参数传递, 并且函数上下文设置为输入字段元素时, 将调用此回调。 。默认情况下, 其值为null。 |
| onClose | 此选项是在关闭日期选择器时调用的回调, 将选定的日期作为文本（如果没有选择, 则为空字符串）以及datepicker实例传递, 并将函数上下文设置为输入字段元素。默认情况下, 其值为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, 表示从现在到2005年的2年）。前缀c可用于使相对值偏离所选年份而不是当前年份（例如c-2：c + 3）。默认情况下, 其值为c-10：c + 10。 |
| yearSuffix | 此选项在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://img.readke.com/220430/00035925R-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003593156-1.jpg">
<
/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://img.readke.com/220430/00035925R-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003593156-1.jpg">
<
/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://img.readke.com/220430/00035925R-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003593156-1.jpg">
<
/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：
让我们以一个示例来演示jQueryUI的datepicker函数中showWeek, yearSuffix和showAnim的用法。
<
!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://img.readke.com/220430/00035925R-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003593156-1.jpg">
<
/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（操作, 参数）方法用于对日历执行操作, 例如选择新日期。该动作在第一个参数中指定为字符串, 并且可以根据该动作使用一个或多个参数。
句法：
$(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对象。 |
<
!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://img.readke.com/220430/00035925R-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003593156-1.jpg">
<
/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>
立即测试
