Datepicker Widget | jQuery UI API 中文文档 1.10

Categories: Widgets

version added: 1.0

Description: 从弹出框或内联日历选择一个日期。

QuickNavExamples

Options

altField
altFormat
appendText
autoSize
beforeShow
beforeShowDay
buttonImage
buttonImageOnly
buttonText
calculateWeek
changeMonth
changeYear
closeText
constrainInput
currentText
dateFormat
dayNames
dayNamesMin
dayNamesShort
defaultDate
duration
firstDay
gotoCurrent
hideIfNoPrevNext
isRTL
maxDate
minDate
monthNames
monthNamesShort
navigationAsDateFormat
nextText
numberOfMonths
onChangeMonthYear
onClose
onSelect
prevText
selectOtherMonths
shortYearCutoff
showAnim
showButtonPanel
showCurrentAtPos
showMonthAfterYear
showOn
showOptions
showOtherMonths
showWeek
stepMonths
weekHeader
yearRange
yearSuffix

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() 方法来改变个别实例的设置。

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 选项的默认实现。

Code examples:

查找日期在一年中的第几周。

$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );

$.datepicker.noWeekends

设置如 beforeShowDay 函数，防止选择周末。

我们可以在 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 框架来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式，则可以使用下面的 CSS class 名称：

ui-datepicker：日期选择器的外层容器。如果日期选择器是内联的，该元素会另外带有一个 ui-datepicker-inline class。如果设置了 isRTL 选项，该元素会另外带有一个 ui-datepicker-rtl class。
- ui-datepicker-header：日期选择器的头部容器。
  - ui-datepicker-prev：用于选择上一月的控件。
  - ui-datepicker-next：用于选择下一月的控件。
  - ui-datepicker-title：日期选择器包含月和年的标题容器。
    - ui-datepicker-month：月的文本显示，如果设置了 changeMonth 选项则显示 <select> 元素。
    - ui-datepicker-year：年的文本显示，如果设置了 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 选项时使用按钮面板（buttonpane）。
  - ui-datepicker-current：用于选择当天日期的按钮。

如果 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）
特效核心（Effects Core）（可选的；当与 showAnim 选项一起使用时）

其他注意事项：

该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
该部件以编程方式操作元素的值，因此当元素的值改变时不会触发原生的 change 事件。
不支持在 <input type="date"> 上创建日期选择器，因为会造成与本地选择器的 UI 冲突。

Options

altFieldType: Selector or jQuery or Element

Default: ""一个input元素，使用选择器选择的另一个地方更新datepicker选择的日期. 使用 altFormat 指定的这一区域设置如下改变格式的日期(使用input最直观). 如果没有代替的区域则使用空白.Code examples:

初始化带有指定 altField 选项的 datepicker：

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

在初始化后，获取或设置altField 选项：

// getter
var altField = $( ".selector" ).datepicker( "option", "altField" );

// setter
$( ".selector" ).datepicker( "option", "altField", "#actualDate" );

altFormatType: String

Default: ""dateFormat 被 altField 项所使用。它的目的是允许选择一种日期格式显示给用户以供选择，而实际的格式则是来自后台。对于可能的格式的完整列表，请参阅 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" );

appendTextType: 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)" );

autoSizeType: Boolean

Default: false如果设置为true，将自动调整输入字段，以适应日期在当前的dateFormat。Code examples:

初始化带有指定 autoSize 选项的 datepicker：

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

在初始化后，获取或设置autoSize 选项：

// getter
var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );

// setter
$( ".selector" ).datepicker( "option", "autoSize", true );

beforeShowType: Function( Element input, Object inst )

Default: null一个函数，它接受一个输入字段和当前的datepicker实例，并返回一个选项对象来修改datepicker。只在datepicker显示之前被调用。

beforeShowDayType: Function( Date date )

Default: null一个函数，它接受一个日期作为参数并且必须返回一个数组：

[0]: true/false 表示这个日期是否可选
[1]: 一个 CSS class 名添加到日期的单元格或默认描述为""。
[2]:一个可选的日期弹出提示

