JqueryUI教程

JqueryUI - Datepicker

← 上一节 下一节 →

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

jQueryUI提供 datepicker()方法创建一个日期选择器，通过添加新的CSS类来更改页面上HTML元素的外观.转换< input>，< div>和< span>包装中的元素设置为一个datepicker控件.

默认情况下，对于< input>元素，当关联的文本字段获得焦点时，日期选择器日历将以小的叠加层打开.对于内联日历，只需将日期选择器附加到< div>或< span>即可. element.

语法

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

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

  • $(selector, context).datepicker ("action", [params]) 方法


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

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

语法

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


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

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


下表列出了可与此方法一起使用的不同选项 :

Sr.No.选项&安培;描述
1altField

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

选项 -  altField

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

语法 

 
 $(".selector").datepicker(
 {altField:"＃actdate"} 
);
2altFormat

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

选项 -  altFormat

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

语法 

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

此选项是在< input>之后放置的String值.用于向用户显示说明的元素.默认情况下，其值为"".

选项 -  appendText

此选项是在< input>之后放置的String值.用于向用户显示说明的元素.默认情况下，其值为"".

语法 

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

此选项设置为 true 时会调整< input>的大小.元素，用于容纳使用dateFormat选项设置的日期选择器的日期格式.默认情况下，其值为 false .

选项 -  autoSize

当设置为 true 时，此选项会调整< input>的大小.元素，用于容纳使用dateFormat选项设置的日期选择器的日期格式.默认情况下，其值为 false .

语法 

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

此选项是在显示日期选择器之前调用的回调函数，其中< input> element和datepicker实例作为参数传递.此函数可以返回用于修改datepicker的选项哈希.默认情况下，其值为"".

选项 -  beforeShow

此选项是在显示日期选择器之前调用的回调函数，其中< input> element和datepicker实例作为参数传递.此函数可以返回用于修改datepicker的选项哈希.默认情况下，其值为"".

6beforeShowDay

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

选项 -  beforeShowDay

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

  • [0]  -   true 使日期可选， false 否则.

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

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

默认情况下，其值为 null .

7buttonImage

此选项指定通过设置 showOn 其中一个按钮或两者的选项.如果还提供了 buttonText ，则按钮文本将成为按钮的 alt 属性.默认情况下，其值为"".

选项 -  buttonImage

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

语法 

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

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

选项 -  buttonImageOnly

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

语法 

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

此选项通过将 showOn 选项设置为按钮或两者之一来指定启用按钮的标题.默认情况下，其值为"...".

选项 -  buttonText

此选项通过将 showOn 选项设置为按钮或两者之一来指定启用按钮的标题.默认情况下，其值为"...".

语法 

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

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

选项 -  calculateWeek

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

语法 

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

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

选项 -  changeMonth

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

语法 

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

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

选项 -  changeYear

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

语法 

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

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

选项 -  closeText

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

语法 

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

此选项如果将 true (默认值)，文本条目设置为< input> element被约束为当前 dateformat 选项允许的字符.默认情况下，其值为 true .

选项 -  constrainInput

此选项如果将 true (默认值)，文本条目设置为< input> element被约束为当前 dateformat 选项允许的字符.默认情况下，其值为 true .

语法 

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

此选项指定用于替换当前按钮的"今天"默认标题的文本.如果通过 showButtonPanel 选项显示按钮面板，则使用此选项.默认情况下，其值为今天.

选项 -  currentText

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

语法 

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

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

选项 -  dateFormat

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

语法 

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

此选项是一个7元素数组，提供全天名称，第0个元素代表星期日.可用于本地化控件.默认情况下，其值为 ["星期日"，"星期一"，"星期二"，"星期三"，"星期四"，"星期五"，"星期六"] .

选项 -  dayNames

此选项是一个7元素数组，提供代表第0个元素的全天名称星期日.可用于本地化控件.默认情况下，其值为 ["星期日"，"星期一"，"星期二"，"星期三"，"星期四"，"星期五"，"星期六"] .

语法 

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

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

选项 -  dayNamesMin

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

语法 

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

此选项指定一个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"]} 
);
20defaultDate

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

选项 -  defaultDate

