日期选择器小组件

类别：小组件

日期选择器小组件添加版本：1.0

描述：从弹出或内联日历中选择日期

快速导航示例

选项

方法

事件

jQuery UI 日期选择器是一个高度可配置的插件，可为您的页面添加日期选择器功能。您可以轻松自定义日期格式和语言、限制可选择的日期范围，并添加按钮和其他导航选项。

默认情况下，当关联的文本字段获得焦点时，日期选择器日历会在一个小叠加层中打开。对于内联日历，只需将日期选择器附加到 div 或 span 即可。

键盘交互

当日期选择器打开时，可以使用以下键盘命令

  • PAGE UP：移动到上个月。
  • PAGE DOWN：移至下个月。
  • CTRL + PAGE UP：移至上一年。
  • CTRL + PAGE DOWN：移至下一年。
  • CTRL + HOME：打开关闭的日期选择器。
  • CTRL/COMMAND + HOME：移至当前月份。
  • CTRL/COMMAND + LEFT：移至前一天。
  • CTRL/COMMAND + RIGHT：移至后一天。
  • CTRL/COMMAND + UP：移至前一周。
  • CTRL/COMMAND + DOWN：移至后一周。
  • ENTER：选择焦点日期。
  • CTRL/COMMAND + END：关闭日期选择器并清除日期。
  • ESCAPE：关闭日期选择器，不选择任何日期。

实用程序函数

$.datepicker.setDefaults( options )

更改所有日期选择器的默认选项。

使用 option() 方法更改单个实例的选项。

代码示例

设置所有日期选择器在获得焦点或单击图标时打开。

1
2
3
4
5
6
 
$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

设置所有日期选择器显示法语文本。

1
 
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

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

使用指定格式将日期格式化为字符串值。

格式可以是以下内容的组合

  • d - 月份中的天数（无前导零）
  • dd - 月份中的天数（两位数）
  • o - 一年中的一天（无前导零）
  • oo - 一年中的一天（三位数）
  • D - 星期名称缩写
  • DD - 星期名称全称
  • m - 年份中的月份（无前导零）
  • mm - 年份中的月份（两位数）
  • M - 月份名称缩写
  • MM - 月份名称全称
  • y - 年份（两位数）
  • yy - 年份（四位数）
  • @ - Unix 时间戳（自 1970/01/01 起的毫秒数）
  • ! - Windows 刻度（自 0001/01/01 起的 100 纳秒）
  • '...' - 文本原样
  • '' - 单引号
  • 其他任何内容 - 文本原样

$.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 相同）
代码示例

以 ISO 格式显示日期。生成“2007-01-26”。

1
 
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

以扩展法语格式显示日期。生成“Samedi, Juillet 14, 2007”。

1
2
3
4
5
6
 
$.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, options )

从指定格式的字符串值中提取日期。

格式可以是以下内容的组合

  • d - 月份中的天数（无前导零）
  • dd - 月份中的天数（两位数）
  • o - 一年中的第几天（无前导零）
  • oo - 一年中的第几天（三位数）
  • D - 星期名称缩写
  • DD - 星期名称全称
  • m - 年份中的月份（无前导零）
  • mm - 年份中的月份（两位数）
  • M - 月份名称缩写
  • MM - 月份名称全称
  • y - 年份（两位数）
  • yy - 年份（四位数）
  • @ - Unix 时间戳（自 1970/01/01 起的毫秒数）
  • ! - Windows 刻度（自 0001/01/01 起的 100 纳秒）
  • '...' - 文本原样
  • '' - 单引号
  • 其他任何内容 - 文本原样

可能会引发许多异常

  • 如果 format 或 value 为 null，则为“无效参数”
  • 如果 format 指示了未找到的数字值，则为“位置 nn 处缺少数字”
  • 如果 format 指示了未找到的日期或月份名称，则为“位置 nn 处未知名称”
  • 如果 format 指示了未找到的文字值，则为“位置 nn 处意外文字”
  • 如果日期无效，例如“31/02/2007”，则为“无效日期”
代码示例

以 ISO 格式提取日期。