该函数在datepicker 每一天显示之前被调用。

buttonImageType: String

Default: ""当showOn选项设置为"button"或"both"时，用于显示datepicker的图片url地址。如果设置，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" );

buttonImageOnlyType: Boolean

Default: false无论是按钮图像必须自行提供而不是里面一个按钮元素。此选项仅当buttonImage选项也被设置时才起作用。Code examples:

初始化带有指定 buttonImageOnly 选项的 datepicker：

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

在初始化后，获取或设置buttonImageOnly 选项：

// getter
var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );

// setter
$( ".selector" ).datepicker( "option", "buttonImageOnly", true );

buttonTextType: String

Default: "..."显示在触发按钮上的文本。和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" );

calculateWeekType: 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 );

changeMonthType: 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 );

changeYearType: Boolean

Default: false允许你将年份修改为一个下拉菜单。你可以将参数设置为false来禁用此功能，也就是显示为文字。使用yearRange选项来控制哪些年是可供选择。Code examples:

初始化带有指定 changeYear 选项的 datepicker：

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

在初始化后，获取或设置changeYear 选项：

// getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );

// setter
$( ".selector" ).datepicker( "option", "changeYear", true );

closeTextType: String

Default: "Done"关闭连接显示的文字。使用showButtonPanel选项以显示此按钮。Code examples:

初始化带有指定 closeText 选项的 datepicker：

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

在初始化后，获取或设置closeText 选项：

// getter
var closeText = $( ".selector" ).datepicker( "option", "closeText" );

// setter
$( ".selector" ).datepicker( "option", "closeText", "Close" );

constrainInputType: Boolean

Default: true当值为true时，在输入栏的输入被限制为当前的日期格式dateFormat选项允许的字符。Code examples:

初始化带有指定 constrainInput 选项的 datepicker：

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

在初始化后，获取或设置constrainInput 选项：

// getter
var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );

// setter
$( ".selector" ).datepicker( "option", "constrainInput", false );

currentTextType: String

Default: "Today"当前日期链接以文本形式显示。使用 showButtonPanel选项以显示此按钮。Code examples:

初始化带有指定 currentText 选项的 datepicker：

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

在初始化后，获取或设置currentText 选项：

// getter
var currentText = $( ".selector" ).datepicker( "option", "currentText" );

// setter
$( ".selector" ).datepicker( "option", "currentText", "Now" );

dateFormatType: 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" );

dayNamesType: Array

Default: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]日期长的名字的列表，从星期日(Sunday)开始，依照 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" ] );

dayNamesMinType: 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" ] );

dayNamesShortType: Array

Default: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]日期名称的简写的列表, 从周日开始(Sunday), 依照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" ] );

defaultDateType: Date or Number or String

Default: null如果该字段为空时设置第一次打开时显示的日期。通过Date对象或字符串在当前 dateFormat中指定任何一个实际的日期，或者一个和今天对比的数字（例如 +7）或者一个连续的字符串值('y' 表示年, 'm' 表示月, 'w'表示周, 'd'表示日, 例如. '+1m +7d'), 或者为空则是今天.支持多个类型：

Date: 一个包含默认日期的date对象。
Number: 一个和今天对比的数字。例如 2 表示从今天开始的第二天，（愚人码头注：即：后天）， -1 表示昨天。
String: 一个由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 );

durationType: or 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" );

firstDayType: 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 );

gotoCurrentType: 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 );

hideIfNoPrevNextType: Boolean

Default: false通常当前一个和下一个链接被禁用时不适用 (参看 minDate 和 maxDate). 你可以通过设置此属性为true完全的隐藏他们.Code examples:

初始化带有指定 hideIfNoPrevNext 选项的 datepicker：

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

在初始化后，获取或设置hideIfNoPrevNext 选项：

// getter
var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );

// setter
$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );

isRTLType: 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 );

maxDateType: Date or Number or String

Default: null最大的可选日期。当设置为null时，没有上限。支持多个类型：

Date: 一个包含默认日期的date对象。
Number: 一个和今天对比的数字。例如 2 表示从今天开始的第二天，（愚人码头注：即：后天）， -1 表示昨天。
String: 一个由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" );

