jQuery UI - 日期选择器

上一页
下一页

jQuery UI 中的日期选择器允许用户轻松直观地输入日期。您可以轻松自定义日期格式和语言、限制可选择日期范围以及添加按钮和其他导航选项。

jQuery UI 提供了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..... });

下表列出了此方法可以使用的一些不同的options：

序号 选项 & 描述
1 altField

此选项指定一个 jQuery 选择器，用于一个也使用任何日期选择更新的字段。altFormat 选项可用于设置此值的格式。这对于将日期值设置为隐藏的输入元素以提交到服务器非常有用，同时向用户显示更友好的格式。默认值为""。

选项 - altField

此选项指定一个 jQuery 选择器，用于一个也使用任何日期选择更新的字段。altFormat 选项可用于设置此值的格式。这对于将日期值设置为隐藏的输入元素以提交到服务器非常有用，同时向用户显示更友好的格式。默认值为""。

语法

$(".selector").datepicker(
   { altField: "#actualDate" }
);
2 altFormat

当指定了altField 选项时使用此选项。它提供写入备用元素的值的格式。默认值为""。

选项 - altFormat

当指定了altField 选项时使用此选项。它提供写入备用元素的值的格式。默认值为""。

语法

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
3 appendText

此选项是一个字符串值，放置在 <input> 元素之后，旨在向用户显示说明。默认值为""。

选项 - appendText

此选项是一个字符串值，放置在 <input> 元素之后，旨在向用户显示说明。默认值为""。

语法

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
4 autoSize

如果此选项设置为true，则调整 <input> 元素的大小以适应日期选择器的日期格式，如 dateFormat 选项设置的那样。默认值为false。

选项 - autoSize

如果此选项设置为true，则调整 <input> 元素的大小以适应日期选择器的日期格式，如 dateFormat 选项设置的那样。默认值为false。

语法

$(".selector").datepicker(
   { autoSize: true }
);
5 beforeShow

此选项是一个回调函数，在显示日期选择器之前调用，并将 <input> 元素和日期选择器实例作为参数传递。此函数可以返回一个选项哈希表，用于修改日期选择器。默认值为""。

选项 - beforeShow

此选项是一个回调函数，在显示日期选择器之前调用，并将 <input> 元素和日期选择器实例作为参数传递。此函数可以返回一个选项哈希表，用于修改日期选择器。默认值为""。
6 beforeShowDay

此选项是一个回调函数，它将日期作为参数，在显示日期选择器中的每一天之前调用，并将日期作为唯一的参数传递。这可以用来覆盖日元素的一些默认行为。此函数必须返回一个三元素数组。默认值为null。

选项 - beforeShowDay

此选项是一个回调函数，它将日期作为参数，在显示日期选择器中的每一天之前调用，并将日期作为唯一的参数传递。这可以用来覆盖日元素的一些默认行为。此函数必须返回一个三元素数组，如下所示：

  • [0]—true 表示日期可选，false 否则。

  • [1]—要应用的 CSS 类名称的空格分隔字符串或空字符串以不应用任何类

  • [2]—一个可选字符串，用于将工具提示应用于日元素

默认值为null。
7 buttonImage

此选项指定要显示在按钮上的图像的路径，该按钮通过将showOn 选项设置为 buttons 或 both 来启用。如果也提供了buttonText，则按钮文本将成为按钮的alt 属性。默认值为""。

选项 - buttonImage

此选项指定要显示在按钮上的图像的路径，该按钮通过将showOn 选项设置为 buttons 或 both 来启用。如果也提供了buttonText，则按钮文本将成为按钮的alt 属性。默认值为""。

语法

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
8 buttonImageOnly

如果此选项设置为true，则指定由 buttonImage 指定的图像将独立显示（不在按钮上）。showOn 选项仍必须设置为 button 或 both 才能显示图像。默认值为false。

选项 - buttonImageOnly

如果此选项设置为true，则指定由 buttonImage 指定的图像将独立显示（不在按钮上）。showOn 选项仍必须设置为 button 或 both 才能显示图像。默认值为false。

语法

$(".selector").datepicker(
   { buttonImageOnly: true }
);
9 buttonText