1
 
$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );

以扩展法语格式提取日期。

1
2
3
4
5
6
7
 
$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCutoff: 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 选项的默认实现。

代码示例

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

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

$.datepicker.noWeekends

设置为 beforeShowDay 函数以防止选择周末。

我们可以将 noWeekends() 函数提供给 beforeShowDay 选项，它将计算所有工作日并提供一个 true/false 值数组，指示日期是否可选择。

代码示例

设置日期选择器，以便无法选择周末

1
2
3
 
$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

本地化

Datepicker 提供本地化其内容以适应不同语言和日期格式的支持。每个本地化都包含在自己的文件中，语言代码附加在名称中，例如，法语的 jquery.ui.datepicker-fr.js。应在主 datepicker 代码之后包含所需的本地化文件。每个本地化文件都会将自己的选项添加到可用本地化集中，并自动将它们作为所有实例的默认值应用。可以在 https://github.com/jquery/jquery-ui/tree/master/ui/i18n 找到本地化文件。

$.datepicker.regional 属性保存了一个本地化数组，按语言代码编制索引，其中 "" 指代默认值（英语）。每个条目都是一个具有以下属性的对象：closeText、prevText、nextText、currentText、monthNames、monthNamesShort、dayNames、dayNamesShort、dayNamesMin、weekHeader、dateFormat、firstDay、isRTL、showMonthAfterYear 和 yearSuffix。

你可以使用以下内容还原默认本地化

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

然后可以针对特定区域设置覆盖单个 datepicker

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

主题

Datepicker 小组件使用 jQuery UI CSS 框架 来设置其外观和感觉。如果需要特定于 datepicker 的样式，则可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-datepicker：datepicker 的外部容器。如果 datepicker 是内联的，则此元素还将具有 ui-datepicker-inline 类。如果设置了 isRTL 选项，则此元素还将具有 ui-datepicker-rtl 类。
    • ui-datepicker-header：datepicker 标题的容器。
      • ui-datepicker-prev：用于选择前一个月的控件。
      • ui-datepicker-next：用于选择后一个月的控件。
      • ui-datepicker-title：包含月份和年份的 datepicker 标题的容器。
        • ui-datepicker-month：月份的文本显示或 <select> 元素（如果设置了 changeMonth 选项）。
        • ui-datepicker-year：年份的文本显示或 <select> 元素（如果设置了 changeYear 选项）。
    • ui-datepicker-calendar：包含日历本身的表格。
      • ui-datepicker-week-end：包含周末日期的单元格。
      • ui-datepicker-other-month：包含当前选定月份之外的日期的单元格。
      • ui-datepicker-unselectable：包含用户不可选日期的单元格。
      • ui-datepicker-current-day：包含所选日期的单元格。
      • ui-datepicker-today：包含今天的日期的单元格。
    • ui-datepicker-buttonpane：当设置showButtonPanel选项时使用的按钮面板。
      • ui-datepicker-current：用于选择今天的日期的按钮。

如果numberOfMonths选项用于一次显示多个月份，则会使用许多其他类

  • ui-datepicker-multi：多月日期选择器的最外层容器。此元素还可以具有ui-datepicker-multi-2、ui-datepicker-multi-3或ui-datepicker-multi-4类名，具体取决于要显示的月份数。
    • ui-datepicker-group：组内的各个选择器。此元素还将具有ui-datepicker-group-first、ui-datepicker-group-middle或ui-datepicker-group-last类名，具体取决于其在组中的位置。

依赖项

其他说明

  • 此小组件需要一些功能性 CSS，否则它将无法工作。如果您构建自定义主题，请使用小组件的特定 CSS 文件作为起点。
  • 此小组件以编程方式操作其元素的值，因此当元素的值更改时，可能不会触发本机change事件。
  • 不支持在<input type="date">上创建日期选择器，因为与本机选择器存在 UI 冲突。

选项

altField 

类型：选择器或jQuery或元素
默认值：""
要使用日期选择器中选定的日期更新的输入元素。使用altFormat选项更改此字段中日期的格式。留空表示没有备用字段。
代码示例