minDateType: Date or Number or String

Default: null最小的可选日期。当设置为null时，没有下限。支持多个类型：

Date: 一个包含默认日期的date对象。
Number: 一个和今天对比的数字。例如 2 表示从今天开始的第二天，（愚人码头注：即：后天）， -1 表示昨天。
String: 一个由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) );

monthNamesType: Array

Default: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]月份的完全名称列表，依照 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" ] );

monthNamesShortType: Array

Default: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]月份简写名称的列表，依照 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" ] );

navigationAsDateFormatType: Boolean

Default: false确定是prevText 和 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 );

nextTextType: 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" );

numberOfMonthsType: Number or 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 ] );

onChangeMonthYearType: Function( Integer year, Integer month, Object inst )

Default: null当datepicker移动到一个新的月份并/或年份时调用。该函数接收选定的年份，月份（1-12），和datepicker实例作为参数。 this指向相关联的输入域。

onCloseType: Function( String dateText, Object inst )

Default: null当datepicker关闭时调用，确定一个日期是否被选中。该函数接收所选日期的文本（""如果没有）和datepicker实例作为参数。 this指向相关联的输入域。

onSelectType: Function( String dateText, Object inst )

Default: null当选择datepicker调用。该函数接收所选日期的文本和datepicker实例作为参数。this指向相关联的输入域。

prevTextType: 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" );

selectOtherMonthsType: Boolean

Default: false显示在当前月份的之前或之后的日期是否可以被选择。（愚人码头注：比如2014年4月1日是周二，如果showOtherMonths选项设置为true，那么2014年3月31日，2014年3月30日会以灰色的形式显示在4月份的面板上，这个选项表示在4月份的面板上是否可以选择2014年3月31日，2014年3月30日这两个日期。5月也是一样的。）这选项仅适用于如果showOtherMonths选项设置为true的时候。Code examples:

初始化带有指定 selectOtherMonths 选项的 datepicker：

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

在初始化后，获取或设置selectOtherMonths 选项：

// getter
var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );

// setter
$( ".selector" ).datepicker( "option", "selectOtherMonths", true );

shortYearCutoffType: Number or String

Default: "+10"设置一个定义日期所处实际的截断年份值(与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 );

showAnimType: String

Default: "show"设置显示/隐藏datepicker的动画名称. 使用 "show" (默认), "slideDown"， "fadeIn", 或其他任何jQuery UI effects的显示/隐藏效果。设置为空字符串可以禁用动画，即直接显示或者隐藏。Code examples:

初始化带有指定 showAnim 选项的 datepicker：

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

在初始化后，获取或设置showAnim 选项：

// getter
var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );

// setter
$( ".selector" ).datepicker( "option", "showAnim", "fold" );

showButtonPanelType: Boolean

Default: false是否显示日历下方的按钮面板。按钮面板包含两个按钮，一个今天按钮链接到当前日期，和一个完成按钮关闭datepicker。该按钮的文本可以使用currentText 和 closeText选项分别进行定制。Code examples:

初始化带有指定 showButtonPanel 选项的 datepicker：

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

在初始化后，获取或设置showButtonPanel 选项：

// getter
var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );

// setter
$( ".selector" ).datepicker( "option", "showButtonPanel", true );

showCurrentAtPosType: Number

Default: 0通过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 );

showMonthAfterYearType: 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 );

showOnType: 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" );

showOptionsType: Object

Default: {}如果想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" } );

showOtherMonthsType: Boolean

Default: false是否在当前月份面板显示上、下两个月的一些日期数（不可选）。想要让这些日期可选，请使用selectOtherMonths选项。Code examples:

初始化带有指定 showOtherMonths 选项的 datepicker：

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

在初始化后，获取或设置showOtherMonths 选项：

// getter
var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );

// setter
$( ".selector" ).datepicker( "option", "showOtherMonths", true );

showWeekType: Boolean

Default: false如果为true，面板将增加一列，显示一年中的哪一周。该calculateWeek选项决定一年中的哪一周是如何计算的。您可以改变 firstDay选项。Code examples:

初始化带有指定 showWeek 选项的 datepicker：

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

在初始化后，获取或设置showWeek 选项：

// getter
var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );

// setter
$( ".selector" ).datepicker( "option", "showWeek", true );

stepMonthsType: 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 );

weekHeaderType: String

Default: "Wk"本年度哪一周列的标题显示文本。使用showWeek选项以显示此列。Code examples:

初始化带有指定 weekHeader 选项的 datepicker：

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

在初始化后，获取或设置weekHeader 选项：

// getter
var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );

// setter
$( ".selector" ).datepicker( "option", "weekHeader", "W" );

yearRangeType: String

Default: "c-10:c+10"控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，相对于选择年份(-nn:+nn)，也可以是绝对值("nnnn:nnnn")，或这些格式的组合 ("nnnn:-nn")。请注意，此选项仅影响下拉列表中的显示，使用minDate 和/或 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" );

yearSuffixType: 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 (plugin only)

完全移除datepicker功能. 这将使元素返回到之前的初始化状态.

该方法不接受任何参数。

Code examples:

调用 destroy 方法：

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

dialog( date [, onSelect ] [, settings ] [, pos ] )Returns: jQuery (plugin only)

在一个"dialog"中打开一个datepicker。

dateType: String or Date初始化的日期。
onSelectType: Function()当一个日期被选中时的回调函数. 这个函数接收日期文本和datepicker实例作为参数。
settingsType: Options新的datepicker的选项。
posType: Number[2] or MouseEventdialog对话框的top/left的[x, y]坐标，或者一个鼠标事件MouseEvent的坐标。如果不提供此参数dialog将显示在屏幕正中。

Code examples:

调用 dialog 方法：

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

getDate()Returns: Date

返回一个datepicker中当前日期, 如果没有日期被选中的话那么返回null。

该方法不接受任何参数。

Code examples:

调用 getDate 方法：

var currentDate = $( ".selector" ).datepicker( "getDate" );

hide()Returns: jQuery (plugin only)

关闭先前打开的date picker。

该方法不接受任何参数。

Code examples:

调用 hide 方法：

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

isDisabled()Returns: Boolean

确定一个datepicker是否已禁用.

该方法不接受任何参数。

Code examples:

调用 isDisabled 方法：

var isDisabled = $( ".selector" ).datepicker( "isDisabled" );

option( optionName )Returns: Object

获取当前与指定的 optionName 关联的值。

optionNameType: String要获取值的选项的名称。

Code examples:

调用该方法：

var isDisabled = $( ".selector" ).datepicker( "option", "disabled" );

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 datepicker 选项哈希。

该方法不接受任何参数。

Code examples:

调用该方法：

var options = $( ".selector" ).datepicker( "option" );

option( optionName, value )Returns: jQuery (plugin only)

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

optionNameType: String要设置的选项的名称。
valueType: Object要为选项设置的值。

Code examples:

调用该方法：

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

option( options )Returns: jQuery (plugin only)

为 datepicker 设置一个或多个选项。

optionsType: Object要设置的 option-value 对。

Code examples:

调用该方法：

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

refresh()Returns: jQuery (plugin only)

在作出一些外部修改后，重绘日期选择器。

该方法不接受任何参数。

Code examples:

调用 refresh 方法：

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

setDate( date )Returns: jQuery (plugin only)

为datepicker设置日期。新的日期可能是一个Date对象或当前date format 的字符串（例如，"01/26/2009"），一个从今天开始的天数（例如，+7）或值和周期的字符串 "y" 表示年数, "m" 表示月份数, "w" 表示周数, "d"表示天数,例如， "+1m +7d")，或者为null来清除选定的日期。

dateType: String or Date新的日期。

Code examples:

调用 setDate 方法：

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

show()Returns: jQuery (plugin only)

显示日期datepicker插件。如果datepicker被绑定到input元素，要显示datepicker的input元素必须是可见的。

该方法不接受任何参数。

Code examples:

调用 show 方法：

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

widget()Returns: 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>