JqueryUI - 日期选择器小部件
jQueryUI 中的日期选择器允许用户轻松直观地输入日期。 您可以自定义日期格式和语言，限制可选择的日期范围并轻松添加按钮和其他导航选项。
jQueryUI 提供了 datepicker() 方法来创建日期选择器并通过添加新的 CSS 类来更改页面上 HTML 元素的外观。 将包装集中的 <input>, <div>, 和 <span> 元素转换为日期选择器控件。
默认情况下，对于 <input> 元素，当关联的文本字段获得焦点时，日期选择器日历会在一个小覆盖层中打开。 对于内联日历，只需将日期选择器附加到 <div> 或 <span> 元素即可。
语法
datepicker() 方法有两种使用方式 −
$ (selector, context).datepicker (options) 方法
datepicker (options) 方法声明一个 <input> 元素（或 <div>, 或 <span>，取决于您选择显示日历的方式）应作为日期选择器进行管理。 options 参数是一个指定日期选择器元素的行为和外观的对象。
语法
$(selector, context).datepicker(options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).datepicker({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | altField
此选项为字段指定 jQuery 选择器，该字段也随任何日期选择更新。 altFormat 选项可用于设置此值的格式。 这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用，同时向用户显示更加用户友好的格式。 默认情况下，它的值为 ""。 |
| 2 | altFormat
当指定了 altField 选项时使用此选项。 它提供要写入备用元素的值的格式。 默认情况下，它的值为 ""。 |
| 3 | appendText
此选项是放置在 <input> 元素之后的字符串值，旨在向用户显示说明。 默认情况下，它的值为 ""。 |
| 4 | autoSize
当设置为 true 时，此选项会调整 <input> 元素的大小以适应 dateFormat 选项设置的日期选择器的日期格式。 默认情况下，它的值为 false。 |
| 5 | beforeShow
此选项是一个回调函数，在显示日期选择器之前调用，<input> 元素和日期选择器实例作为参数传递。 此函数可以返回用于修改日期选择器的选项散列。 默认情况下，它的值为 ""。 |
| 6 | beforeShowDay
此选项是一个回调函数，它以日期作为参数，在显示之前在日期选择器中为每一天调用，日期作为唯一参数传递。 这可用于覆盖日元素的一些默认行为。 此函数必须返回一个三元素数组。默认情况下，它的值为 null。 |
| 7 | buttonImage
此选项指定要在按钮上显示的图像的路径，方法是将 showOn 选项设置为按钮之一或两者。 如果还提供了 buttonText，则按钮文本将成为按钮的 alt 属性。 默认情况下，它的值为 ""。 |
| 8 | buttonImageOnly
如果此选项设置为 true，则指定由 buttonImage 指定的图像将独立显示（而不是在按钮上）。 showOn 选项仍必须设置为按钮之一或两者才能显示图像。 默认情况下，它的值为 false。 |
| 9 | buttonText
此选项指定通过将 showOn 选项设置为 button 或 both 之一启用的按钮的标题。 默认情况下，它的值为 "..."。 |
| 10 | calculateWeek
此选项是一个自定义函数，用于计算和返回作为单独参数传递的日期的周数。 默认实现是由 $.datepicker.iso8601Week() 实用函数提供的。 |
| 11 | changeMonth
如果此选项设置为 true，则会显示月份下拉列表，允许用户直接更改月份，而无需使用箭头按钮逐步进行。 默认情况下，它的值为 false。 |
| 12 | changeYear
如果此选项设置为 true，则会显示一个年份下拉列表，允许用户直接更改年份，而无需使用箭头按钮逐步进行。 选项 yearRange 可用于控制可供选择的年份。 默认情况下，它的值为 false。 |
| 13 | closeText
此选项指定用于替换关闭按钮的默认标题"完成"的文本。 当通过 showButtonPanel 选项显示按钮面板时使用它。 默认情况下，它的值为"Done"。 |
| 14 | constrainInput
如果此选项设置为 true（默认值），<input> 元素中的文本输入将被限制为当前 dateformat 选项允许的字符。 默认情况下，它的值为 true。 |
| 15 | currentText
此选项指定用于替换当前按钮的默认标题"Today"的文本。 如果通过 showButtonPanel 选项显示按钮面板，则使用它。 默认情况下，它的值为Today。 |
| 16 | dateFormat
此选项指定要使用的日期格式。 默认情况下，其值为 mm/dd/yy。 |
| 17 | dayNames
此选项是一个 7 元素数组，提供完整的日期名称，第 0 个元素代表星期日。 可用于本地化控件。 默认情况下，它的值为 [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。 |
| 18 | dayNamesMin
此选项是一个 7 元素数组，提供最少的日期名称，第 0 个元素代表星期日，用作列标题。 可用于本地化控件。 默认情况下，它的值为 [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。 |
| 19 | dayNamesShort
此选项指定一个 7 元素数组，提供短日期名称，第 0 个元素代表星期日。 可用于本地化控件。 默认情况下，它的值为 [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。 |
| 20 | defaultDate
如果 <input> 元素没有值，此选项设置控件的初始日期，覆盖今天的默认值。 这可以是一个 Date 实例，从今天开始的 number 天数，或者一个指定绝对或相对日期的 string。 默认情况下，它的值为 null。 |
| 21 | duration
此选项指定使日期选择器出现的动画速度。 可以是slow, normal, 或 fast(慢速、正常或快速)之一，也可以是动画跨越的毫秒数。 默认情况下，它的值为 normal。 |
| 22 | firstDay
此选项指定哪一天被视为一周的第一天，并将显示为最左侧的列。 默认情况下，它的值为 0。 |
| 23 | gotoCurrent
此选项设置为 true 时，当前日期链接设置为所选日期，覆盖今天的默认值。 默认情况下，它的值为 false。 |
| 24 | hideIfNoPrevNext
此选项如果设置为 true，则在它们不适用时隐藏下一个和上一个链接（而不是仅仅禁用它们），这由 minDate 的设置决定 和 maxDate 选项。 默认情况下，它的值为 false。 |
| 25 | isRTL
此选项设置为 true 时，将本地化指定为从右到左的语言。 默认情况下，它的值为 false。 |
| 26 | maxDate
此选项设置控件的最大可选日期。 这可以是 Date 实例、从今天算起的天数，或者指定绝对或相对日期的字符串。 默认情况下，它的值为 null。 |
| 27 | minDate
此选项设置控件的最小可选日期。 这可以是一个 Date 实例，从今天开始的 number 天数，或者一个指定绝对或相对日期的 string。 默认情况下，它的值为 null。 |
| 28 | monthNames
此选项是一个 12 元素数组，提供完整的月份名称，第 0 个元素代表一月。 可用于本地化控件。 默认情况下，它的值为 [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。 |
| 29 | monthNamesShort
此选项指定一个 12 元素数组，提供短月份名称，第 0 个元素表示一月。 可用于本地化控件。 默认情况下，它的值为 [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。 |
| 30 | navigationAsDateFormat
如果此选项设置为 true，则 nextText、prevText 和 currentText 的导航链接在显示之前通过 $.datepicker.formatDate() 函数传递。 这允许为那些被相关值替换的选项提供日期格式。 默认情况下，它的值为 false。 |
| 31 | nextText
此选项指定用于替换下个月导航链接的默认标题的文本。 ThemeRoller 将此文本替换为一个图标。 默认情况下，它的值为 Next。 |
| 32 | numberOfMonths
此选项指定要在日期选择器中显示的月数。 默认情况下，它的值为 1。 |
| 33 | onChangeMonthYear
此选项是一个回调，当日期选择器移动到新的月份或年份时调用，选定的年份、月份（从 1 开始）和日期选择器实例作为参数传递，函数上下文设置为输入字段元素。 默认情况下，它的值为 null。 |
| 34 | onClose
此选项是每当日期选择器关闭时调用的回调，将所选日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，并且函数上下文设置为输入字段元素。 默认情况下，它的值为 null。 |
| 35 | onSelect
此选项是一个回调，只要选择一个日期，将所选日期作为文本（如果没有选择，则为空字符串）和日期选择器实例传递，并将函数上下文设置为输入字段元素。 默认情况下，它的值为 null。 |
| 36 | prevText
此选项指定用于替换上个月导航链接的默认标题 Prev 的文本。 （请注意，ThemeRoller 将此文本替换为一个图标）。 默认情况下，它的值为 PrevdefaultDatedayNamesMin。 |
| 37 | selectOtherMonths
如果此选项设置为 true，则可以选择显示月份之前或之后显示的天数。 除非 showOtherMonths 选项为真，否则不会显示这些日期。 默认情况下，它的值为 false。 |
| 38 | shortYearCutoff
如果此选项是一个数字，则指定一个介于 0 到 99 年之间的值，在此之前任何 2 位数年份值都将被视为属于上个世纪。 如果此选项是字符串，则该值会进行数字转换并添加到当前年份。 默认值为 +10，表示从当前年份算起 10 年。 |
| 39 | showAnim
此选项指定设置用于显示和隐藏日期选择器的动画名称。 如果指定，则必须是 show（默认）、fadeIn、slideDown 或任何 jQuery UI 显示/隐藏动画之一。 默认情况下，它的值为 show。 |
| 40 | showButtonPanel
如果此选项设置为 true，则会显示日期选择器底部的按钮面板，其中包含当前按钮和关闭按钮。 这些按钮的标题可以通过 currentText 和 closeText 选项提供。 默认情况下，它的值为 false。 |
| 41 | showCurrentAtPos
此选项指定从左上角开始的基于 0 的索引，其中包含当前日期的月份应放置在多月显示中。 默认情况下，它的值为 0。 |
| 42 | showMonthAfterYear
此选项指定如果设置为 true，则月份和年份的位置在日期选择器的标题中颠倒。 默认情况下，它的值为 false。 |
| 43 | showOn
此选项指定日期选择器应出现的时间。 可能的值是焦点、按钮或两者。 默认情况下，它的值为 focus。 |
| 44 | showOptions
当为 showAnim 选项指定 jQuery UI 动画时，此选项提供要传递给动画的散列。 默认情况下，它的值为 {}。 |
| 45 | showOtherMonths
如果此选项设置为 true，则显示当月第一天和最后一天之前或之后的日期。 除非 selectOtherMonths 选项也设置为 true，否则这些日期是不可选择的。 默认情况下，它的值为 false。 |
| 46 | showWeek
This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value is false. |
| 47 | stepMonths
此选项指定单击其中一个月份导航控件时要移动多少个月。 默认情况下，它的值为 1。 |
| 48 | weekHeader
当 showWeek 为真时，此选项指定要为周数列显示的文本，覆盖 Wk 的默认值。 默认情况下，它的值为 Wk。 |
| 49 | yearRange
当 changeYear 为 true 时，此选项指定限制以 from:to 形式显示在下拉列表中的年份。 这些值可以是绝对值或相对值（例如：2005:+2，表示 2005 年到从现在起的 2 年）。 前缀 c 可用于使相对值偏离所选年份而不是当前年份（例如：c-2:c+3）。 默认情况下，它的值为 c-10:c+10。 |
| 50 | yearSuffix
此选项在日期选择器标题中的年份之后显示附加文本。 默认情况下，它的值为 ""。 |
以下部分将向您展示一些日期选择器功能的工作示例。
默认功能
以下示例演示了不向 datepicker() 方法传递参数的日期选择器功能的简单示例。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://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>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
内嵌日期选择器
以下示例演示了内联日期选择器功能的一个简单示例。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://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>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，我们使用 <div> 元素来获取内联日期选择器。
appendText、dateFormat、altField 和 altFormat 的使用
下面的例子展示了三个重要选项的用法 (a) appendText (b) dateFormat (c) altField 和 (d) altFormat 在 JqueryUI 的日期选择器函数中。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://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>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，您可以看到第一次输入的日期格式设置为 yy-mm-dd。 如果您从日期选择器中选择某个日期，则相同的日期将反映在第二个输入字段中，其日期格式设置为"DD, d MM, yy"。
使用 beforeShowDay
以下示例显示了选项beforeShowDay 在JqueryUI 的日期选择器函数中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date) {
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-5"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，星期日和星期六被禁用。
showOn、buttonImage 和 buttonImageOnly 的使用
下面的例子展示了JqueryUI的datepicker函数中三个重要选项(a) showOn (b) buttonImage和(c)buttonImageOnly的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-6" ).datepicker({
showOn:"button",
buttonImage: "/jqueryui/images/calendar-icon.png",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-6"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中显示了一个图标，需要单击它才能打开日期选择器。
使用 defaultDate、dayNamesMin 和 duration
下面的例子展示了JqueryUI的datepicker函数中三个重要选项(a)dayNamesMin (b)dayNamesMin和(c)duration的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-7" ).datepicker({
defaultDate:+9,
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
duration: "slow"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-7"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的例子中，使用 dayNamesMin 更改了日期的名称。 您还可以看到已设置默认日期。
prevText、nextText、showOtherMonths 和 selectOtherMonths 的使用
下面的例子展示了JqueryUI的datepicker函数中三个重要选项(a)prevText(b)nextText(c)showOtherMonths和(d)selectOtherMonths的用法 .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-8" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: false
});
$( "#datepicker-9" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
<p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的例子中，prev 和 nect 链接有标题。 如果单击该元素，则会打开日期选择器。 现在在第一个日期选择器中，其他月份的日期被禁用，因为 selectOtherMonths 被设置为false。 在第二个输入类型的第二个日期选择器中，selectOtherMonths 设置为true。
changeMonth、changeYear 和 numberOfMonths 的使用
下面的例子展示了JqueryUI的datepicker函数中三个重要选项(a) changeMonth (b) changeYear和(c)numberOfMonths的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-10" ).datepicker({
changeMonth:true,
changeYear:true,
numberOfMonths:[2,2]
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-10"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，您可以看到月份和年份字段的下拉菜单。 我们在 [2,2] 的数组结构中显示 4 个月。
showWeek、yearSuffix 和 showAnim 的使用
下面的例子展示了JqueryUI的datepicker函数中三个重要选项(a) showWeek (b) yearSuffix和(c) showAnim的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-11" ).datepicker({
showWeek:true,
yearSuffix:"-CE",
showAnim: "slide"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-11"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，您可以看到周数显示在日期选择器的左侧，因为 showWeek 设置为 true。 年份带有"-CE"后缀。
$ (selector, context).datepicker ("action", [params]) 方法
datepicker (action, params) 方法可以对日历执行操作，例如选择新日期。 action 在第一个参数中指定为字符串，并且可以根据给定的操作提供一个或多个可选的 params。
基本上，这里的操作只是我们可以以字符串形式使用的 jQuery 方法。
语法
$(selector, context).datepicker ("action", [params]);
下表列出了此方法的操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy()
此操作完全删除了日期选择器功能。 这会将元素返回到其预初始化状态。 此方法不接受任何参数。 |
| 2 | dialog( date [, onSelect ] [, settings ] [, pos ] )
此操作在 jQuery UI 对话框中显示日期选择器。 |
| 3 | getDate()
此操作返回与所选日期对应的日期。 此方法不接受任何参数。 |
| 4 | hide()
此操作关闭先前打开的日期选择器。 此方法不接受任何参数。 |
| 5 | isDisabled()
此操作检查日期选择器功能是否被禁用。 此方法不接受任何参数。 |
| 6 | option( optionName )
此操作检索当前与指定的 optionName 关联的值。 |
| 7 | option()
此操作获取一个包含表示当前日期选择器选项哈希的键/值对的对象。 此方法不接受任何参数。 |
| 8 | option( optionName, value )
此操作设置与指定 optionName 相关联的日期选择器选项的值。 |
| 9 | option( options )
此操作为日期选择器设置一个或多个选项。 |
| 10 | refresh()
在进行了一些外部修改后，此操作会重绘日期选择器。 此方法不接受任何参数。 |
| 11 | setDate( date )
此操作将指定日期设置为日期选择器的当前日期。 |
| 12 | show()
此操作会打开日期选择器。 如果日期选择器附加到输入，则输入必须可见才能显示日期选择器。 此方法不接受任何参数。 |
| 13 | widget()
此操作返回一个包含日期选择器的 jQuery 对象。 |
以下示例显示了上表中列出的一些操作的使用。
setDate() 操作的使用
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 setDate 操作的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://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>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
show() 动作的使用
下面的例子演示了动作show 的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-13"></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 datepickerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
日期选择器元素的事件管理
目前还没有日期选择器事件方法！