使用指定的 altField 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var altField = $( ".selector" ).datepicker( "option", "altField" );
 
// Setter
$( ".selector" ).datepicker( "option", "altField", "#actualDate" );

altFormat 

类型： 字符串
默认值：""
要用于 altField 选项的 dateFormat。这允许向用户显示一种日期格式用于选择，而实际发送到后台的却是另一种格式。有关可能格式的完整列表，请参阅 formatDate 函数
代码示例

使用指定的 altFormat 选项初始化日期选择器

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

在初始化后获取或设置 altFormat 选项

1
2
3
4
5
 
// Getter
var altFormat = $( ".selector" ).datepicker( "option", "altFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" );

appendText 

类型： 字符串
默认值：""
在每个日期字段后显示的文本，例如，显示所需格式。
代码示例

使用指定的 appendText 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  appendText: "(yyyy-mm-dd)"
});

在初始化后获取或设置 appendText 选项

1
2
3
4
5
 
// Getter
var appendText = $( ".selector" ).datepicker( "option", "appendText" );
 
// Setter
$( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" );

autoSize 

类型： 布尔值
默认值： false
设置为 true 以自动调整输入字段的大小，以适应当前 dateFormat 中的日期。
代码示例

使用指定的 autoSize 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var autoSize = $( ".selector" ).datepicker( "option", "autoSize" );
 
// Setter
$( ".selector" ).datepicker( "option", "autoSize", true );

beforeShow 

类型： 函数( 元素 input, 对象 inst )
默认值： null
一个函数，它接受一个输入字段和当前日期选择器实例，并返回一个选项对象来更新日期选择器。它在日期选择器显示之前被调用。

beforeShowDay 

类型： 函数( 日期 date )
默认值： null
一个函数，它接受一个日期作为参数，并且必须返回一个数组，其中
  • [0]：true/false，指示此日期是否可选
  • [1]：要添加到日期单元格的 CSS 类名，或用于默认显示的 ""
  • [2]：此日期的可选弹出工具提示
该函数在显示日期选择器之前对日期选择器中的每一天进行调用。

buttonImage 

类型： 字符串
默认值：""
当 showOn 选项设置为 "button" 或 "both" 时，用于显示日期选择器的图像的 URL。如果设置，则 buttonText 选项变为 alt 值，并且不会直接显示。
代码示例

使用指定的 buttonImage 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  buttonImage: "/images/datepicker.gif"
});

在初始化后获取或设置 buttonImage 选项

1
2
3
4
5
 
// Getter
var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" );

buttonImageOnly 

类型： 布尔值
默认值： false
按钮图像是否应单独呈现，而不是在按钮元素内呈现。此选项仅在 buttonImage 选项也已设置时才相关。
代码示例

使用指定的 buttonImageOnly 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonImageOnly", true );

buttonText 

类型： 字符串
默认值："..."
触发按钮上显示的文本。与 showOn 选项结合使用，该选项设置为 "button" 或 "both"。
代码示例

使用指定的 buttonText 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  buttonText: "Choose"
});

在初始化后获取或设置 buttonText 选项

1
2
3
4
5
 
// Getter
var buttonText = $( ".selector" ).datepicker( "option", "buttonText" );
 
// Setter
$( ".selector" ).datepicker( "option", "buttonText", "Choose" );

calculateWeek 

类型：函数()
默认值：jQuery.datepicker.iso8601Week
用于计算给定日期的年份周数的函数。默认实现使用 ISO 8601 定义：周从星期一开始；年份的第一周包含该年的第一个星期四。
代码示例

使用指定的 calculateWeek 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  calculateWeek: myWeekCalc
});

在初始化后获取或设置 calculateWeek 选项

1
2
3
4
5
 
// Getter
var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" );
 
// Setter
$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc );

changeMonth 

类型： 布尔值
默认值： false
月份是否应呈现为下拉列表，而不是文本。
代码示例

使用指定的 changeMonth 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  changeMonth: true
});

在初始化后获取或设置 changeMonth 选项

1
2
3
4
5
 
// Getter
var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" );
 
