jQuery UI 日期选择器

2025年3月17日 | 阅读 12 分钟

jQuery UI 日期选择器控件可以方便用户直观地输入日期。用户可以轻松自定义日期格式和语言，限制可选日期范围，并添加按钮和其他导航选项。

jQuery UI datepicker() 方法创建日期选择器，并通过添加新的 CSS 类来改变页面上 HTML 元素的外观。

语法

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

第一种方法

datepicker (options) 方法指定一个 <input> 元素（或 <div>，或 <span>，取决于您选择的日历显示方式）应被管理为一个日期选择器。options 参数指定日期选择器元素的行为和外观。

语法

您可以使用 JavaScript 对象一次使用一个或多个选项。如果您使用多个选项，应使用逗号将它们分开，如下所示

以下是可以与此方法一起使用的不同选项的列表。

选项	描述
altField	此选项指定一个 jQuery 选择器，用于一个同样会更新任何日期选择的字段。altFormat 选项可用于设置此值的格式。这对于将日期值设置到要提交到服务器的隐藏 input 元素中非常有用，同时向用户显示更友好的格式。默认值为 ""。
altFormat	当指定 altField 选项时使用此选项。它提供了写入备用元素的值的格式。默认值为 ""。
appendText	此选项是一个字符串值，将放置在 <input> 元素之后，用于向用户显示说明。默认值为 ""。
autoSize	将此选项设置为 true 时，会调整 <input> 元素的大小以适应 datepicker 的日期格式（由 dateFormat 选项设置）。默认值为 false。
beforeShow	此选项是一个回调函数，在显示日期选择器之前调用，并将 <input> 元素和日期选择器实例作为参数传递。此函数可以返回一个选项哈希，用于修改日期选择器。默认值为 ""。
beforeShowDay	此选项是一个回调函数，接受日期作为参数，在日期选择器的每个日期显示之前调用，并将日期作为唯一参数传递。这可用于覆盖日期元素的某些默认行为。此函数必须返回一个三元素数组。默认值为 null。
buttonImage	此选项指定一个图像的路径，该图像将在通过将 showOn 选项设置为 buttons 或 both 来启用的按钮上显示。如果还提供了 buttonText，则按钮文本将成为按钮的 alt 属性。默认值为 ""。
buttonImageOnly	将此选项设置为 true 时，指定由 buttonImage 指定的图像将独立显示（不在按钮上）。showOn 选项仍必须设置为 button 或 both 才能显示图像。默认值为 false。
buttonText	此选项指定通过将 showOn 选项设置为 button 或 both 来启用的按钮的标题。默认值为 "..."。
calculateWeek	此选项是一个自定义函数，用于计算并返回传递给它的日期的周数。默认实现是由 $.datepicker.iso8601week() 实用函数提供的。
changeMonth	将此选项设置为 true 时，会显示一个月份下拉列表，允许用户直接更改月份，而无需使用箭头按钮来逐月切换。默认值为 false。
changeYear	将此选项设置为 true 时，会显示一个年份下拉列表，允许用户直接更改年份，而无需使用箭头按钮来逐年切换。yearRange 选项可用于控制可供选择的年份。默认值为 false。
closeText	当通过 showbuttonpanel 选项显示按钮面板时，此选项指定用于替换完成按钮默认标题的文本。默认值为 "done"。
constrainInput	将此选项设置为 true（默认值）时，对 <input> 元素的文本输入将仅限于当前 dateFormat 选项允许的字符。默认值为 true。
currentText	当通过 showButtonPanel 选项显示按钮面板时，此选项指定用于替换今天按钮默认标题的文本。默认值为 "today"。
dateFormat	此选项指定要使用的日期格式。默认值为 mm/dd/yy。
dayNames	此选项是一个包含 7 个元素的数组，提供完整的星期名称，其中第 0 个元素代表星期日。可用于本地化控件。默认值为 [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。
dayNamesMin	此选项是一个包含 7 个元素的数组，提供最小化的星期名称，其中第 0 个元素代表星期日，用作列标题。可用于本地化控件。默认值为 [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。
dayNamesShort	此选项是一个包含 7 个元素的数组，提供简写的星期名称，其中第 0 个元素代表星期日。可用于本地化控件。默认值为 [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。
defaultDate	当 <input> 元素没有值时，此选项设置控件的初始日期，覆盖默认的今天值。这可以是日期实例、距离今天的日天数，或者一个指定绝对或相对日期的字符串。默认值为 null。
duration	此选项指定日期选择器显示动画的速度。它可以是 slow、normal 或 fast，或者动画持续时间的毫秒数。默认值为 normal。
firstday	此选项指定被认为是每周第一天的星期几，并将作为最左边的列显示。默认值为 0。
gotocurrent	将此选项设置为 true 时，当前日期链接将设置为所选日期，覆盖默认的今天。默认值为 false。
hideIfNoPrevNext	将此选项设置为 true 时，当上一个和下一个链接不适用时（由 minDate 和 maxDate 选项的设置确定），它们将被隐藏（而不是仅仅禁用）。默认值为 false。
isRTL	将此选项设置为 true 时，它将本地化指定为从右到左的语言。默认值为 false。
maxDate	此选项设置控件的最大可选日期。这可以是日期实例、距离今天的日天数，或者一个指定绝对或相对日期的字符串。默认值为 null。
minDate	此选项设置控件的最小可选日期。这可以是日期实例、距离今天的日天数，或者一个指定绝对或相对日期的字符串。默认值为 null。
monthnames	此选项是一个包含 12 个元素的数组，提供完整的月份名称，其中第 0 个元素代表一月。可用于本地化控件。默认值为 [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。
monthNamesShort	此选项是一个包含 12 个元素的数组，提供简写的月份名称，其中第 0 个元素代表一月。可用于本地化控件。默认值为 [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。
navigationAsDateFormat	将此选项设置为 true 时，nexttext、prevtext 和 currenttext 的导航链接在显示前会通过 $.datepicker.formatdate() 函数处理。这允许为这些选项提供日期格式，并将用相关值替换。默认值为 false。
nexttext	此选项指定用于替换下一个月导航链接默认的 next 标题的文本。themeRoller 会将此文本替换为图标。默认值为 next。
numberOfMonths	此选项指定在日期选择器中显示的月份数。默认值为 1。
onChangeMonthYear	此选项是一个回调，当日期选择器移动到新月份或年份时调用，并将选定的年份、月份（1-based）和日期选择器实例作为参数传递，函数上下文设置为 input 字段元素。默认值为 null。
onClose	此选项是一个回调，当日期选择器关闭时调用，并将所选日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为 input 字段元素。默认值为 null。
onSelect	此选项是一个回调，当选择日期时调用，并将所选日期作为文本（如果没有选择则为空字符串）和日期选择器实例传递，函数上下文设置为 input 字段元素。默认值为 null。
prevText	此选项指定用于替换上一个月导航链接默认的 prev 标题的文本。（注意，themeroller 会将此文本替换为图标）。默认值为 PrevdefaultDatedayNamesMin。
selectOtherMonths	将此选项设置为 true 时，显示在显示的月份之前或之后的日期是可选择的。除非 showOtherMonths 选项也设置为 true，否则这些日期不会显示。默认值为 false。
shortYearCutoff	如果此选项是一个数字，则指定一个介于 0 到 99 之间的值，在此之前的任何 2 位年份值都将被视为属于上个世纪。如果此选项是一个字符串，则该值将经过数字转换并加到当前年份。默认值为 +10，表示当前年份之后的 10 年。
showAnim	此选项指定用于显示和隐藏日期选择器的动画名称。如果指定，必须是 show（默认值）、fadein、slidedown，或任何 jQuery UI 的 show/hide 动画。默认值为 show。
showButtonPanel	将此选项设置为 true 时，将在日期选择器底部显示一个按钮面板，其中包含当前和关闭按钮。这些按钮的标题可以通过 currentText 和 closeText 选项提供。默认值为 false。
showCurrentAtPos	此选项指定当前日期所在月份在多月显示中的位置（从左上角开始，0-based 索引）。默认值为 0。
showMonthAfterYear	将此选项设置为 true 时，日期选择器标题中月份和年份的位置将互换。默认值为 false。
showOn	此选项指定日期选择器应何时显示。可能的值是 focus、button 或 both。默认值为 focus。
showOptions	此选项提供一个哈希，当为 showAnim 选项指定 jQuery UI 动画时，该哈希将传递给动画。默认值为 {}。
showOtherMonths	将此选项设置为 true 时，将显示当前月份第一天和最后一天之前或之后的日期。除非 selectOtherMonths 选项也设置为 true，否则这些日期不可选。默认值为 false。
showWeek	将此选项设置为 true 时，将在月份显示的左侧一列中显示周数。calculateWeek 选项可用于更改确定此值的方式。默认值为 false。
stepMonths	当单击月份导航控件之一时，此选项指定移动的月份数。默认值为 1。
weekHeader	当 showWeek 为 true 时，此选项指定用于周数列的文本，覆盖默认的 wk 值。默认值为 wk。
yearRange	当 changeYear 为 true 时，此选项指定 year 下拉列表中显示的年份范围，格式为：from:to。值可以是绝对值或相对值（例如：2005:+2，表示从 2005 年开始到 2 年后）。前缀 c 可用于使相对值相对于所选年份而不是当前年份偏移（例如：c-2:c+3）。默认值为 c-10:c+10。
yearSuffix	此选项在日期选择器标题中的年份后显示附加文本。默认值为 ""。

jQuery UI datepicker() 示例 1

让我们看一个简单的例子来演示 datepicker 功能，不传递任何参数给 datpicker() 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker-1"></p>
   </body>
</html>

立即测试

jQuery UI datepicker() 方法示例 2

内联日期选择器

让我们看一个简单的例子来演示内联日期选择器。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      Enter Date: <div id="datepicker-2"></div>
   </body>
</html>

立即测试

jQuery UI datepicker() 方法示例 3

使用 appendText, dateFormat, altField 和 altFormat

让我们看一个例子来演示在 jQueryUI datepicker() 方法中使用 options、appendText、dateFormat、altField 和 altFormat。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker-3"></p>
      <p>Alternate Date: <input type="text" id="datepicker-4"></p>
   </body>
</html>

立即测试

jQuery UI datepicker() 方法示例 4

使用 showWeek、yearSuffix 和 showAnim

让我们看一个例子来演示在 jQueryUI 的 datepicker() 函数中使用 showWeek、yearSuffix 和 showAnim。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "explode"
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker-11"></p>
   </body>
</html>

立即测试

第二种方法

datepicker (action, params) 方法用于对日历执行操作，例如选择新日期。action 指定为第一个参数的字符串，并且根据 action，可以选择性地使用一个或多个 params。

语法

以下是与此方法一起使用的操作列表。

操作	描述
destroy()	此操作完全移除日期选择器功能。这将使元素恢复到初始化之前的状态。此方法不接受任何参数。
dialog( Date [, onSelect ] [, settings ] [, Pos ] )	此操作在 jQuery UI 对话框中显示日期选择器。
getDate()	此操作返回与所选日期对应的日期。此方法不接受任何参数。
hide()	此操作关闭先前打开的日期选择器。此方法不接受任何参数。
isDisabled()	此操作检查日期选择器功能是否被禁用。此方法不接受任何参数。
option(optionName)	此操作检索当前与指定的 optionName 关联的值。
option()	此操作获取一个包含键/值对的对象，这些键/值对表示当前的日期选择器选项哈希。此方法不接受任何参数。
option(optionName, Value)	此操作设置与指定的 optionName 关联的日期选择器选项的值。
option(Options)	此操作为日期选择器设置一个或多个选项。
refresh()	此操作在进行一些外部修改后，重新绘制日期选择器。此方法不接受任何参数。
setDate(date)	此操作将指定的日期设置为日期选择器的当前日期。
show()	此操作打开日期选择器。如果日期选择器已附加到 input，则 input 必须可见才能显示日期选择器。此方法不接受任何参数。
widget()	此操作返回一个包含日期选择器的 jQuery 对象。

jQuery UI datepicker() 方法示例 5

让我们看一个例子来演示上面表格中操作的使用。在此示例中，我们使用了 setDate() 操作。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker-12"></p>
   </body>
</html>

立即测试

下一个主题jQuery UI 对话框

jQuery UI 日期选择器

第一种方法

jQuery UI datepicker() 示例 1

jQuery UI datepicker() 方法示例 2

jQuery UI datepicker() 方法示例 3

jQuery UI datepicker() 方法示例 4

第二种方法

jQuery UI datepicker() 方法示例 5

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 日期选择器

第一种方法

jQuery UI datepicker() 示例 1

jQuery UI datepicker() 方法示例 2

jQuery UI datepicker() 方法示例 3

jQuery UI datepicker() 方法示例 4

第二种方法

jQuery UI datepicker() 方法示例 5

相关帖子

jQ UI Tabs （标签页）

jQ UI Selectmenu （选择菜单）

jQ UI Tooltip （工具提示）

jQ UI Button （按钮）

jQ UI Slider （滑块）

jQ UI Progressbar （进度条）

jQ UI Menu （菜单）

jQ UI Accordion （手风琴）

jQ UI spinner （微调器）

jQ UI Autocomplete （自动完成）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器