如果< input&gt ;,则此选项设置控件的初始日期，覆盖今天的默认值.元素没有价值.这可以是 Date 实例，从今天开始的数字，或指定绝对或相对日期的字符串.默认情况下，其值为 null .

语法 

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

此选项指定使日期选择器显示的动画的速度.可以是慢，正常或快速之一或动画跨越的毫秒数.默认情况下，其值正常.

选项 - 持续时间

此选项指定使日期选择器显示的动画的速度.可以是慢，正常或快速之一或动画跨越的毫秒数.默认情况下，其值为正常.

语法 

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

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

选项 -  firstDay

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

语法 

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

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

选项 -  gotoCurrent

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

语法 

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

此选项如果设置为 true ，则隐藏下一个和上一个链接(而不是仅仅禁用它们)，当它们不适用时，由 minDate

选项 -  hideIfNoPrevNext

此选项如果设置为 true ，则隐藏下一个和上一个链接(而不是仅仅禁用它们)，当它们不适用时，由 minDate的设置决定和 maxDate 选项.默认情况下，其值为 false .

语法 

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

此选项设置为 true 时，将本地化指定为从右向左的语言.默认情况下，其值为 false .

选项 -  isRTL

此选项设置为 true 时，将本地化指定为从右向左的语言.默认情况下，其值为 false .

语法 

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

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

选项 -  maxDate

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

语法 

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

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

选项 -  minDate

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

语法 

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

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

选项 -  monthNames

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

语法 

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

此选项指定一个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"，"Feb"，"Mar"，"Apr"，"May"，"Jun"，"Jul"，"Aug"，"Sep"，"Oct"，" Nov"，"Dec"]]} 
);
30navigationAsDateFormat

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

选项 -  navigationAsDateFormat

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

语法 

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

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

选项 -  nextText

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

语法 

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

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

选项 -  numberOfMonths

此选项指定在datepicker中显示的月数.默认情况下，其值 1 .支持和减去多种类型;

  • 数字 : 单行显示的月数.

  • 数组 : 一个数组，定义要显示的行数和列数.

语法 

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

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


 
 

Option - onChangeMonthYear

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


 
 
34onClose

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


 
 

Option - onClose

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


 
 
35onSelect

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


 
 

Option - onSelect

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


 
 
36prevText

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


 
 

Option - prevText

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

Syntax

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

 
 
37selectOtherMonths

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


 
 

Option - selectOtherMonths

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

Syntax

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

 
 
38shortYearCutoff

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

默认值为+10，表示当前年份的10年。


 
 

Option - shortYearCutoff

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

默认值为+10，表示当前年份的10年。

Syntax

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

 
 
39showAnim

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


 
 

Option - showAnim

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

Syntax

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

 
 
40showButtonPanel

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


 
 

Option - showButtonPanel

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

Syntax

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

 
 
41showCurrentAtPos

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


 
 

Option - showCurrentAtPos

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

Syntax

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

 
 
42showMonthAfterYear

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


 
 

Option - showMonthAfterYear

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

Syntax

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

 
 
43showOn

此选项指定何时应出现日期选择器。 可能的值是焦点，按钮或两者。 默认情况下，其值为焦点。


 
 

Option - showOn

此选项指定何时应出现日期选择器。 可能的值是焦点，按钮或两者。 默认情况下，其值为焦点。

focus（默认值）会导致datepicker在<input>元素获得焦点时显示。

按钮导致在<input>元素之后（但在任何附加文本之前）创建一个按钮，该按钮在单击时触发datepicker。

两者都会导致触发按钮被创建，焦点事件也会触发日期选择器。

Syntax

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

 
 
44showOptions

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


 
 

Option - showOptions

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

Syntax

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

 
 
45showOtherMonths

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


 
 

Option - showOtherMonths

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

Syntax

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

 
 
46showWeek

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


 
 

Option - showWeek

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

Syntax

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

 
 
47stepMonths

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


 
 

Option - stepMonths

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

Syntax

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

 
 
48weekHeader

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


 
 

Option - weekHeader

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

Syntax

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

 
 
49yearRange

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


 
 

Option - yearRange

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

Syntax

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

 
 
50yearSuffix

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


 
 

Option - yearSuffix

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

Syntax

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

 
 

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

默认功能

以下示例演示了一个简单的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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果:

← 上一节 下一节 →

相关菜鸟教程