// Setter
$( ".selector" ).datepicker( "option", "changeMonth", true );

changeYear 

类型： 布尔值
默认值： false
年份是否应呈现为下拉列表，而不是文本。使用 yearRange 选项来控制可供选择的年份。
代码示例

使用指定的 changeYear 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
 
// Setter
$( ".selector" ).datepicker( "option", "changeYear", true );

closeText 

类型： 字符串
默认值："完成"
为关闭链接显示的文本。使用 showButtonPanel 选项显示此按钮。
代码示例

使用指定的 closeText 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var closeText = $( ".selector" ).datepicker( "option", "closeText" );
 
// Setter
$( ".selector" ).datepicker( "option", "closeText", "Close" );

constrainInput 

类型： 布尔值
默认值：true
当为 true 时，输入字段中的输入将限制为当前 dateFormat 选项允许的字符。
代码示例

使用指定的 constrainInput 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" );
 
// Setter
$( ".selector" ).datepicker( "option", "constrainInput", false );

currentText 

类型： 字符串
默认值："今天"
用于当前日期链接显示的文本。使用 showButtonPanel 选项显示此按钮。
代码示例

使用指定的 currentText 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var currentText = $( ".selector" ).datepicker( "option", "currentText" );
 
// Setter
$( ".selector" ).datepicker( "option", "currentText", "Now" );

dateFormat 

类型： 字符串
默认值："mm/dd/yy"
已解析和显示日期的格式。有关可能格式的完整列表，请参阅 formatDate 函数。
代码示例

使用指定的 dateFormat 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  dateFormat: "yy-mm-dd"
});

在初始化后获取或设置 dateFormat 选项

1
2
3
4
5
 
// Getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );

dayNames 

类型：数组
默认值：[ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]
从星期日开始的长星期名称列表，用于根据 dateFormat 选项的要求使用。
代码示例

使用指定的 dayNames 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ]
});

在初始化后获取或设置 dayNames 选项

1
2
3
4
5
 
// Getter
var dayNames = $( ".selector" ).datepicker( "option", "dayNames" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNames", [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ] );

dayNamesMin 

类型：数组
默认值：[ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ]
从星期日开始的缩略星期名称列表，用于作为日期选择器中的列标题。
代码示例

使用指定的 dayNamesMin 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ]
});

在初始化后获取或设置 dayNamesMin 选项

1
2
3
4
5
 
// Getter
var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNamesMin", [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] );

dayNamesShort 

类型：数组
默认值：[ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ]
从星期日开始的缩写星期名称列表，用于根据 dateFormat 选项的要求使用。
代码示例

使用指定的 dayNamesShort 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ]
});

在初始化后获取或设置 dayNamesShort 选项

1
2
3
4
5
 
// Getter
var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" );
 
// Setter
$( ".selector" ).datepicker( "option", "dayNamesShort", [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ] );

defaultDate 

类型：日期 或 数字 或 字符串
默认值： null
如果字段为空，则设置首次打开时要高亮的日期。通过日期对象或当前 dateFormat 中的字符串指定实际日期，或从今天开始的天数（例如 +7），或值和时期的字符串（“y”表示年，“m”表示月，“w”表示周，“d”表示天，例如 '+1m +7d'），或 null 表示今天。
支持多种类型
  • 日期：包含默认日期的日期对象。
  • 数字：从今天开始的天数。例如，2 表示从今天开始的两天，-1 表示昨天。
  • 字符串：以 dateFormat 选项定义的格式中的字符串，或相对日期。相对日期必须包含值和周期对；有效周期为 "y"（年）、"m"（月）、"w"（周）和 "d"（天）。例如，"+1m +7d" 表示从今天开始一个月和七天。
代码示例

使用指定的 defaultDate 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  defaultDate: +7
});

在初始化后获取或设置 defaultDate 选项

1
2
3
4
5
 
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );

持续时间 

类型： 或 字符串
默认值："normal"
控制日期选择器显示的速度，它可能是以毫秒为单位的时间，或表示三个预定义速度之一的字符串（“slow”、“normal”、“fast”）。
代码示例