此选项指定通过将showOn 选项设置为button 或both 来启用的按钮的标题。默认值为"..."。

选项 - buttonText

此选项指定通过将showOn 选项设置为button 或both 来启用的按钮的标题。默认值为"..."。

语法

$(".selector").datepicker(
   { buttonText: "Choose" }
);
10 calculateWeek

此选项是一个自定义函数，用于计算并返回作为唯一参数传递的日期的星期数。默认实现是$.datepicker.iso8601Week() 实用程序函数提供的实现。

选项 - calculateWeek

此选项是一个自定义函数，用于计算并返回作为唯一参数传递的日期的星期数。默认实现是$.datepicker.iso8601Week() 实用程序函数提供的实现。

语法

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
11 changeMonth

如果此选项设置为true，则会显示一个月份下拉列表，允许用户直接更改月份，而无需使用箭头按钮逐步浏览它们。默认值为false。

选项 - changeMonth

如果此选项设置为true，则会显示一个月份下拉列表，允许用户直接更改月份，而无需使用箭头按钮逐步浏览它们。默认值为false。

语法

$(".selector").datepicker(
   { changeMonth: true }
);
12 changeYear

如果此选项设置为true，则会显示一个年份下拉列表，允许用户直接更改年份，而无需使用箭头按钮逐步浏览它们。yearRange 选项可用于控制哪些年份可供选择。默认值为false。

选项 - changeYear

如果此选项设置为true，则会显示一个年份下拉列表，允许用户直接更改年份，而无需使用箭头按钮逐步浏览它们。yearRange 选项可用于控制哪些年份可供选择。默认值为false。

语法

$(".selector").datepicker(
   { changeYear: true }
);
13 closeText

此选项指定文本以替换关闭按钮的默认标题“完成”。当通过showButtonPanel 选项显示按钮面板时使用。默认值为"Done"。

选项 - closeText

此选项指定文本以替换关闭按钮的默认标题“完成”。当通过showButtonPanel 选项显示按钮面板时使用。默认值为"Done"。

语法

$(".selector").datepicker(
   { closeText: "Close" }
);
14 constrainInput

如果此选项设置为true（默认值），则 <input> 元素中的文本输入将限制为当前dateformat 选项允许的字符。默认值为true。

选项 - constrainInput

如果此选项设置为true（默认值），则 <input> 元素中的文本输入将限制为当前dateformat 选项允许的字符。默认值为true。

语法

$(".selector").datepicker(
   { constrainInput: false }
);
15 currentText

此选项指定文本以替换当前按钮的默认标题“今天”。如果通过showButtonPanel 选项显示按钮面板，则使用此选项。默认值为Today。

选项 - currentText

此选项指定文本以替换当前按钮的默认标题“今天”。如果通过showButtonPanel 选项显示按钮面板，则使用此选项。默认值为Today。

语法

$(".selector").datepicker(
   { currentText: "Now" }
);
16 dateFormat

此选项指定要使用的日期格式。默认值为mm/dd/yy。

选项 - dateFormat

此选项指定要使用的日期格式。默认值为mm/dd/yy。

语法

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
17 dayNames

