目录

JqueryUI - Datepicker( Datepicker)

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

jQueryUI提供了datepicker datepicker()方法,该方法通过添加新的CSS类来创建日期选择器并更改页面上HTML元素的外观。 将包装集中的“input”,“div”和“span”元素转换为datepicker控件。

默认情况下,对于《input》元素,当相关文本字段获得焦点时,datepicker日历将以小覆盖打开。 对于内联日历,只需将日期选择器附加到
元素即可。

语法 (Syntax)

datepicker()方法可以使用两种形式 -

$(selector,context).datepicker(options)方法

datepicker (options)方法声明<input>元素(或<div>或<span>,具体取决于您选择显示日历的方式)应作为日期选择器进行管理。 options参数是一个对象,它指定了datepicker元素的行为和外观。

语法 (Syntax)

$(selector, context).datepicker(options);

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

$(selector, context).datepicker({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 altField

此选项为字段指定jQuery选择器,该选择器也使用任何日期选择进行更新。 altFormat选项可用于设置此值的格式。 这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用,同时向用户显示更加用户友好的格式。 默认情况下,其值为""

Option - altField

此选项为字段指定jQuery选择器,该选择器也使用任何日期选择进行更新。 altFormat选项可用于设置此值的格式。 这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用,同时向用户显示更加用户友好的格式。 默认情况下,其值为""

Syntax

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

指定altField选项时使用此选项。 它提供要写入备用元素的值的格式。 默认情况下,其值为""

Option - altFormat

指定altField选项时使用此选项。 它提供要写入备用元素的值的格式。 默认情况下,其值为""

Syntax

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

此选项是要放在《input》元素后面的String值,用于向用户显示指令。 默认情况下,其值为""

Option - appendText

此选项是要放在《input》元素后面的String值,用于向用户显示指令。 默认情况下,其值为""

Syntax

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

设置为true时,此选项会调整“input”元素的大小,以适应使用dateFormat选项设置的日期选择器的日期格式。 默认情况下,其值为false

Option - autoSize

设置为true时,此选项会调整“input”元素的大小,以适应使用dateFormat选项设置的日期选择器的日期格式。 默认情况下,其值为false

Syntax

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

此选项是在显示datepicker之前调用的回调函数,其中《input》元素和datepicker实例作为参数传递。 此函数可以返回用于修改datepicker的选项哈希。 默认情况下,其值为""

Option - beforeShow

此选项是在显示datepicker之前调用的回调函数,其中《input》元素和datepicker实例作为参数传递。 此函数可以返回用于修改datepicker的选项哈希。 默认情况下,其值为""

6 beforeShowDay

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

Option - beforeShowDay

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

  • [0] - true为日期可选, false否则为false

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

  • [2] - 将工具提示应用于day元素的可选字符串

默认情况下,其值为null

7 buttonImage

此选项通过将showOn选项设置为其中一个按钮或两者来指定要在按钮上显示的图像的路径。 如果还提供了buttonText ,则按钮文本将成为按钮的alt属性。 默认情况下,其值为""

Option - buttonImage

此选项通过将showOn选项设置为其中一个按钮或两者来指定要在按钮上显示的图像的路径。 如果还提供了buttonText ,则按钮文本将成为按钮的alt属性。 默认情况下,其值为""

Syntax

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

此选项(如果设置为true )指定buttonImage指定的图像将独立显示(而不是按钮)。 showOn选项仍必须设置为按钮或两者之一才能显示图像。 默认情况下,其值为false

Option - buttonImageOnly

此选项(如果设置为true )指定buttonImage指定的图像将独立显示(而不是按钮)。 showOn选项仍必须设置为按钮或两者之一才能显示图像。 默认情况下,其值为false

Syntax

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

此选项通过将showOn选项设置为buttonboth来指定启用按钮的标题。 默认情况下,其值为"..."

Option - buttonText

此选项通过将showOn选项设置为buttonboth来指定启用按钮的标题。 默认情况下,其值为"..."

Syntax

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

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

Option - calculateWeek

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

Syntax

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

此选项如果设置为true ,则会显示月份下拉列表,允许用户直接更改月份而不使用箭头按钮逐步执行它们。 默认情况下,其值为false

Option - changeMonth

此选项如果设置为true ,则会显示月份下拉列表,允许用户直接更改月份而不使用箭头按钮逐步执行它们。 默认情况下,其值为false

Syntax

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

此选项如果设置为true ,则显示年份下拉列表,允许用户直接更改年份而不使用箭头按钮逐步执行它们。 选项yearRange可用于控制可供选择的年份。 默认情况下,其值为false

Option - changeYear

此选项如果设置为true ,则显示年份下拉列表,允许用户直接更改年份而不使用箭头按钮逐步执行它们。 选项yearRange可用于控制可供选择的年份。 默认情况下,其值为false

Syntax

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

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

Option - closeText

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

Syntax

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

此选项如果设置为true (默认值),则“input”元素中的文本条目将限制为当前dateformat选项允许的字符。 默认情况下,其值为true

Option - constrainInput

此选项如果设置为true (默认值),则“input”元素中的文本条目将限制为当前dateformat选项允许的字符。 默认情况下,其值为true

Syntax

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

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

Option - currentText

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

Syntax

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

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

Option - dateFormat

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

Syntax

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

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

Option - dayNames

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

Syntax

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

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

Option - dayNamesMin

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

Syntax

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

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

Option - dayNamesShort

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

Syntax

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

如果《input》元素没有值,则此选项设置控件的初始日期,覆盖today的默认值。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

Option - defaultDate

如果《input》元素没有值,则此选项设置控件的初始日期,覆盖today的默认值。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

Syntax

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

此选项指定使日期选择器显示的动画的速度。 可以是slow, normal, or fast,也可以是动画跨越的毫秒数。 默认情况下,其值是normal

Option - duration

此选项指定使日期选择器显示的动画的速度。 可以是slow, normal, or fast,也可以是动画跨越的毫秒数。 默认情况下,其值是normal

Syntax

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

此选项指定哪一天被视为一周的第一天,并将显示为最左侧的列。 默认情况下,其值为0

Option - firstDay

此选项指定哪一天被视为一周的第一天,并将显示为最左侧的列。 默认情况下,其值为0

Syntax

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

此选项设置为true ,当前日期链接设置为所选日期,覆盖今天的默认值。 默认情况下,其值为false

Option - gotoCurrent

此选项设置为true ,当前日期链接设置为所选日期,覆盖今天的默认值。 默认情况下,其值为false

Syntax

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

如果设置为true ,则此选项会在不适用时隐藏下一个和上一个链接(而不是仅禁用它们),具体取决于minDatemaxDate选项的设置。 默认情况下,其值为false

Option - hideIfNoPrevNext

如果设置为true ,则此选项会在不适用时隐藏下一个和上一个链接(而不是仅禁用它们),具体取决于minDatemaxDate选项的设置。 默认情况下,其值为false

Syntax

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

设置为true ,此选项将本地化指定为从右到左的语言。 默认情况下,其值为false

Option - isRTL

设置为true ,此选项将本地化指定为从右到左的语言。 默认情况下,其值为false

Syntax

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

此选项设置控件的最大可选日期。 这可以是Date实例,从今天开始的天数,或指定绝对或相对日期的字符串。 默认情况下,其值为null

Option - maxDate

此选项设置控件的最大可选日期。 这可以是Date实例,从今天开始的天数,或指定绝对或相对日期的字符串。 默认情况下,其值为null

Syntax

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

此选项设置控件的最小可选日期。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

Option - minDate

此选项设置控件的最小可选日期。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

Syntax

$(".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" ]

Option - monthNames

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

Syntax

$(".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" ]

Option - monthNamesShort

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

Syntax

$(".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

Option - navigationAsDateFormat

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

Syntax

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

此选项指定用于替换下个月导航链接的默认标题Next的文本。 ThemeRoller用图标替换此文本。 默认情况下,其值为Next

Option - nextText

此选项指定用于替换下个月导航链接的默认标题Next的文本。 ThemeRoller用图标替换此文本。 默认情况下,其值为Next

Syntax

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

此选项指定在datepicker中显示的月数。 默认情况下,其值为1

Option - numberOfMonths

此选项指定在datepicker中显示的月数。 默认情况下,其值为1 。 支持多种类型 -

  • Number - 单行显示的月数。

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

Syntax

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

此选项是在datepicker移动到新月或年时调用的回调,其中选定的年,月(从1开始)和datepicker实例作为参数传递,并且函数上下文设置为输入字段元素。 默认情况下,其值为null

Option - onChangeMonthYear

此选项是在datepicker移动到新月或年时调用的回调,其中选定的年,月(从1开始)和datepicker实例作为参数传递,并且函数上下文设置为输入字段元素。 默认情况下,其值为null

34 onClose

此选项是每当关闭一个datepicker时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串),以及datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

Option - onClose

此选项是每当关闭一个datepicker时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串),以及datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

35 onSelect

此选项是每当选择日期时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串)和datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