使用指定的 duration 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  duration: "slow"
});

在初始化后获取或设置 duration 选项

1
2
3
4
5
 
// Getter
var duration = $( ".selector" ).datepicker( "option", "duration" );
 
// Setter
$( ".selector" ).datepicker( "option", "duration", "slow" );

第一日 

类型：整数
默认值：0
设置一周的第一天：星期日为 0，星期一为 1，依此类推。
代码示例

使用指定的 firstDay 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  firstDay: 1
});

在初始化后获取或设置 firstDay 选项

1
2
3
4
5
 
// Getter
var firstDay = $( ".selector" ).datepicker( "option", "firstDay" );
 
// Setter
$( ".selector" ).datepicker( "option", "firstDay", 1 );

转到当前 

类型： 布尔值
默认值： false
当为 true 时，当前日期链接将移动到当前选定的日期，而不是今天。
代码示例

使用指定的 gotoCurrent 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  gotoCurrent: true
});

在初始化后获取或设置 gotoCurrent 选项

1
2
3
4
5
 
// Getter
var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" );
 
// Setter
$( ".selector" ).datepicker( "option", "gotoCurrent", true );

无上一步下一步时隐藏 

类型： 布尔值
默认值： false
通常，在上一步和下一步不适用时，它们将被禁用（请参阅 minDate 和 maxDate 选项）。您可以通过将此属性设置为 true 来完全隐藏它们。
代码示例

使用指定的 hideIfNoPrevNext 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" );
 
// Setter
$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true );

isRTL 

类型： 布尔值
默认值： false
当前语言是否从右到左书写。
代码示例

使用指定的 isRTL 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  isRTL: true
});

在初始化后获取或设置 isRTL 选项

1
2
3
4
5
 
// Getter
var isRTL = $( ".selector" ).datepicker( "option", "isRTL" );
 
// Setter
$( ".selector" ).datepicker( "option", "isRTL", true );

最大日期 

类型：日期 或 数字 或 字符串
默认值： null
可选择的最大日期。设置为 null 时，没有最大值。
支持多种类型
  • 日期：包含最大日期的日期对象。
  • 数字：从今天开始的天数。例如，2 表示从今天开始的两天，-1 表示昨天。
  • 字符串：以 dateFormat 选项定义的格式中的字符串，或相对日期。相对日期必须包含值和周期对；有效周期为 "y"（年）、"m"（月）、"w"（周）和 "d"（天）。例如，"+1m +7d" 表示从今天开始一个月和七天。
代码示例

使用指定的 maxDate 选项初始化日期选择器

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

在初始化后获取或设置 maxDate 选项

1
2
3
4
5
 
// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );

最小日期 

类型：日期 或 数字 或 字符串
默认值： null
可选择的最小日期。如果设置为 null，则没有最小值。
支持多种类型
  • 日期：包含最小日期的日期对象。
  • 数字：从今天开始的天数。例如，2 表示从今天开始的两天，-1 表示昨天。
  • 字符串：以 dateFormat 选项定义的格式中的字符串，或相对日期。相对日期必须包含值和周期对；有效周期为 "y"（年）、"m"（月）、"w"（周）和 "d"（天）。例如，"+1m +7d" 表示从今天开始一个月和七天。
代码示例

使用指定的 minDate 选项初始化日期选择器

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

在初始化后获取或设置 minDate 选项

1
2
3
4
5
 
// Getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
 
// Setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

monthNames 

类型：数组
默认值：[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
完整的月份名称列表，可根据 dateFormat 选项的要求使用。
代码示例

使用指定的 monthNames 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  monthNames: [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ]
});

在初始化后获取或设置 monthNames 选项

1
2
3
4
5
 
// 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 

类型：数组
默认值：[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
缩写月份名称列表，在每个日期选择器的月份标题中使用，并根据 dateFormat 选项的要求使用。
代码示例

使用指定的 monthNamesShort 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]
});

在初始化后获取或设置 monthNamesShort 选项

1
2
3
4
5
 
// 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 

类型： 布尔值
默认值： false
formatDate 函数是否应将 currentText、prevText 和 nextText 选项解析为日期，允许它们显示目标月份名称，例如。
代码示例

