jQuery Datepicker日历选择器的用法（附带实例）

日期选择器（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)	为所有的日期选择器改变默认设置
$.datepicker.formatDate(format, date, settings)	格式化日期为一个指定格式的字符串值
$.datepicker.parseDate(format, value, settings)	从一个指定格式的字符串值中提取日期
$.datepicker.iso8601Week(date)	确定一个给定的日期在一年中的第几周：1～53
$.datepicker.noWeekends	设置为 beforeShowDay 函数，防止选择的日期为周末

日期选择器部件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式，则可以使用如下 CSS class 名称：

CSS 类名	说明
ui-datepicker	日期选择器的外层容器；若为内联则额外拥有 ui-datepicker-inline，若设置 isRTL 则额外拥有 ui-datepicker-rtl
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	周末的单元格
ui-datepicker-other-month	日期在某月但不在当前月的单元格
ui-datepicker-unselectable	用户不可选择的单元格
ui-datepicker-current-day	已选中日期的单元格
ui-datepicker-today	当天日期的单元格
ui-datepicker-buttonpane	当设置 showButtonPanel 选项时使用的按钮面板
ui-datepicker-current	用于选择当天日期的按钮
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

注意，jQuery UI 不支持在 <input type="date"> 上创建日期选择器，因为这样会造成与本地选择器的 UI 冲突。

【实例】使用日期选择器选择日期并将其格式化显示在文本框中，在选择日期时提供两个月的日期供选择，而且在选择日期时可以修改年份信息和月份信息。程序开发步骤如下：

新建一个 index.html 文件；
复制 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放在一起；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码实现选择日期并将其格式化的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>日期选择器（Datepicker）</title>
<script>
$(function(){
    $("#datepicker").datepicker({
        showButtonPanel: true,
        numberOfMonths: 2,
        changeMonth: true,
        changeYear: true,
        showWeek: true,
        firstDay: 1
    });
    $("#format").change(function(){
        $("#datepicker").datepicker("option", "dateFormat", $(this).val());
    });
});
</script>
</head>
<body>
<p>日期：<input type="text" id="datepicker"></p>
<p>格式选项：<br>
<select id="format">
    <option value="mm/dd/yy">mm/dd/yyyy 格式</option>
    <option value="yy-mm-dd">yyyy-mm-dd 格式</option>
    <option value="d M, y">短日期格式——d M, y</option>
    <option value="DD, d MM, yy">长日期格式——DD, d MM, yy</option>
</select>
</p>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，单击“日期”文本框，弹出日期选择器，效果如下图所示。

图 1 日期选择器的应用实例

选择某个日期后，在“格式选项”下拉列表中选择所选日期的显示格式，即可以将所选日期以选中格式显示在“日期”文本框中，效果如下图所示。

图 2 以指定格式显示日期

jQuery Datepicker日历选择器的用法（附带实例）

相关文章