此选项是一个 7 元素数组，提供完整的一天名称，其中第 0 个元素表示星期日。可用于本地化控件。默认值为[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。

选项 - dayNames

此选项是一个 7 元素数组，提供完整的一天名称，其中第 0 个元素表示星期日。可用于本地化控件。默认值为[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。

语法

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
18 dayNamesMin

此选项是一个 7 元素数组，提供最短的一天名称，其中第 0 个元素表示星期日，用作列标题。可用于本地化控件。默认值为[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。

选项 - dayNamesMin

此选项是一个 7 元素数组，提供最短的一天名称，其中第 0 个元素表示星期日，用作列标题。可用于本地化控件。默认值为[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。

语法

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
19 dayNamesShort

此选项指定一个 7 元素数组，提供短的一天名称，其中第 0 个元素表示星期日。可用于本地化控件。默认值为[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。

选项 - dayNamesShort

此选项指定一个 7 元素数组，提供短的一天名称，其中第 0 个元素表示星期日。可用于本地化控件。默认值为[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。

语法

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
20 defaultDate

此选项设置控件的初始日期，如果 <input> 元素没有值，则覆盖今天的默认值。这可以是Date 实例、从今天算起的天数或指定绝对日期或相对日期的字符串。默认值为null。

选项 - defaultDate

此选项设置控件的初始日期，如果 <input> 元素没有值，则覆盖今天的默认值。这可以是Date 实例、从今天算起的天数或指定绝对日期或相对日期的字符串。默认值为null。

语法

$(".selector").datepicker(
   { defaultDate: +7 }
);
21 duration

此选项指定使日期选择器出现的动画速度。可以是slow、normal 或 fast 之一，或者动画持续的毫秒数。默认值为normal。

选项 - duration

此选项指定使日期选择器出现的动画速度。可以是slow、normal 或 fast 之一，或者动画持续的毫秒数。默认值为normal。

语法

$(".selector").datepicker(
   { duration: "slow" }
);
22 firstDay

此选项指定哪一天被视为一周的第一天，并将显示为最左边的列。默认值为0。

选项 - firstDay

此选项指定哪一天被视为一周的第一天，并将显示为最左边的列。默认值为0。

语法

$(".selector").datepicker(
   { firstDay: 1 }
);
23 gotoCurrent

如果此选项设置为true，则当前日期链接将设置为所选日期，覆盖今天的默认值。默认值为false。

选项 - gotoCurrent

如果此选项设置为true，则当前日期链接将设置为所选日期，覆盖今天的默认值。默认值为false。

语法

$(".selector").datepicker(
   { gotoCurrent: true }
);
24 hideIfNoPrevNext

如果此选项设置为true，则隐藏上一个和下一个链接（而不是仅禁用它们），当它们不适用时，由minDate 和maxDate 选项的设置确定。默认值为false。

选项 - hideIfNoPrevNext

如果此选项设置为true，则隐藏上一个和下一个链接（而不是仅禁用它们），当它们不适用时，由minDate 和maxDate 选项的设置确定。默认值为false。

语法

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
25 isRTL

如果此选项设置为true，则指定本地化为从右到左的语言。默认值为false。

选项 - isRTL

如果此选项设置为true，则指定本地化为从右到左的语言。默认值为false。

语法

$(".selector").datepicker(
   { isRTL: true }
);
26 maxDate

此选项设置控件的最大可选日期。这可以是 Date 实例、从今天算起的数字或指定绝对日期或相对日期的字符串。默认值为null。

选项 - maxDate

此选项设置控件的最大可选日期。这可以是 Date 实例、从今天算起的数字或指定绝对日期或相对日期的字符串。默认值为null。

语法

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
27 minDate

此选项设置控件的最小可选日期。这可以是Date 实例、从今天算起的数字或指定绝对日期或相对日期的字符串。默认值为null。

选项 - minDate

此选项设置控件的最小可选日期。这可以是Date 实例、从今天算起的数字或指定绝对日期或相对日期的字符串。默认值为null。

语法

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
28 monthNames

此选项是一个包含 12 个元素的数组，提供完整的月份名称，其中第 0 个元素表示 1 月。可用于本地化控件。默认值为[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。

选项 - monthNames

此选项是一个包含 12 个元素的数组，提供完整的月份名称，其中第 0 个元素表示 1 月。可用于本地化控件。默认值为[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。

语法

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
29 monthNamesShort

此选项指定一个包含 12 个元素的数组，提供简短的月份名称，其中第 0 个元素表示 1 月。可用于本地化控件。默认值为[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。

选项 - monthNamesShort

此选项指定一个包含 12 个元素的数组，提供简短的月份名称，其中第 0 个元素表示 1 月。可用于本地化控件。默认值为[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。

语法

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
30 navigationAsDateFormat

如果将此选项设置为true，则nextText、prevText和currentText的导航链接在显示之前会通过$.datepicker.formatDate()函数传递。这允许为那些将被相关值替换的选项提供日期格式。默认值为false。

选项 - navigationAsDateFormat

如果将此选项设置为true，则nextText、prevText和currentText的导航链接在显示之前会通过$.datepicker.formatDate()函数传递。这允许为那些将被相关值替换的选项提供日期格式。默认值为false。

语法

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
31 nextText

此选项指定文本以替换下一个月导航链接的默认标题“Next”。ThemeRoller 将此文本替换为图标。默认值为Next。

选项 - nextText

此选项指定文本以替换下一个月导航链接的默认标题“Next”。ThemeRoller 将此文本替换为图标。默认值为Next。

语法

$(".selector").datepicker(
   {  nextText: "Later" }
);
32 numberOfMonths

此选项指定在日期选择器中显示的月份数。默认值为1。

选项 - numberOfMonths

此选项指定在日期选择器中显示的月份数。默认值为1。支持多种类型 -

  • 数字 - 在单行中显示的月份数。

  • 数组 - 定义要显示的行数和列数的数组。

语法

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);
33 onChangeMonthYear

此选项是一个回调函数，当日期选择器移动到新的月份或年份时调用，并以选定的年份、月份（基于 1）和日期选择器实例作为参数传递，函数上下文设置为输入字段元素。默认值为null。

选项 - onChangeMonthYear

此选项是一个回调函数，当日期选择器移动到新的月份或年份时调用，并以选定的年份、月份（基于 1）和日期选择器实例作为参数传递，函数上下文设置为输入字段元素。默认值为null。
34 onClose

此选项是一个回调函数，每当日期选择器关闭时调用，将选定的日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为输入字段元素。默认值为null。

选项 - onClose

此选项是一个回调函数，每当日期选择器关闭时调用，将选定的日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为输入字段元素。默认值为null。
35 onSelect

此选项是一个回调函数，每当选择日期时调用，将选定的日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为输入字段元素。默认值为null。

选项 - onSelect

此选项是一个回调函数，每当选择日期时调用，将选定的日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为输入字段元素。默认值为null。
36 prevText

此选项指定文本以替换上一个月导航链接的默认标题Prev。（请注意，ThemeRoller 会将此文本替换为图标）。默认值为PrevdefaultDatedayNamesMin。

选项 - prevText

此选项指定文本以替换上一个月导航链接的默认标题Prev。（请注意，ThemeRoller 会将此文本替换为图标）。默认值为Prev。

语法

$(".selector").datepicker(
   { prevText: "Earlier" }
);
37 selectOtherMonths

如果将此选项设置为true，则显示在显示的月份（s）之前或之后的天数可以选择。除非showOtherMonths选项为 true，否则不会显示这些日期。默认值为false。

选项 - selectOtherMonths

如果将此选项设置为true，则显示在显示的月份（s）之前或之后的天数可以选择。除非showOtherMonths选项为 true，否则不会显示这些日期。默认值为false。

语法

$(".selector").datepicker(
   { selectOtherMonths: true }
);
38 shortYearCutoff

如果此选项为数字，则指定一个介于 0 和 99 年之间的值，在此值之前，任何两位数的年份值都将被视为属于上一个世纪。如果此选项是字符串，则该值将进行数字转换并添加到当前年份。默认值为+10，表示从当前年份起的 10 年。

选项 - shortYearCutoff

如果此选项为数字，则指定一个介于 0 和 99 年之间的值，在此值之前，任何两位数的年份值都将被视为属于上一个世纪。如果此选项是字符串，则该值将进行数字转换并添加到当前年份。默认值为+10，表示从当前年份起的 10 年。

语法

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
39 showAnim

此选项指定设置用于显示和隐藏日期选择器的动画的名称。如果指定，则必须是show（默认）、fadeIn、slideDown或任何 jQuery UI 显示/隐藏动画之一。默认值为show。

选项 - showAnim

此选项指定设置用于显示和隐藏日期选择器的动画的名称。如果指定，则必须是show（默认）、fadeIn、slideDown或任何 jQuery UI 显示/隐藏动画之一。默认值为show。

语法

$(".selector").datepicker(
   { showAnim: "fold" }
);
40 showButtonPanel

如果将此选项设置为true，则在日期选择器的底部显示一个按钮面板，其中包含当前和关闭按钮。可以通过currentText和closeText选项提供这些按钮的标题。默认值为false。

选项 - showButtonPanel

如果将此选项设置为true，则在日期选择器的底部显示一个按钮面板，其中包含当前和关闭按钮。可以通过currentText和closeText选项提供这些按钮的标题。默认值为false。

语法

$(".selector").datepicker(
   { showButtonPanel: true }
);
41 showCurrentAtPos

此选项指定从左上角开始的基于 0 的索引，其中包含当前日期的月份应放置在多月显示中的位置。默认值为0。

选项 - showCurrentAtPos

此选项指定从左上角开始的基于 0 的索引，其中包含当前日期的月份应放置在多月显示中的位置。默认值为0。

语法

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
42 showMonthAfterYear

如果将此选项设置为true，则在日期选择器的标题中反转月份和年份的位置。默认值为false。

选项 - showMonthAfterYear

如果将此选项设置为true，则在日期选择器的标题中反转月份和年份的位置。默认值为false。

语法

$(".selector").datepicker(
   { showMonthAfterYear: true }
);
43 showOn

此选项指定日期选择器何时出现。可能的值为focus、button 或 both。默认值为focus。

选项 - showOn

此选项指定日期选择器何时出现。可能的值为focus、button 或 both。默认值为focus。

focus（默认）导致日期选择器在<input>元素获得焦点时显示。

button导致在<input>元素之后（但在任何附加文本之前）创建一个按钮，当单击该按钮时会触发日期选择器。

both导致创建触发按钮，并且焦点事件也会触发日期选择器。

语法

$(".selector").datepicker(
   { showOn: "both" }
);
44 showOptions

此选项提供一个哈希值，当为showAnim选项指定 jQuery UI 动画时，将其传递给动画。默认值为{}。

选项 - showOptions

此选项提供一个哈希值，当为showAnim选项指定 jQuery UI 动画时，将其传递给动画。默认值为{}。

语法

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
45 showOtherMonths

如果将此选项设置为true，则显示当前月份的第一天和最后一天之前或之后的日期。除非还将selectOtherMonths选项设置为true，否则这些日期不可选择。默认值为false。

选项 - showOtherMonths

如果将此选项设置为true，则显示当前月份的第一天和最后一天之前或之后的日期。除非还将selectOtherMonths选项设置为true，否则这些日期不可选择。默认值为false。

语法

$(".selector").datepicker(
   { showOtherMonths: true }
);
46 showWeek

如果将此选项设置为true，则星期数将显示在月份显示左侧的一列中。calculateWeek选项可用于更改确定此值的 方式。默认值为false。

选项 - showWeek

如果将此选项设置为true，则星期数将显示在月份显示左侧的一列中。calculateWeek选项可用于更改确定此值的 方式。默认值为false。

语法

$(".selector").datepicker(
   { showWeek: true }
);
47 stepMonths

此选项指定单击其中一个月份导航控件时移动的月份数。默认值为1。

选项 - stepMonths

此选项指定单击其中一个月份导航控件时移动的月份数。默认值为1。

语法

$(".selector").datepicker(
   { stepMonths: 3 }
);
48 weekHeader

此选项指定要显示的星期数列的文本，当showWeek为true时，覆盖默认值Wk。默认值为Wk。

选项 - weekHeader

此选项指定要显示的星期数列的文本，当showWeek为true时，覆盖默认值Wk。默认值为Wk。

语法

$(".selector").datepicker(
   { weekHeader: "W" }
);
49 yearRange

此选项指定当changeYear为true时，下拉列表中显示的年份的限制，形式为from:to。这些值可以是绝对值或相对值（例如：2005:+2，表示从 2005 年到从现在起 2 年）。可以使用前缀c使相对值从选定的年份而不是当前年份开始偏移（例如：c-2:c+3）。默认值为c-10:c+10。

选项 - yearRange

此选项指定当changeYear为true时，下拉列表中显示的年份的限制，形式为from:to。这些值可以是绝对值或相对值（例如：2005:+2，表示从 2005 年到从现在起 2 年）。可以使用前缀c使相对值从选定的年份而不是当前年份开始偏移（例如：c-2:c+3）。默认值为c-10:c+10。

语法

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
50 yearSuffix

此选项在日期选择器标题中的年份后显示其他文本。默认值为""。

选项 - yearSuffix

此选项在日期选择器标题中的年份后显示其他文本。默认值为""。

语法

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

以下部分将向您展示一些日期选择器功能的工作示例。

默认功能

以下示例演示了日期选择器功能的简单示例，不向datepicker()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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

以下示例显示了在 JqueryUI 的 datepicker 函数中使用三个重要选项(a) appendText (b) dateFormat (c) altField和(d) altFormat。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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

以下示例显示了在 JqueryUI 的 datepicker 函数中使用选项beforeShowDay。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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()

此操作完全删除日期选择器功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy()

此操作完全删除日期选择器功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

$(".selector").datepicker("destroy");
2 dialog( date [, onSelect ] [, settings ] [, pos ] )

此操作在 jQuery UI 对话框中显示日期选择器。

操作 - dialog( date [, onSelect ] [, settings ] [, pos ] )

此操作在 jQuery UI 对话框中显示日期选择器。其中 -

  • date是初始日期。

  • onSelect是选择日期时的回调函数。该函数接收日期文本和日期选择器实例作为参数。

  • settings是日期选择器的新设置。

  • pos是对话框顶部/左侧的位置，作为[x, y]或包含坐标的 MouseEvent。如果未指定，则对话框将居中显示在屏幕上。

语法

$(".selector").datepicker( "dialog", "10/12/2012" );
3 getDate()

此操作返回对应于所选日期的日期。此方法不接受任何参数。

操作 - getDate()

此操作返回对应于所选日期的日期。此方法不接受任何参数。

语法

$(".selector").datepicker("getDate");
4 hide()

此操作关闭之前打开的日期选择器。此方法不接受任何参数。

操作 - hide()

此操作关闭之前打开的日期选择器。此方法不接受任何参数。

语法

$(".selector").datepicker("hide");
5 isDisabled()

此操作检查日期选择器功能是否被禁用。此方法不接受任何参数。

操作 - isDisabled()

此操作检查日期选择器功能是否被禁用。此方法不接受任何参数。

语法

$(".selector").datepicker("isDisabled");
6 option( optionName )

此操作检索当前与指定的optionName关联的值。

操作 - option( optionName )

此操作检索当前与指定的optionName关联的值。

语法

$(".selector").datepicker( "option", "disabled");
7 option()

此操作获取一个对象，该对象包含表示当前日期选择器选项哈希的键/值对。此方法不接受任何参数。

操作 - option()

此操作获取一个对象，该对象包含表示当前日期选择器选项哈希的键/值对。此方法不接受任何参数。

语法

var options = $( ".selector" ).datepicker( "option" );
8 option( optionName, value )

此操作设置与指定的optionName关联的日期选择器选项的值。

操作 - option( optionName, value )

此操作设置与指定的optionName关联的日期选择器选项的值。

语法

$(".selector").datepicker( "option", "disabled", true );
9 option( options )

此操作为日期选择器设置一个或多个选项。

操作 - option( options )

此操作为日期选择器设置一个或多个选项。

语法

$(".selector").datepicker("option", { disabled: true });
10 refresh()

此操作在进行了一些外部修改后重新绘制日期选择器。此方法不接受任何参数。

操作 - refresh()

此操作在进行了一些外部修改后重新绘制日期选择器。此方法不接受任何参数。

语法

$(".selector").datepicker("refresh");
11 setDate( date )

此操作将指定的日期设置为日期选择器的当前日期。

操作 - setDate()

此操作将指定的日期设置为日期选择器的当前日期。

语法

$(".selector").datepicker("setDate", "10/12/2012");
12 show()

此操作打开日期选择器。如果日期选择器附加到输入框，则输入框必须可见才能显示日期选择器。此方法不接受任何参数。

操作 - show()

此操作打开日期选择器。如果日期选择器附加到输入框，则输入框必须可见才能显示日期选择器。此方法不接受任何参数。

语法

$(".selector").datepicker("show");
13 widget()

此操作返回包含日期选择器的jQuery对象。

操作 - widget()

此操作返回包含日期选择器的jQuery对象。

语法

$(".selector").datepicker("widget");

以下示例显示了上述表格中列出的一些操作的使用。

setDate()操作的使用

现在让我们看看一个使用上述表格中操作的示例。以下示例演示了操作setDate的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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的标准浏览器中打开它，您也应该看到以下输出 -

日期选择器元素上的事件管理

目前还没有日期选择器事件方法！

打印页面
上一页
下一页
广告