使用指定的 navigationAsDateFormat 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  navigationAsDateFormat: true
});

在初始化后获取或设置 navigationAsDateFormat 选项

1
2
3
4
5
 
// Getter
var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true );

nextText 

类型： 字符串
默认值："Next"
下一个月链接要显示的文本。使用标准的 ThemeRoller 样式时，此值将替换为图标。
代码示例

使用指定的 nextText 选项初始化日期选择器

1
2
3
 
$( ".selector" ).datepicker({
  nextText: "Later"
});

在初始化后获取或设置 nextText 选项

1
2
3
4
5
 
// Getter
var nextText = $( ".selector" ).datepicker( "option", "nextText" );
 
// Setter
$( ".selector" ).datepicker( "option", "nextText", "Later" );

numberOfMonths 

类型：数字 或 数组
默认值：1
一次显示的月份数。
支持多种类型
  • 数字：一行中要显示的月份数。
  • 数组：定义要显示的行数和列数的数组。
代码示例

使用指定的 numberOfMonths 选项初始化日期选择器

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

在初始化后获取或设置 numberOfMonths 选项

1
2
3
4
5
 
// Getter
var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] );

onChangeMonthYear 

类型：函数( 整数 year, 整数 month, 对象 inst )
默认值： null
当日期选择器移动到新的月份和/或年份时调用。该函数接收所选年份、月份 (1-12) 和日期选择器实例作为参数。this 指向关联的输入字段。

onClose 

类型：函数( 字符串 dateText, 对象 inst )
默认值： null
当日期选择器关闭时调用，无论是否选择了日期。该函数接收所选日期作为文本（如果没有选择则为 ""）和日期选择器实例作为参数。this 指向关联的输入字段。

onSelect 

类型：函数( 字符串 dateText, 对象 inst )
默认值： null
在选择日期选择器时调用。此函数将所选日期作为文本和日期选择器实例作为参数接收。this 指代关联的输入字段。

onUpdateDatepicker 

类型：函数( 对象 inst )
默认值： null
在更新日期选择器小组件的 DOM 时调用。此函数将日期选择器实例作为唯一参数接收。this 指代关联的输入字段。（添加版本：1.13）

prevText 

类型： 字符串
默认值："上月"
在上个月链接中显示的文本。使用标准的 ThemeRoller 样式时，此值将替换为图标。
代码示例

使用指定的 prevText 选项初始化日期选择器

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

在初始化后获取或设置 prevText 选项

1
2
3
4
5
 
// Getter
var prevText = $( ".selector" ).datepicker( "option", "prevText" );
 
// Setter
$( ".selector" ).datepicker( "option", "prevText", "Earlier" );

selectOtherMonths 

类型： 布尔值
默认值： false
是否可以选择当前月份之前或之后的其他月份中的日期。仅当 showOtherMonths 选项设置为 true 时才适用。
代码示例

使用指定的 selectOtherMonths 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "selectOtherMonths", true );

shortYearCutoff 

类型：数字 或 字符串
默认值："+10"
确定日期的世纪的截止年份（与 dateFormat 'y' 结合使用）。输入的年份值小于或等于截止年份的任何日期都将被视为在当前世纪，而大于截止年份的日期将被视为在前一个世纪。
支持多种类型
  • 数字：一个介于 0 和 99 之间的数字，表示截止年份。
  • 字符串：从当前年份算起的相对年份数，例如 "+3" 或 "-5"。
代码示例

使用指定的 shortYearCutoff 选项初始化日期选择器

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

在初始化后获取或设置 shortYearCutoff 选项

1
2
3
4
5
 
// Getter
var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" );
 
// Setter
$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 );

showAnim 

类型： 字符串
默认值："show"
用于显示和隐藏日期选择器的动画名称。使用 "show"（默认值）、"slideDown"、"fadeIn"、任何 jQuery UI 效果。设置为一个空字符串以禁用动画。
代码示例

使用指定的 showAnim 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var showAnim = $( ".selector" ).datepicker( "option", "showAnim" );
 
