企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# Datepicker Widget # Datepicker Widget Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets") ## version added: 1.0 **Description:** 从弹出框或内联日历选择一个日期。 ## QuickNav[Examples](#entry-examples) ### Options - [altField](#option-altField) - [altFormat](#option-altFormat) - [appendText](#option-appendText) - [autoSize](#option-autoSize) - [beforeShow](#option-beforeShow) - [beforeShowDay](#option-beforeShowDay) - [buttonImage](#option-buttonImage) - [buttonImageOnly](#option-buttonImageOnly) - [buttonText](#option-buttonText) - [calculateWeek](#option-calculateWeek) - [changeMonth](#option-changeMonth) - [changeYear](#option-changeYear) - [closeText](#option-closeText) - [constrainInput](#option-constrainInput) - [currentText](#option-currentText) - [dateFormat](#option-dateFormat) - [dayNames](#option-dayNames) - [dayNamesMin](#option-dayNamesMin) - [dayNamesShort](#option-dayNamesShort) - [defaultDate](#option-defaultDate) - [duration](#option-duration) - [firstDay](#option-firstDay) - [gotoCurrent](#option-gotoCurrent) - [hideIfNoPrevNext](#option-hideIfNoPrevNext) - [isRTL](#option-isRTL) - [maxDate](#option-maxDate) - [minDate](#option-minDate) - [monthNames](#option-monthNames) - [monthNamesShort](#option-monthNamesShort) - [navigationAsDateFormat](#option-navigationAsDateFormat) - [nextText](#option-nextText) - [numberOfMonths](#option-numberOfMonths) - [onChangeMonthYear](#option-onChangeMonthYear) - [onClose](#option-onClose) - [onSelect](#option-onSelect) - [prevText](#option-prevText) - [selectOtherMonths](#option-selectOtherMonths) - [shortYearCutoff](#option-shortYearCutoff) - [showAnim](#option-showAnim) - [showButtonPanel](#option-showButtonPanel) - [showCurrentAtPos](#option-showCurrentAtPos) - [showMonthAfterYear](#option-showMonthAfterYear) - [showOn](#option-showOn) - [showOptions](#option-showOptions) - [showOtherMonths](#option-showOtherMonths) - [showWeek](#option-showWeek) - [stepMonths](#option-stepMonths) - [weekHeader](#option-weekHeader) - [yearRange](#option-yearRange) - [yearSuffix](#option-yearSuffix) ### Methods - [destroy](#method-destroy) - [dialog](#method-dialog) - [getDate](#method-getDate) - [hide](#method-hide) - [isDisabled](#method-isDisabled) - [option](#method-option) - [refresh](#method-refresh) - [setDate](#method-setDate) - [show](#method-show) - [widget](#method-widget) ### Events jQuery UI 日期选择器(Datepicker)是向页面添加日期选择功能的高度可配置插件。您可以自定义日期格式和语言,限制可选择的日期范围,添加按钮和其他导航选项。 默认情况下,当相关的文本域获得焦点时,在一个小的覆盖层打开日期选择器。对于一个内联的日历,只需简单地将日期选择器附加到 div 或者 span 上。 ### 键盘交互 当日期选择器打开时,下面的键盘命令可用: - PAGE UP:移到上一个月。 - PAGE DOWN:移到下一个月。 - CTRL+PAGE UP:移到上一年。 - CTRL+PAGE DOWN:移到下一年。 - CTRL+HOME:移到当前月份。如果日期选择器是关闭的则打开。 - CTRL+LEFT:移到上一天。 - CTRL+RIGHT:移到下一天。 - CTRL+UP:移到上一周。 - CTRL+DOWN:移到下一周。 - ENTER:选择聚焦的日期。 - CTRL+END:关闭日期选择器,并清除日期。 - ESCAPE:关闭日期选择器,不做任何选择。 ### 实用功能 #### $.datepicker.setDefaults( settings ) 为所有的日期选择器改变默认设置。 使用 [`option()`](#method-option) 方法来改变个别实例的设置。 **Code examples:** 设置所有的日期选择器在获得焦点时或点击图标时打开。 ``` $.datepicker.setDefaults({ showOn: "both", buttonImageOnly: true, buttonImage: "calendar.gif", buttonText: "Calendar" }); ``` 设置所有的日期选择器都有法语文本。 ``` $.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); ``` #### $.datepicker.formatDate( format, date, settings ) 格式化日期为一个带有指定格式的字符串值。 格式可以是下列组合: - d - 一月中的第几天(没有前导零) - dd - 一月中的第几天(两位数) - o - 一年中的第几天(没有前导零) - oo - 一年中的第几天(三位数) - D - 天的短名称 - DD - 天的长名称 - m - 一年中的第几月(没有前导零) - mm - 一年中的第几月(两位数) - M - 月的短名称 - MM - 月的长名称 - y - 年(两位数) - yy - 年(四位数) - @ - Unix 时间戳(ms since 01/01/1970) - ! - Windows 钟表(100ns since 01/01/0001) - '...' - 文本 - '' - 单引号 - 其他 - 文本 也有一些 `$.datepicker` 预定义的标准日期格式: - ATOM - 'yy-mm-dd' (与 RFC 3339/ISO 8601 相同) - COOKIE - 'D, dd M yy' - ISO\_8601 - 'yy-mm-dd' - RFC\_822 - 'D, d M y' (参照 RFC 822) - RFC\_850 - 'DD, dd-M-y' (参照 RFC 850) - RFC\_1036 - 'D, d M y' (参照 RFC 1036) - RFC\_1123 - 'D, d M yy' (参照 RFC 1123) - RFC\_2822 - 'D, d M yy' (参照 RFC 2822) - RSS - 'D, d M y' (与 RFC 822 相同) - TICKS - '!' - TIMESTAMP - '@' - W3C - 'yy-mm-dd' (与 ISO 8601 相同) **Code examples:** 以 ISO 格式显示日期。产生 "2007-01-26"。 ``` $.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) ); ``` 以扩展法语格式显示日期。产生 "Samedi, Juillet 14, 2007"。 ``` $.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), { dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames }); ``` #### $.datepicker.parseDate( format, value, settings ) 从一个指定格式的字符串值中提取日期。 格式可以是下列组合: - d - 一月中的第几天(没有前导零) - dd - 一月中的第几天(两位数) - o - 一年中的第几天(没有前导零) - oo - 一年中的第几天(三位数) - D - 星期几的短名称 - DD - 星期几的长名称 - m - 一年中的第几月(没有前导零) - mm - 一年中的第几月(两位数) - M - 月的短名称 - MM - 月的长名称 - y - 年(两位数) - yy - 年(四位数) - @ - Unix 时间戳(ms since 01/01/1970) - ! - Windows 钟表(100ns since 01/01/0001) - '...' - 文本 - '' - 单引号 - 其他 - 文本 一些可能被抛出的异常: - 'Invalid arguments' - 如果格式或值为空则抛出此异常。 - 'Missing number at position nn' - 如果格式显示一个未找到的数值则抛出此异常。 - 'Unknown name at position nn' - 如果格式显示一个未找到的星期几名称或月份名称则抛出此异常。 - 'Unexpected literal at position nn' - 如果格式显示一个未找到的文本值则抛出此异常。 - 'Invalid date' - 如果日期无效则抛出此异常,比如 '31/02/2007'。 **Code examples:** 提取一个 ISO 格式的日期。 ``` $.datepicker.parseDate( "yy-mm-dd", "2007-01-26" ); ``` 提取一个扩展法语格式的日期。 ``` $.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", { shortYearCuroff: 20, dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames }); ``` #### $.datepicker.iso8601Week( date ) 确定一个给定的日期在一年中的第几周:1 到 53。 该函数使用 ISO 8601 定义一周:一周从星期一开始,每一年的第一周包含 1 月 4 日。这意味着上一年至多有三天可能包含在当年的第一周中,当年至多有三天可能包含在上一年的最后一周中。 该函数是 [`calculateWeek`](#option-calculateWeek) 选项的默认实现。 **Code examples:** 查找日期在一年中的第几周。 ``` $.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) ); ``` #### $.datepicker.noWeekends 设置如 beforeShowDay 函数,防止选择周末。 我们可以在 [`beforeShowDay`](#option-beforeShowDay) 选项中提供 `noWeekends()` 函数,用来计算所有工作日,提供一个 `true`/`false` 值的数组,用来指示日期是否可选择。 **Code examples:** 设置 DatePicker,让周末不可选。 ``` $( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends }); ``` ### 局限 日期选择器提供了迎合不同的语言和日期格式本地化内容的支持。每个本地化包含在名称后追加语言代码的文件中,例如法语为 `jquery.ui.datepicker-fr.js`。所需的本地化文件需要包含在主要的日期选择器代码后面。每个本地化文件添加了它自己的设置到可用的本地化集合中,所有实例自动应用这些设置为默认设置。 `$.datepicker.regional` 属性保存了一个本地化数组,以语言代码作为前置,默认前置为 `""`,表示英语。每个条目是一个带有下列属性的对象:`closeText` 、 `prevText` 、 `nextText` 、 `currentText` 、 `monthNames` 、 `monthNamesShort` 、 `dayNames` 、 `dayNamesShort` 、 `dayNamesMin` 、 `weekHeader` 、 `dateFormat` 、 `firstDay` 、 `isRTL` 、 `showMonthAfterYear` 和 `yearSuffix`。 您可以通过下面代码恢复默认的本地化: `$.datepicker.setDefaults( $.datepicker.regional[ "" ] );` 您可以通过下面代码覆盖一个特定地点的日期选择器: `$( selector ).datepicker( $.datepicker.regional[ "fr" ] );` ### 主题 日期选择器部件(Datepicker Widget)使用 [jQuery UI CSS 框架](theming/css-framework) 来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式,则可以使用下面的 CSS class 名称: - `ui-datepicker`:日期选择器的外层容器。如果日期选择器是内联的,该元素会另外带有一个 `ui-datepicker-inline` class。如果设置了 [`isRTL`](#option-isRTL) 选项,该元素会另外带有一个 `ui-datepicker-rtl` class。 - `ui-datepicker-header`:日期选择器的头部容器。 - `ui-datepicker-prev`:用于选择上一月的控件。 - `ui-datepicker-next`:用于选择下一月的控件。 - `ui-datepicker-title`:日期选择器包含月和年的标题容器。 - `ui-datepicker-month`:月的文本显示,如果设置了 [`changeMonth`](#option-changeMonth) 选项则显示 `<select>` 元素。 - `ui-datepicker-year`:年的文本显示,如果设置了 [`changeYear`](#option-changeYear) 选项则显示 `<select>` 元素。 - `ui-datepicker-calendar`:包含日历的表格。 - `ui-datepicker-week-end`:周末的单元格。: Cells containing weekend days. - `ui-datepicker-other-month`:发生在某月但不是当前月天数的单元格。 - `ui-datepicker-unselectable`:用户不可选择的单元格。 - `ui-datepicker-current-day`:已选中日期的单元格。 - `ui-datepicker-today`:当天日期的单元格。 - `ui-datepicker-buttonpane`:当设置 [`showButtonPanel`](#option-showButtonPanel) 选项时使用按钮面板(buttonpane)。 - `ui-datepicker-current`:用于选择当天日期的按钮。 如果 [`numberOfMonths`](#option-numberOfMonths) 选项用于显示多个月份,则使用一些额外的 class: - `ui-datepicker-multi`:一个多月份日期选择器的最外层容器。该元素会根据要显示的月份个数另外带有 `ui-datepicker-multi-2`、`ui-datepicker-multi-3` 或 `ui-datepicker-multi-4` class 名称。 - `ui-datepicker-group`:分组内单独的选择器。该元素会根据它在分组中的位置另外带有 `ui-datepicker-group-first`、`ui-datepicker-group-middle` 或 `ui-datepicker-group-last` class 名称。 ### 依赖 - [UI 核心(UI Core)](category/ui-core) - [特效核心(Effects Core)](category/effects-core)(可选的;当与 [`showAnim`](#option-showAnim) 选项一起使用时) ### 其他注意事项: - 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。 - 该部件以编程方式操作元素的值,因此当元素的值改变时不会触发原生的 `change` 事件。 - 不支持在 `<input type="date">` 上创建日期选择器,因为会造成与本地选择器的 UI 冲突。 ## Options ### altField**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [jQuery](http://api.jquery.com/Types/#jQuery) or [Element](http://api.jquery.com/Types/#Element) **Default:**`""`一个input元素 ,使用选择器 选择的另一个地方更新datepicker选择的日期. 使用 [`altFormat`](#option-altFormat) 指定的这一区域设置如下改变格式的日期(使用input最直观). 如果没有代替的区域则使用空白.**Code examples:** 初始化带有指定 `altField` 选项的 datepicker: ``` $( ".selector" ).datepicker({ altField: "#actualDate" }); ``` 在初始化后,获取或设置`altField` 选项: ``` // getter var altField = $( ".selector" ).datepicker( "option", "altField" ); // setter $( ".selector" ).datepicker( "option", "altField", "#actualDate" ); ``` ### altFormat**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`""`[`dateFormat`](#option-dateFormat) 被 [`altField`](#option-altField) 项所使用。 它的目的是允许选择一种日期格式显示给用户以供选择,而实际的格式则是来自后台。 对于可能的格式的完整列表,请参阅 [`formatDate`](#utility-formatDate) 函数。**Code examples:** 初始化带有指定 `altFormat` 选项的 datepicker: ``` $( ".selector" ).datepicker({ altFormat: "yy-mm-dd" }); ``` 在初始化后,获取或设置`altFormat` 选项: ``` // getter var altFormat = $( ".selector" ).datepicker( "option", "altFormat" ); // setter $( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" ); ``` ### appendText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`""`显示每个日期字段后面的文本, 例如,以显示所需的格式。**Code examples:** 初始化带有指定 `appendText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ appendText: "(yyyy-mm-dd)" }); ``` 在初始化后,获取或设置`appendText` 选项: ``` // getter var appendText = $( ".selector" ).datepicker( "option", "appendText" ); // setter $( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" ); ``` ### autoSize**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`如果设置为`true`,将自动调整输入字段,以适应日期在当前的[`dateFormat`](#option-dateFormat)。**Code examples:** 初始化带有指定 `autoSize` 选项的 datepicker: ``` $( ".selector" ).datepicker({ autoSize: true }); ``` 在初始化后,获取或设置`autoSize` 选项: ``` // getter var autoSize = $( ".selector" ).datepicker( "option", "autoSize" ); // setter $( ".selector" ).datepicker( "option", "autoSize", true ); ``` ### beforeShow**Type:** [Function](http://api.jquery.com/Types/#Function)( [Element](http://api.jquery.com/Types/#Element) input, [Object](http://api.jquery.com/Types/#Object) inst ) **Default:**`null`一个函数,它接受一个输入字段和当前的datepicker实例, 并返回一个选项对象来修改datepicker。只在datepicker显示之前被调用。 ### beforeShowDay**Type:** [Function](http://api.jquery.com/Types/#Function)( [Date](http://api.jquery.com/Types/#Date) date ) **Default:**`null`一个函数,它接受一个日期作为参数 并且 必须返回一个数组: - `[0]`: `true`/`false` 表示这个日期是否可选 - `[1]`: 一个 CSS class 名 添加到日期的单元格 或默认描述为`""`。 - `[2]`:一个可选的日期弹出提示 该函数在datepicker 每一天显示之前被调用。 ### buttonImage**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`""`当[`showOn`](#option-showOn)选项设置为`"button"`或`"both"`时, 用于显示datepicker的图片url地址。 如果设置,[`buttonText`](#option-buttonText)选项将成为`alt`值,而不是直接显示。**Code examples:** 初始化带有指定 `buttonImage` 选项的 datepicker: ``` $( ".selector" ).datepicker({ buttonImage: "/images/datepicker.gif" }); ``` 在初始化后,获取或设置`buttonImage` 选项: ``` // getter var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" ); // setter $( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" ); ``` ### buttonImageOnly**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`无论是按钮 图像 必须自行提供 而不是 里面一个按钮元素。 此选项仅当[`buttonImage`](#option-buttonImage)选项也被设置时才起作用。**Code examples:** 初始化带有指定 `buttonImageOnly` 选项的 datepicker: ``` $( ".selector" ).datepicker({ buttonImageOnly: true }); ``` 在初始化后,获取或设置`buttonImageOnly` 选项: ``` // getter var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" ); // setter $( ".selector" ).datepicker( "option", "buttonImageOnly", true ); ``` ### buttonText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"..."`显示在触发按钮上的文本。和[`showOn`](#option-showOn)设置为 `"button"` 或 `"both"`时结合使用。**Code examples:** 初始化带有指定 `buttonText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ buttonText: "Choose" }); ``` 在初始化后,获取或设置`buttonText` 选项: ``` // getter var buttonText = $( ".selector" ).datepicker( "option", "buttonText" ); // setter $( ".selector" ).datepicker( "option", "buttonText", "Choose" ); ``` ### calculateWeek**Type:** [Function](http://api.jquery.com/Types/#Function)() **Default:**`jQuery.datepicker.iso8601Week`一个函数来计算当前周是一年中的第几周。 默认实现使用ISO8601的定义:的定义执行: 每周从周一开始;每年的第一个星期包含这年的第一个星期四。愚人码头注:这意味着今年的第一周中可能会包含去年的3天,并且今年的3天可能会被包含进去年的最后一周中。**Code examples:** 初始化带有指定 `calculateWeek` 选项的 datepicker: ``` $( ".selector" ).datepicker({ calculateWeek: myWeekCalc }); ``` 在初始化后,获取或设置`calculateWeek` 选项: ``` // getter var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" ); // setter $( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc ); ``` ### changeMonth**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`允许你将月份修改为一个下拉菜单。 你可以将参数设置为false来禁用此功能,也就是显示为文字。**Code examples:** 初始化带有指定 `changeMonth` 选项的 datepicker: ``` $( ".selector" ).datepicker({ changeMonth: true }); ``` 在初始化后,获取或设置`changeMonth` 选项: ``` // getter var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" ); // setter $( ".selector" ).datepicker( "option", "changeMonth", true ); ``` ### changeYear**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`允许你将年份修改为一个下拉菜单。 你可以将参数设置为false来禁用此功能,也就是显示为文字。使用[`yearRange`](#option-yearRange)选项来控制哪些年是可供选择。**Code examples:** 初始化带有指定 `changeYear` 选项的 datepicker: ``` $( ".selector" ).datepicker({ changeYear: true }); ``` 在初始化后,获取或设置`changeYear` 选项: ``` // getter var changeYear = $( ".selector" ).datepicker( "option", "changeYear" ); // setter $( ".selector" ).datepicker( "option", "changeYear", true ); ``` ### closeText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"Done"`关闭连接显示的文字。使用[`showButtonPanel`](#option-showButtonPanel)选项以显示此按钮。**Code examples:** 初始化带有指定 `closeText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ closeText: "Close" }); ``` 在初始化后,获取或设置`closeText` 选项: ``` // getter var closeText = $( ".selector" ).datepicker( "option", "closeText" ); // setter $( ".selector" ).datepicker( "option", "closeText", "Close" ); ``` ### constrainInput**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`true`当值为`true`时,在输入栏的输入被限制为当前的日期格式[`dateFormat`](#option-dateFormat)选项允许的字符。**Code examples:** 初始化带有指定 `constrainInput` 选项的 datepicker: ``` $( ".selector" ).datepicker({ constrainInput: false }); ``` 在初始化后,获取或设置`constrainInput` 选项: ``` // getter var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" ); // setter $( ".selector" ).datepicker( "option", "constrainInput", false ); ``` ### currentText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"Today"`当前日期链接以文本形式显示。使用 [`showButtonPanel`](#option-showButtonPanel)选项以显示此按钮。**Code examples:** 初始化带有指定 `currentText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ currentText: "Now" }); ``` 在初始化后,获取或设置`currentText` 选项: ``` // getter var currentText = $( ".selector" ).datepicker( "option", "currentText" ); // setter $( ".selector" ).datepicker( "option", "currentText", "Now" ); ``` ### dateFormat**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"mm/dd/yy"`描述和显示日期的格式。 对于可能的格式的完整列表,请参阅`[`formatDate`](#utility-formatDate)`函数。**Code examples:** 初始化带有指定 `dateFormat` 选项的 datepicker: ``` $( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" }); ``` 在初始化后,获取或设置`dateFormat` 选项: ``` // getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); // setter $( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); ``` ### dayNames**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:**`[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]`日期长的名字的列表,从星期日(Sunday)开始,依照 [`dateFormat`](#option-dateFormat)的设置进行使用。**Code examples:** 初始化带有指定 `dayNames` 选项的 datepicker: ``` $( ".selector" ).datepicker({ dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] }); ``` 在初始化后,获取或设置`dayNames` 选项: ``` // getter var dayNames = $( ".selector" ).datepicker( "option", "dayNames" ); // setter $( ".selector" ).datepicker( "option", "dayNames", [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] ); ``` ### dayNamesMin**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:**`[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]`日期最小化简称的列表, 从周日开始(Sunday), 用在datepicker每列的头部.。**Code examples:** 初始化带有指定 `dayNamesMin` 选项的 datepicker: ``` $( ".selector" ).datepicker({ dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] }); ``` 在初始化后,获取或设置`dayNamesMin` 选项: ``` // getter var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" ); // setter $( ".selector" ).datepicker( "option", "dayNamesMin", [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] ); ``` ### dayNamesShort**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:**`[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]`日期名称的简写的列表, 从周日开始(Sunday), 依照[`dateFormat`](#option-dateFormat)的设置使用。**Code examples:** 初始化带有指定 `dayNamesShort` 选项的 datepicker: ``` $( ".selector" ).datepicker({ dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] }); ``` 在初始化后,获取或设置`dayNamesShort` 选项: ``` // getter var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" ); // setter $( ".selector" ).datepicker( "option", "dayNamesShort", [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] ); ``` ### defaultDate**Type:** [Date](http://api.jquery.com/Types/#Date) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:**`null`如果该字段为空时设置第一次打开时显示的日期。 通过Date对象或字符串在当前 [`dateFormat`](#option-dateFormat)中指定任何一个实际的日期, 或者一个和今天对比的数字(例如 +7) 或者一个连续的字符串值('y' 表示年, 'm' 表示月, 'w'表示周, 'd'表示日, 例如. '+1m +7d'), 或者为空则是今天.**支持多个类型:** - **Date**: 一个包含默认日期的date对象。 - **Number**: 一个和今天对比的数字。例如 `2` 表示从今天开始的第二天,(愚人码头注:即:后天), `-1` 表示昨天。 - **String**: 一个由[`dateFormat`](#option-dateFormat)选项定义格式的字符串 , 或相对日期。 相对日期必须包含值和期间对; 有效期间为:`"y"`表示几年, `"m"` 表示几月, `"w"`表示几周,和`"d"`表示几天。 例如, `"+1m +7d"`表示从今天开始的一个月加七天。 **Code examples:** 初始化带有指定 `defaultDate` 选项的 datepicker: ``` $( ".selector" ).datepicker({ defaultDate: +7 }); ``` 在初始化后,获取或设置`defaultDate` 选项: ``` // getter var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" ); // setter $( ".selector" ).datepicker( "option", "defaultDate", +7 ); ``` ### duration**Type:** or [String](http://api.jquery.com/Types/#String) **Default:**`"normal"`设置datepicker展开动画的显示时间,可以是一个毫秒值, 也可以使用以下的三种字符值来表示("slow", "normal", "fast"), 或者为 ''则马上显示。**Code examples:** 初始化带有指定 `duration` 选项的 datepicker: ``` $( ".selector" ).datepicker({ duration: "slow" }); ``` 在初始化后,获取或设置`duration` 选项: ``` // getter var duration = $( ".selector" ).datepicker( "option", "duration" ); // setter $( ".selector" ).datepicker( "option", "duration", "slow" ); ``` ### firstDay**Type:** [Integer](http://api.jquery.com/Types/#Integer) **Default:**`0`设置一周中的第一天:周日是 `0`, 周一是 `1`, 以此类推。**Code examples:** 初始化带有指定 `firstDay` 选项的 datepicker: ``` $( ".selector" ).datepicker({ firstDay: 1 }); ``` 在初始化后,获取或设置`firstDay` 选项: ``` // getter var firstDay = $( ".selector" ).datepicker( "option", "firstDay" ); // setter $( ".selector" ).datepicker( "option", "firstDay", 1 ); ``` ### gotoCurrent**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`如果设置为`true`, 当前日的链接将移动到当前选中的日期,而不是今天。**Code examples:** 初始化带有指定 `gotoCurrent` 选项的 datepicker: ``` $( ".selector" ).datepicker({ gotoCurrent: true }); ``` 在初始化后,获取或设置`gotoCurrent` 选项: ``` // getter var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" ); // setter $( ".selector" ).datepicker( "option", "gotoCurrent", true ); ``` ### hideIfNoPrevNext**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`通常当前一个和下一个链接被禁用时不适用 (参看 [`minDate`](#option-minDate) 和 [`maxDate`](#option-maxDate)). 你可以通过设置此属性为`true`完全的隐藏他们.**Code examples:** 初始化带有指定 `hideIfNoPrevNext` 选项的 datepicker: ``` $( ".selector" ).datepicker({ hideIfNoPrevNext: true }); ``` 在初始化后,获取或设置`hideIfNoPrevNext` 选项: ``` // getter var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" ); // setter $( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true ); ``` ### isRTL**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`当前语言描述是否为自右向左的。(愚人码头注:例如阿拉伯语)**Code examples:** 初始化带有指定 `isRTL` 选项的 datepicker: ``` $( ".selector" ).datepicker({ isRTL: true }); ``` 在初始化后,获取或设置`isRTL` 选项: ``` // getter var isRTL = $( ".selector" ).datepicker( "option", "isRTL" ); // setter $( ".selector" ).datepicker( "option", "isRTL", true ); ``` ### maxDate**Type:** [Date](http://api.jquery.com/Types/#Date) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:**`null`最大的可选日期。当设置为`null`时,没有上限。**支持多个类型:** - **Date**: 一个包含默认日期的date对象。 - **Number**: 一个和今天对比的数字。例如 `2` 表示从今天开始的第二天,(愚人码头注:即:后天), `-1` 表示昨天。 - **String**: 一个由[`dateFormat`](#option-dateFormat)选项定义格式的字符串 , 或相对日期。 相对日期必须包含值和期间对; 有效期间为:`"y"`表示几年, `"m"` 表示几月, `"w"`表示几周,和`"d"`表示几天。 例如, `"+1m +7d"`表示从今天开始的一个月加七天。 **Code examples:** 初始化带有指定 `maxDate` 选项的 datepicker: ``` $( ".selector" ).datepicker({ maxDate: "+1m +1w" }); ``` 在初始化后,获取或设置`maxDate` 选项: ``` // getter var maxDate = $( ".selector" ).datepicker( "option", "maxDate" ); // setter $( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" ); ``` ### minDate**Type:** [Date](http://api.jquery.com/Types/#Date) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:**`null`最小的可选日期。当设置为`null`时,没有下限。**支持多个类型:** - **Date**: 一个包含默认日期的date对象。 - **Number**: 一个和今天对比的数字。例如 `2` 表示从今天开始的第二天,(愚人码头注:即:后天), `-1` 表示昨天。 - **String**: 一个由[`dateFormat`](#option-dateFormat)选项定义格式的字符串 , 或相对日期。 相对日期必须包含值和期间对; 有效期间为:`"y"`表示几年, `"m"` 表示几月, `"w"`表示几周,和`"d"`表示几天。 例如, `"+1m +7d"`表示从今天开始的一个月加七天。 **Code examples:** 初始化带有指定 `minDate` 选项的 datepicker: ``` $( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) }); ``` 在初始化后,获取或设置`minDate` 选项: ``` // getter var minDate = $( ".selector" ).datepicker( "option", "minDate" ); // setter $( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) ); ``` ### monthNames**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:**`[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]`月份的完全名称列表,依照 [`dateFormat`](#option-dateFormat)的设置进行使用。**Code examples:** 初始化带有指定 `monthNames` 选项的 datepicker: ``` $( ".selector" ).datepicker({ monthNames: [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ] }); ``` 在初始化后,获取或设置`monthNames` 选项: ``` // getter var monthNames = $( ".selector" ).datepicker( "option", "monthNames" ); // setter $( ".selector" ).datepicker( "option", "monthNames", [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ] ); ``` ### monthNamesShort**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:**`[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]`月份简写名称的列表,依照 [`dateFormat`](#option-dateFormat)的设置进行使用。**Code examples:** 初始化带有指定 `monthNamesShort` 选项的 datepicker: ``` $( ".selector" ).datepicker({ monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] }); ``` 在初始化后,获取或设置`monthNamesShort` 选项: ``` // getter var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" ); // setter $( ".selector" ).datepicker( "option", "monthNamesShort", [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] ); ``` ### navigationAsDateFormat**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`确定是[`prevText`](#option-prevText) 和 [`nextText`](#option-nextText)选项是否应该被解析为`[`formatDate`](#utility-formatDate)`函数的日期,让他们能够显示目标的月份名称.**Code examples:** 初始化带有指定 `navigationAsDateFormat` 选项的 datepicker: ``` $( ".selector" ).datepicker({ navigationAsDateFormat: true }); ``` 在初始化后,获取或设置`navigationAsDateFormat` 选项: ``` // getter var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" ); // setter $( ".selector" ).datepicker( "option", "navigationAsDateFormat", true ); ``` ### nextText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"Next"`下个月链接显示的文字 。使用标准ThemeRoller样式, 这个值被替换为一个图标。**Code examples:** 初始化带有指定 `nextText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ nextText: "Later" }); ``` 在初始化后,获取或设置`nextText` 选项: ``` // getter var nextText = $( ".selector" ).datepicker( "option", "nextText" ); // setter $( ".selector" ).datepicker( "option", "nextText", "Later" ); ``` ### numberOfMonths**Type:** [Number](http://api.jquery.com/Types/#Number) or [Array](http://api.jquery.com/Types/#Array) **Default:**`1`设置一次显示几个月.**支持多个类型:** - **Number**: 一行显示的月份数 - **Array**: 一个数组定义的显示行数和列数。 **Code examples:** 初始化带有指定 `numberOfMonths` 选项的 datepicker: ``` $( ".selector" ).datepicker({ numberOfMonths: [ 2, 3 ] }); ``` 在初始化后,获取或设置`numberOfMonths` 选项: ``` // getter var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" ); // setter $( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] ); ``` ### onChangeMonthYear**Type:** [Function](http://api.jquery.com/Types/#Function)( [Integer](http://api.jquery.com/Types/#Integer) year, [Integer](http://api.jquery.com/Types/#Integer) month, [Object](http://api.jquery.com/Types/#Object) inst ) **Default:**`null`当datepicker移动到一个新的月份 并/或 年份时调用。 该函数接收选定的年份, 月份(1-12), 和datepicker实例作为参数。 `this`指向相关联的输入域。 ### onClose**Type:** [Function](http://api.jquery.com/Types/#Function)( [String](http://api.jquery.com/Types/#String) dateText, [Object](http://api.jquery.com/Types/#Object) inst ) **Default:**`null`当datepicker关闭时调用,确定一个日期是否被选中。 该函数接收所选日期的文本(`""`如果没有)和datepicker实例作为参数。 `this`指向相关联的输入域。 ### onSelect**Type:** [Function](http://api.jquery.com/Types/#Function)( [String](http://api.jquery.com/Types/#String) dateText, [Object](http://api.jquery.com/Types/#Object) inst ) **Default:**`null`当选择datepicker调用。 该函数接收所选日期的文本和datepicker实例作为参数。`this`指向相关联的输入域。 ### prevText**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"Prev"`上个月链接显示的文字 。使用标准ThemeRoller样式, 这个值被替换为一个图标。**Code examples:** 初始化带有指定 `prevText` 选项的 datepicker: ``` $( ".selector" ).datepicker({ prevText: "Earlier" }); ``` 在初始化后,获取或设置`prevText` 选项: ``` // getter var prevText = $( ".selector" ).datepicker( "option", "prevText" ); // setter $( ".selector" ).datepicker( "option", "prevText", "Earlier" ); ``` ### selectOtherMonths**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`显示在当前月份的之前或之后的日期是否可以被选择。(愚人码头注:比如2014年4月1日是周二,如果[`showOtherMonths`](#option-showOtherMonths)选项设置为`true`,那么2014年3月31日,2014年3月30日会以灰色的形式显示在4月份的面板上,这个选项表示在4月份的面板上是否可以选择2014年3月31日,2014年3月30日这两个日期。5月也是一样的。) 这选项仅适用于 如果[`showOtherMonths`](#option-showOtherMonths)选项设置为`true`的时候。**Code examples:** 初始化带有指定 `selectOtherMonths` 选项的 datepicker: ``` $( ".selector" ).datepicker({ selectOtherMonths: true }); ``` 在初始化后,获取或设置`selectOtherMonths` 选项: ``` // getter var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" ); // setter $( ".selector" ).datepicker( "option", "selectOtherMonths", true ); ``` ### shortYearCutoff**Type:** [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) **Default:**`"+10"`设置一个定义日期所处实际的截断年份值(与[`dateFormat`](#option-dateFormat)中的 'y'共同使用). 如果是一个数值 (0-99)那么将直接使用这些值. 如果提供的是一个字符串值那么它将被转换为数值添加到当前年. 一旦截断年开始计算, 任何输入的日期的年份小于或者等于它的话将被判定为在本世纪,大于他的将被判定为在上个世纪.**支持多个类型:** - **Number**: 一个 `0` 到 `99`的值表示截断年份值 - **String**: 从本年份开始的相对年数,例如, `"+3"` or `"-5"`. **Code examples:** 初始化带有指定 `shortYearCutoff` 选项的 datepicker: ``` $( ".selector" ).datepicker({ shortYearCutoff: 50 }); ``` 在初始化后,获取或设置`shortYearCutoff` 选项: ``` // getter var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" ); // setter $( ".selector" ).datepicker( "option", "shortYearCutoff", 50 ); ``` ### showAnim**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"show"`设置显示/隐藏datepicker的动画名称. 使用 `"show"` (默认), `"slideDown"`, `"fadeIn"`, 或其他任何[jQuery UI effects](category/effects)的显示/隐藏效果。 设置为空字符串可以禁用动画,即直接显示或者隐藏。**Code examples:** 初始化带有指定 `showAnim` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showAnim: "fold" }); ``` 在初始化后,获取或设置`showAnim` 选项: ``` // getter var showAnim = $( ".selector" ).datepicker( "option", "showAnim" ); // setter $( ".selector" ).datepicker( "option", "showAnim", "fold" ); ``` ### showButtonPanel**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`是否显示日历下方的按钮面板。 按钮面板包含两个按钮, 一个今天按钮链接到当前日期, 和一个完成按钮关闭datepicker。 该按钮的文本可以使用[`currentText`](#option-currentText) 和 [`closeText`](#option-closeText)选项分别进行定制。**Code examples:** 初始化带有指定 `showButtonPanel` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showButtonPanel: true }); ``` 在初始化后,获取或设置`showButtonPanel` 选项: ``` // getter var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" ); // setter $( ".selector" ).datepicker( "option", "showButtonPanel", true ); ``` ### showCurrentAtPos**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:**`0`通过[`numberOfMonths`](#option-numberOfMonths)选项设置多月份显示的情况下,当前月份显示的位置。(愚人码头注:自顶部/左边开始第n位,以0开始计数。)**Code examples:** 初始化带有指定 `showCurrentAtPos` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showCurrentAtPos: 3 }); ``` 在初始化后,获取或设置`showCurrentAtPos` 选项: ``` // getter var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" ); // setter $( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 ); ``` ### showMonthAfterYear**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`是否在面板的头部年份后面显示月份。**Code examples:** 初始化带有指定 `showMonthAfterYear` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showMonthAfterYear: true }); ``` 在初始化后,获取或设置`showMonthAfterYear` 选项: ``` // getter var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" ); // setter $( ".selector" ).datepicker( "option", "showMonthAfterYear", true ); ``` ### showOn**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"focus"`设置触发datepicker自动出现的事件名称,是focus (`"focus"`)还是clicked (`"button"`)或者任何事件(`"both"`)。**Code examples:** 初始化带有指定 `showOn` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showOn: "both" }); ``` 在初始化后,获取或设置`showOn` 选项: ``` // getter var showOn = $( ".selector" ).datepicker( "option", "showOn" ); // setter $( ".selector" ).datepicker( "option", "showOn", "both" ); ``` ### showOptions**Type:** [Object](http://api.jquery.com/Types/#Object) **Default:**`{}`如果想[`showAnim`](#option-showAnim)选项来使用jQuery UI effects动画效果, 你可以为动画提供一些额外的设置.**Code examples:** 初始化带有指定 `showOptions` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showOptions: { direction: "up" } }); ``` 在初始化后,获取或设置`showOptions` 选项: ``` // getter var showOptions = $( ".selector" ).datepicker( "option", "showOptions" ); // setter $( ".selector" ).datepicker( "option", "showOptions", { direction: "up" } ); ``` ### showOtherMonths**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`是否在当前月份面板显示上、下两个月的一些日期数(不可选)。 想要让这些日期可选,请使用[`selectOtherMonths`](#option-selectOtherMonths)选项。**Code examples:** 初始化带有指定 `showOtherMonths` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showOtherMonths: true }); ``` 在初始化后,获取或设置`showOtherMonths` 选项: ``` // getter var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" ); // setter $( ".selector" ).datepicker( "option", "showOtherMonths", true ); ``` ### showWeek**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:**`false`如果为`true`,面板将增加一列,显示一年中的哪一周。 该[`calculateWeek`](#option-calculateWeek)选项决定一年中的哪一周是如何计算的。 您可以改变 [`firstDay`](#option-firstDay)选项。**Code examples:** 初始化带有指定 `showWeek` 选项的 datepicker: ``` $( ".selector" ).datepicker({ showWeek: true }); ``` 在初始化后,获取或设置`showWeek` 选项: ``` // getter var showWeek = $( ".selector" ).datepicker( "option", "showWeek" ); // setter $( ".selector" ).datepicker( "option", "showWeek", true ); ``` ### stepMonths**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:**`1`当点击上/下一月链接时,一次翻几个月。**Code examples:** 初始化带有指定 `stepMonths` 选项的 datepicker: ``` $( ".selector" ).datepicker({ stepMonths: 3 }); ``` 在初始化后,获取或设置`stepMonths` 选项: ``` // getter var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" ); // setter $( ".selector" ).datepicker( "option", "stepMonths", 3 ); ``` ### weekHeader**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"Wk"`本年度哪一周 列的标题显示文本。 使用[`showWeek`](#option-showWeek)选项以显示此列。**Code examples:** 初始化带有指定 `weekHeader` 选项的 datepicker: ``` $( ".selector" ).datepicker({ weekHeader: "W" }); ``` 在初始化后,获取或设置`weekHeader` 选项: ``` // getter var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" ); // setter $( ".selector" ).datepicker( "option", "weekHeader", "W" ); ``` ### yearRange**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`"c-10:c+10"`控制年份的下拉列表中显示的年份数量,可以是相对当前年(-nn:+nn),相对于选择年份(-nn:+nn),也可以是绝对值(`"nnnn:nnnn"`),或这些格式的组合 (`"nnnn:-nn"`)。 请注意,此选项仅影响下拉列表中的显示, 使用[`minDate`](#option-minDate) 和/或 [`maxDate`](#option-maxDate)选项限制哪些日期可以选择。**Code examples:** 初始化带有指定 `yearRange` 选项的 datepicker: ``` $( ".selector" ).datepicker({ yearRange: "2002:2012" }); ``` 在初始化后,获取或设置`yearRange` 选项: ``` // getter var yearRange = $( ".selector" ).datepicker( "option", "yearRange" ); // setter $( ".selector" ).datepicker( "option", "yearRange", "2002:2012" ); ``` ### yearSuffix**Type:** [String](http://api.jquery.com/Types/#String) **Default:**`""`显示在月份头部中年份后面的文本。**Code examples:** 初始化带有指定 `yearSuffix` 选项的 datepicker: ``` $( ".selector" ).datepicker({ yearSuffix: "CE" }); ``` 在初始化后,获取或设置`yearSuffix` 选项: ``` // getter var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" ); // setter $( ".selector" ).datepicker( "option", "yearSuffix", "CE" ); ``` ## Methods ### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 完全移除datepicker功能. 这将使元素返回到之前的初始化状态. - 该方法不接受任何参数。 **Code examples:** 调用 destroy 方法: ``` $( ".selector" ).datepicker( "destroy" ); ``` ### dialog( date \[, onSelect \] \[, settings \] \[, pos \] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 在一个"dialog"中打开一个datepicker。 - **date**Type: [String](http://api.jquery.com/Types/#String) or [Date](http://api.jquery.com/Types/#Date)初始化的日期。 - **onSelect**Type: [Function](http://api.jquery.com/Types/#Function)()当一个日期被选中时的回调函数. 这个函数接收日期文本 和datepicker实例作为参数。 - **settings**Type: [Options](http://api.jquery.com/Types/#Options)新的datepicker的选项。 - **pos**Type: [Number\[2\] or MouseEvent](http://api.jquery.com/Types/#Number%5B2%5D%20or%20MouseEvent)dialog对话框的top/left的`[x, y]`坐标,或者一个鼠标事件`MouseEvent`的坐标。如果不提供此参数dialog将显示在屏幕正中。 **Code examples:** 调用 dialog 方法: ``` $( ".selector" ).datepicker( "dialog", "10/12/2012" ); ``` ### getDate()Returns: [Date](http://api.jquery.com/Types/#Date) 返回一个datepicker中当前日期, 如果没有日期被选中的话那么返回`null`。 - 该方法不接受任何参数。 **Code examples:** 调用 getDate 方法: ``` var currentDate = $( ".selector" ).datepicker( "getDate" ); ``` ### hide()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 关闭先前打开的date picker。 - 该方法不接受任何参数。 **Code examples:** 调用 hide 方法: ``` $( ".selector" ).datepicker( "hide" ); ``` ### isDisabled()Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 确定一个datepicker是否已禁用. - 该方法不接受任何参数。 **Code examples:** 调用 isDisabled 方法: ``` var isDisabled = $( ".selector" ).datepicker( "isDisabled" ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 获取当前与指定的 `optionName` 关联的值。 - **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项的名称。 **Code examples:** 调用该方法: ``` var isDisabled = $( ".selector" ).datepicker( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 获取一个包含键/值对的对象,键/值对表示当前 datepicker 选项哈希。 - 该方法不接受任何参数。 **Code examples:** 调用该方法: ``` var options = $( ".selector" ).datepicker( "option" ); ``` ### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 设置与指定的 `optionName` 关联的 datepicker 选项的值。 - **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置的选项的名称。 - **value**Type: [Object](http://api.jquery.com/Types/#Object)要为选项设置的值。 **Code examples:** 调用该方法: ``` $( ".selector" ).datepicker( "option", "disabled", true ); ``` ### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 为 datepicker 设置一个或多个选项。 - **options**Type: [Object](http://api.jquery.com/Types/#Object)要设置的 option-value 对。 **Code examples:** 调用该方法: ``` $( ".selector" ).datepicker( "option", { disabled: true } ); ``` ### refresh()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 在作出一些外部修改后,重绘日期选择器。 - 该方法不接受任何参数。 **Code examples:** 调用 refresh 方法: ``` $( ".selector" ).datepicker( "refresh" ); ``` ### setDate( date )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 为datepicker设置日期。 新的日期可能是一个`Date`对象或当前[date format](#option-dateFormat) 的字符串(例如,`"01/26/2009"`), 一个从今天开始的天数(例如,`+7`) 或值和周期的字符串 `"y"` 表示年数, `"m"` 表示月份数, `"w"` 表示周数, `"d"`表示天数,例如, `"+1m +7d"`), 或者为`null`来清除选定的日期。 - **date**Type: [String](http://api.jquery.com/Types/#String) or [Date](http://api.jquery.com/Types/#Date)新的日期。 **Code examples:** 调用 setDate 方法: ``` $( ".selector" ).datepicker( "setDate", "10/12/2012" ); ``` ### show()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 显示日期datepicker插件。 如果datepicker被绑定到input元素, 要显示datepicker的input元素必须是可见的。 - 该方法不接受任何参数。 **Code examples:** 调用 show 方法: ``` $( ".selector" ).datepicker( "show" ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一个包含 datepicker 的 `jQuery` 对象。 - 该方法不接受任何参数。 **Code examples:** 调用 widget 方法: ``` var widget = $( ".selector" ).datepicker( "widget" ); ``` ## Example: #### 一个简单的 jQuery UI Datepicker. ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>datepicker demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="datepicker"></div> <script> $( "#datepicker" ).datepicker(); </script> </body> </html> ```