Option - onSelect

此选项是每当选择日期时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串)和datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

36 prevText

此选项指定要替换上个月导航链接的默认标题Prev的文本。 (请注意,ThemeRoller用图标替换此文本)。 默认情况下,其值为PrevdefaultDatedayNamesMin

Option - prevText

此选项指定要替换上个月导航链接的默认标题Prev的文本。 (请注意,ThemeRoller用图标替换此文本)。 默认情况下,其值为Prev

Syntax

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

如果设置为true ,则可以选择此选项,显示在显示的月份之前或之后显示的天数。 除非showOtherMonths选项为true,否则不会显示这些天数。 默认情况下,其值为false

Option - selectOtherMonths

如果设置为true ,则可以选择此选项,显示在显示的月份之前或之后显示的天数。 除非showOtherMonths选项为true,否则不会显示这些天数。 默认情况下,其值为false

Syntax

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

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

Option - shortYearCutoff

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

Syntax

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

此选项指定设置用于显示和隐藏日期选择器的动画的名称。 如果指定,则必须是show (the default), fadeIn, slideDown,或任何jQuery UI显示/隐藏动画之一。 默认情况下,其值为show

Option - showAnim

此选项指定设置用于显示和隐藏日期选择器的动画的名称。 如果指定,则必须是show (the default), fadeIn, slideDown,或任何jQuery UI显示/隐藏动画之一。 默认情况下,其值为show