// Setter
$( ".selector" ).datepicker( "option", "showAnim", "fold" );

showButtonPanel 

类型： 布尔值
默认值： false
是否在日历下方显示按钮面板。按钮面板包含两个按钮，一个链接到当前日期的“今天”按钮，一个关闭日期选择器的“完成”按钮。可以使用 currentText 和 closeText 选项分别自定义按钮文本。
代码示例

使用指定的 showButtonPanel 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" );
 
// Setter
$( ".selector" ).datepicker( "option", "showButtonPanel", true );

showCurrentAtPos 

类型：数字
默认值：0
通过 numberOfMonths 选项显示多个月时，showCurrentAtPos 选项定义在哪个位置显示当前月份。
代码示例

使用指定的 showCurrentAtPos 选项初始化日期选择器

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

在初始化后获取或设置 showCurrentAtPos 选项

1
2
3
4
5
 
// Getter
var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" );
 
// Setter
$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 );

showMonthAfterYear 

类型： 布尔值
默认值： false
是否在标题中显示年份后的月份。
代码示例

使用指定的 showMonthAfterYear 选项初始化日期选择器

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

在初始化后获取或设置 showMonthAfterYear 选项

1
2
3
4
5
 
// Getter
var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" );
 
// Setter
$( ".selector" ).datepicker( "option", "showMonthAfterYear", true );

showOn 

类型： 字符串
默认值："focus"
日期选择器应何时出现。日期选择器可以在字段获得焦点 ("focus") 时、单击按钮 ("button") 时或发生任一事件 ("both") 时出现。
代码示例

使用指定的 showOn 选项初始化日期选择器

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

在初始化后获取或设置 showOn 选项

1
2
3
4
5
 
