Datepicker Widget | jQuery UI API 中文文档 | jQuery API中文文档(适用jQuery 1.0

Datepicker Widgetversion added: 1.0

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

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函数。

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函数的日期，让他们能够显示目标的月份名称.

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。

date

Type: String or Date

初始化的日期。
onSelect

Type: Function()

当一个日期被选中时的回调函数. 这个函数接收日期文本和datepicker实例作为参数。
settings

Type: Options

新的datepicker的选项。
pos

Type: Number[2] or MouseEvent

dialog对话框的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 关联的值。

optionName

Type: 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 选项的值。

optionName

Type: String

要设置的选项的名称。
value

Type: Object

要为选项设置的值。

Code examples:

调用该方法：

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

option( options )Returns: jQuery (plugin only)

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

options

Type: 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来清除选定的日期。

date

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

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>

jQuery UI API中文文档

Datepicker Widgetversion added: 1.0

Options

Methods

Events

键盘交互

实用功能

$.datepicker.setDefaults( settings )

$.datepicker.formatDate( format, date, settings )

$.datepicker.parseDate( format, value, settings )

$.datepicker.iso8601Week( date )

$.datepicker.noWeekends

局限

主题

依赖

其他注意事项：

altFieldType: Selector or jQuery or Element

altFormatType: String

appendTextType: String

autoSizeType: Boolean

beforeShowType: Function( Element input, Object inst )

beforeShowDayType: Function( Date date )

buttonImageType: String

buttonImageOnlyType: Boolean

buttonTextType: String

calculateWeekType: Function()

changeMonthType: Boolean

changeYearType: Boolean

closeTextType: String

constrainInputType: Boolean

currentTextType: String

dateFormatType: String

dayNamesType: Array

dayNamesMinType: Array

dayNamesShortType: Array

defaultDateType: Date or Number or String

durationType: or String

firstDayType: Integer

gotoCurrentType: Boolean

hideIfNoPrevNextType: Boolean

isRTLType: Boolean

maxDateType: Date or Number or String

minDateType: Date or Number or String

monthNamesType: Array

monthNamesShortType: Array

navigationAsDateFormatType: Boolean

nextTextType: String

numberOfMonthsType: Number or Array

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

onCloseType: Function( String dateText, Object inst )

onSelectType: Function( String dateText, Object inst )

prevTextType: String

selectOtherMonthsType: Boolean

shortYearCutoffType: Number or String

showAnimType: String

showButtonPanelType: Boolean

showCurrentAtPosType: Number

showMonthAfterYearType: Boolean

showOnType: String

showOptionsType: Object

showOtherMonthsType: Boolean

showWeekType: Boolean

stepMonthsType: Number

weekHeaderType: String

yearRangeType: String

yearSuffixType: String

destroy()Returns: jQuery (plugin only)

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

getDate()Returns: Date

hide()Returns: jQuery (plugin only)

isDisabled()Returns: Boolean

option( optionName )Returns: Object

option()Returns: PlainObject

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

option( options )Returns: jQuery (plugin only)

refresh()Returns: jQuery (plugin only)

setDate( date )Returns: jQuery (plugin only)

show()Returns: jQuery (plugin only)

widget()Returns: jQuery

一个简单的 jQuery UI Datepicker.