Syntax

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

此选项如果设置为true ,则会显示日期选择器底部的按钮面板,其中包含当前和关闭按钮。 可以通过currentTextcloseText选项提供这些按钮的标题。 默认情况下,其值为false

Option - showButtonPanel

此选项如果设置为true ,则会显示日期选择器底部的按钮面板,其中包含当前和关闭按钮。 可以通过currentTextcloseText选项提供这些按钮的标题。 默认情况下,其值为false

Syntax

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

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

Option - showCurrentAtPos

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

Syntax

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

此选项指定如果设置为true ,则在datepicker的标题中反转月份和年份的位置。 默认情况下,其值为false

Option - showMonthAfterYear

此选项指定如果设置为true ,则在datepicker的标题中反转月份和年份的位置。 默认情况下,其值为false

Syntax

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

此选项指定何时应出现日期选择器。 可能的值是focus, button or both 。 默认情况下,其值为focus

Option - showOn

此选项指定何时应出现日期选择器。 可能的值是focus, button or both 。 默认情况下,其值为focus

focus (默认值)会导致datepicker在“input”元素获得焦点时显示。

button导致在“input”元素之后(但在任何附加文本之前)创建一个按钮,该按钮在单击时触发datepicker。

both导致触发按钮被创建,而焦点事件也会触发日期选择器。

Syntax

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

当为showAnim选项指定jQuery UI动画时,此选项提供要传递给动画的哈希。 默认情况下,其值为{}

Option - showOptions

当为showAnim选项指定jQuery UI动画时,此选项提供要传递给动画的哈希。 默认情况下,其值为{}

Syntax

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

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

Option - showOtherMonths

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

Syntax

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

此选项如果设置为true ,则周数显示在月份显示左侧的列中。 calculateWeek选项可用于更改确定此值的方式。 默认情况下,其值为false

Option - showWeek

此选项如果设置为true ,则周数显示在月份显示左侧的列中。 calculateWeek选项可用于更改确定此值的方式。 默认情况下,其值为false

Syntax

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

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

Option - stepMonths

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

Syntax

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

当showWeek为true时,此选项指定要显示的周数列的文本,覆盖Wk的默认值。 默认情况下,其值为Wk

Option - weekHeader

当showWeek为true时,此选项指定要显示的周数列的文本,覆盖Wk的默认值。 默认情况下,其值为Wk

Syntax

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

此选项指定在以下形式的下拉列表中显示哪些年份的限制from:tochangeYeartrue 。 值可以是绝对值或相对值(例如:2005:+ 2,从2005年到2年)。 前缀c可用于使相对值偏离所选年份而不是当前年份(例如:c-2:c + 3)。 默认情况下,其值为c-10:c+10

Option - yearRange