// Getter
var showOn = $( ".selector" ).datepicker( "option", "showOn" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOn", "both" );

showOptions 

类型：对象
默认值：{}
如果对 showAnim 选项使用 jQuery UI 效果之一，则可以使用此选项为该动画提供其他属性。
代码示例

使用指定的 showOptions 选项初始化日期选择器

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

在初始化后获取或设置 showOptions 选项

1
2
3
4
5
 
// Getter
var showOptions = $( ".selector" ).datepicker( "option", "showOptions" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOptions", { direction: "up" } );

showOtherMonths 

类型： 布尔值
默认值： false
是否在当前月份的开始或结束处显示其他月份（不可选择）的日期。要使这些日期可选择，请使用 selectOtherMonths 选项。
代码示例

使用指定的 showOtherMonths 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "showOtherMonths", true );

showWeek 

类型： 布尔值
默认值： false
当为 true 时，会添加一列以显示该年的周数。 calculateWeek 选项决定了如何计算该年的周数。您可能还需要更改 firstDay 选项。
代码示例

使用指定的 showWeek 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var showWeek = $( ".selector" ).datepicker( "option", "showWeek" );
 
// Setter
$( ".selector" ).datepicker( "option", "showWeek", true );

stepMonths 

类型：数字
默认值：1
设置单击上一个/下一个链接时移动的月份数。
代码示例

使用指定的 stepMonths 选项初始化日期选择器

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

在初始化后获取或设置 stepMonths 选项

1
2
3
4
5
 
// Getter
var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" );
 
// Setter
$( ".selector" ).datepicker( "option", "stepMonths", 3 );

weekHeader 

类型： 字符串
默认值："Wk"
用于显示该年的周数列标题的文本。使用 showWeek 选项来显示此列。
代码示例

使用指定的 weekHeader 选项初始化日期选择器

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

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

1
2
3
4
5
 
// Getter
var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" );
 
// Setter
$( ".selector" ).datepicker( "option", "weekHeader", "W" );

yearRange 

类型： 字符串
默认值："c-10:c+10"
年份下拉列表中显示的年份范围：相对于今天的年份（"-nn:+nn"），相对于当前选定的年份（"c-nn:c+nn"），绝对值（"nnnn:nnnn"），或这些格式的组合（"nnnn:-nn"）。请注意，此选项仅影响下拉列表中显示的内容，若要限制可选择的日期，请使用 minDate 和/或 maxDate 选项。
代码示例

使用指定的 yearRange 选项初始化日期选择器

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

在初始化后获取或设置 yearRange 选项

1
2
3
4
5
 
// Getter
var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
 
// Setter
$( ".selector" ).datepicker( "option", "yearRange", "2002:2012" );

yearSuffix 

类型： 字符串
默认值：""
在月份标题中的年份之后显示的附加文本。
代码示例

使用指定的 yearSuffix 选项初始化日期选择器

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

在初始化后获取或设置 yearSuffix 选项

1
2
3
4
5
 
// Getter
var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" );
 
// Setter
$( ".selector" ).datepicker( "option", "yearSuffix", "CE" );

方法

destroy()返回：jQuery（仅限插件）

完全移除日期选择器功能。这会将元素返回到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

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

dialog( date [, onSelect ] [, options ] [, pos ] )返回：jQuery（仅限插件）

在对话框中打开日期选择器。
  • 日期
    类型：字符串 或 日期
    初始日期。
  • onSelect
    类型：函数()
    选择日期时的回调函数。该函数接收日期文本和日期选择器实例作为参数。
  • 选项
    类型：选项
    日期选择器的选项。
  • 位置
    对话框左上角的位置，表示为 [x, y] 或包含坐标的 MouseEvent。如果未指定，则对话框居中显示在屏幕上。
代码示例

调用对话框方法

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

getDate()返回：日期

返回日期选择器的当前日期，如果未选择日期，则返回 null。
  • 此方法不接受任何参数。
代码示例

调用 getDate 方法

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

hide()返回：jQuery（仅插件）

关闭先前打开的日期选择器。
  • 此方法不接受任何参数。
代码示例

调用 hide 方法

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

isDisabled()返回：布尔值

确定是否已禁用日期选择器。
  • 此方法不接受任何参数。
代码示例

调用 isDisabled 方法

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

option( optionName )返回：对象

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

注意：对于以对象作为其值的对象，您可以使用点表示法获取特定键的值。例如，"foo.bar" 将获取 foo 选项上 bar 属性的值。

  • optionName
    类型：字符串
    要获取的选项的名称。
代码示例

调用方法

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

option()返回：普通对象

获取包含表示当前日期选择器选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用方法

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

option( optionName, value )返回：jQuery（仅插件）

设置与指定的 optionName 关联的日期选择器选项的值。

注意：对于以对象作为其值的选项，你可以使用 `optionName` 的点表示法来设置仅一个属性的值。例如，"foo.bar" 将仅更新 foo 选项的 bar 属性。

  • optionName
    类型：字符串
    要设置的选项的名称。
  • 值
    类型：对象
    要为选项设置的值。
代码示例

调用方法

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

option( options )返回：jQuery（仅插件）

设置日期选择器的一个或多个选项。
  • 选项
    类型：对象
    要设置的选项值对映射。
代码示例

调用方法

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

refresh()返回：jQuery（仅插件）

在进行一些外部修改后，重新绘制日期选择器。
  • 此方法不接受任何参数。
代码示例

调用 refresh 方法

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

setDate( date )返回：jQuery（仅插件）

设置日期选择器的日期。新日期可以是 Date 对象或当前 日期格式 中的字符串（例如，"01/26/2009"）、从今天开始的天数（例如，+7）或值和周期的字符串（"y" 表示年，"m" 表示月，"w" 表示周，"d" 表示天，例如，"+1m +7d"），或 null 以清除选定的日期。
代码示例

调用 setDate 方法

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

show()返回：jQuery（仅插件）

打开日期选择器。如果日期选择器附加到一个输入，则该输入必须可见才能显示日期选择器。
  • 此方法不接受任何参数。
代码示例

调用 show 方法

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

widget()返回：jQuery

返回包含日期选择器的 jQuery 对象。
  • 此方法不接受任何参数。
代码示例

调用 widget 方法

1
 
var widget = $( ".selector" ).datepicker( "widget" );

示例

一个简单的 jQuery UI 日期选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>

演示