此选项指定在以下形式的下拉列表中显示哪些年份的限制from:tochangeYeartrue 。 值可以是绝对值或相对值(例如:2005:+ 2,从2005年到2年)。 前缀c可用于使相对值偏离所选年份而不是当前年份(例如:c-2:c + 3)。 默认情况下,其值为c-10:c+10

Syntax

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

此选项在datepicker标题中显示年份之后的其他文本。 默认情况下,其值为""

Option - yearSuffix

此选项在datepicker标题中显示年份之后的其他文本。 默认情况下,其值为""

Syntax

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

以下部分将向您展示一些datepicker功能的工作示例。

默认的功能 (Default functionality)

以下示例演示了一个简单的datepicker功能示例,该功能不将任何参数传递给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的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果 -

新页面打开

内联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-2" ).datepicker();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

让我们将上述代码保存在HTML文件datepickerexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果 -

新页面打开

在上面的示例中,我们使用

元素来获取内联日期选择器。

使用appendText,dateFormat,altField和altFormat

以下示例显示了(d) altFormat函数中三个重要选项(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.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 。 如果从datepicker中选择某个日期,则相同的日期将反映在日期格式设置为“DD,d MM,yy”的第二个输入字段中。

使用beforeShowDay

以下示例显示了beforeShowDay函数中选项beforeShowDay的用法。

<!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

以下示例显示了(a) showOn (b) buttonImage中三个重要选项(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

以下示例显示了(a) dayNamesMin (b) dayNamesMin中三个重要选项(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

以下示例显示了三个重要选项的用法(a) prevText (b) nextText (c) showOtherMonths(d) selectOtherMonths在JqueryUI的datepicker函数中的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链接有标题。 如果单击该元素,则会打开日期选择器。 现在在第一个datepicker中,其他月份日期将被禁用,因为selectOtherMonths设置为false 。 在第二个输入类型的第二个日期选择器中,selectOtherMonths设置为true

使用changeMonth,changeYear和numberOfMonths

以下示例显示了(a) changeMonth (b) changeYear中三个重要选项(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的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果 -

新页面打开

在上面的示例中,您可以看到Month和Year字段的下拉菜单。 我们在[2,2]的阵列结构中贬低了4个月。

使用showWeek,yearSuffix和showAnim

以下示例显示了(a) showWeek (b) yearSuffix中三个重要选项(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的左侧,因为showWeek设置为true 。 年份的后缀为“-CE”。

$(selector,context).datepicker(“action”,[params])方法

datepicker (action, params)方法可以对日历执行操作,例如选择新日期。 该action在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个params

基本上,这里的操作只不过是jQuery方法,我们可以以字符串的形式使用它们。

语法 (Syntax)

$(selector, context).datepicker ("action", [params]);

下表列出了此方法的操作 -

Sr.No. 行动和描述
1 destroy()

此操作会完全删除datepicker功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作会完全删除datepicker功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$(".selector").datepicker("destroy");
2 对话框(日期[,onSelect] [,设置] [,pos])

此操作在jQuery UI对话框中显示datepicker。

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

此操作在jQuery UI对话框中显示datepicker。 哪里 -

  • date是初始日期。

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

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

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

Syntax

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

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

Action - getDate()

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

Syntax

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

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

Action - hide()

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

Syntax

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

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

Action - isDisabled()

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

此操作获取一个对象,其中包含表示当前datepicker选项哈希的键/值对。 此方法不接受任何参数。

Action - option()

此操作获取一个对象,其中包含表示当前datepicker选项哈希的键/值对。 此方法不接受任何参数。

Syntax

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

此操作设置与指定的optionName关联的datepicker选项的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的datepicker选项的值。

Syntax

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

此操作为datepicker设置一个或多个选项。

Action - option( options )

此操作为datepicker设置一个或多个选项。

Syntax

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

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

Action - refresh()

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

Syntax

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

此操作将指定日期设置为datepicker的当前日期。

Action - setDate()

此操作将指定日期设置为datepicker的当前日期。

Syntax

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

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

Action - show()

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

Syntax

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

此操作返回包含datepicker的jQuery对象。

Action - widget()

此操作返回包含datepicker的jQuery对象。

Syntax

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

以下示例显示了上表中列出的某些操作的用法。

Use of setDate() action

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它,您还必须看到以下输出 -

新页面打开

Use of show() action

以下示例演示了使用action 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的标准浏览器中打开它,您还必须看到以下输出 -

新页面打开

datepicker元素的事件管理

截至目前,还没有datepicker事件方法!

↑回到顶部↑
WIKI教程 @2018