在表单开发中，日期范围选择通常需要两个输入框配合完成。jQuery UI 的 Datepicker 组件虽然功能稳定，但默认界面是英文的，月份、星期等日历文本对中文用户不够友好；同时如果只简单地放置两个日期控件，用户完全可能先选一个靠后的开始日期，再选一个更早的结束日期，导致范围不合法。要解决这两个问题，可以从区域汉化和联动约束两方面入手。
一、汉化 Datepicker：从默认英文界面到中文日历
jQuery UI Datepicker 本身内置了多语言支持机制，通过 $.datepicker.regional 对象可以挂载不同语言的配置，再使用 $.datepicker.setDefaults 将某个语言设为默认值。中文配置主要包含月份名称、星期名称、按钮文字以及日期格式。如果不想手动编写这些内容，也可以直接加载官方提供的中文语言包文件，但要注意语言包通常不会自动改变 dateFormat，默认仍是 mm/dd/yy，这与中文用户的书写习惯不一致。
推荐在网页的全局脚本中初始化中文区域，这样页面里所有 Datepicker 实例都会自动应用中文界面。核心代码如下所示，其中 firstDay 设为 1 表示周一作为每周第一天，dateFormat 设为 yy-mm-dd 可以输出类似 2025-06-15 的日期，便于后续写入数据库或做范围比较。
// 定义中文区域配置
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '上月',
nextText: '下月',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '年'
};
// 应用为默认语言
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
完成上述设置后，再初始化具体的日期输入框，弹出的日历面板就会显示中文月份和星期。需要注意的是，如果页面中已经存在已初始化的 Datepicker 实例，改变 setDefaults 不会自动刷新这些实例，通常需要在初始化之前完成汉化配置。对于动态生成的输入框，同样要保证语言设置先于实例化执行。
二、日期范围联动选择：用 onSelect 动态约束
日期范围选择的核心思路是：当用户选择了开始日期后，结束日期控件的最小可选日期应更新为这个开始日期；同理，当用户选择结束日期后，开始日期控件的最大可选日期应更新为该结束日期。Datepicker 提供了 onSelect 回调函数，它在用户选定日期后触发，回调参数中的 dateText 是已经格式化好的字符串，适合直接传给另一个控件的 minDate 或 maxDate 选项。
下面的代码将两个输入框分别初始化为开始日期和结束日期控件，并在 onSelect 中动态修改对方日期范围。为了避免字符串格式与 Datepicker 内部解析不一致，示例中使用 $.datepicker.parseDate 将字符串还原为 Date 对象后再设置限制。
$(function () {
var startDate = $('#startDate');
var endDate = $('#endDate');
startDate.datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
var minDate = $.datepicker.parseDate('yy-mm-dd', selectedDate);
endDate.datepicker('option', 'minDate', minDate);
// 如果结束日期早于新选择的开始日期，则清空结束日期
if (endDate.val() && endDate.datepicker('getDate') < minDate) {
endDate.val('');
}
}
});
endDate.datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
var maxDate = $.datepicker.parseDate('yy-mm-dd', selectedDate);
startDate.datepicker('option', 'maxDate', maxDate);
}
});
});
这种实现方式覆盖了大部分常见表单需求，但它有一个边界：如果用户手动清空输入框，或者在日历面板之外修改了文本内容，onSelect 不会被触发，联动约束就会失效。更稳的做法是配合 beforeShow 回调，在每次打开日历时根据另一个输入框的当前值重新计算可选范围。这样即使用户手动改动了日期文本，点开日历时仍会得到正确的约束。
function bindRangePicker(startInput, endInput) {
startInput.datepicker({
dateFormat: 'yy-mm-dd',
beforeShow: function () {
var endVal = endInput.val();
if (endVal) {
return { maxDate: endVal };
}
},
onSelect: function (dateText) {
endInput.datepicker('option', 'minDate', dateText);
}
});
endInput.datepicker({
dateFormat: 'yy-mm-dd',
beforeShow: function () {
var startVal = startInput.val();
if (startVal) {
return { minDate: startVal };
}
},
onSelect: function (dateText) {
startInput.datepicker('option', 'maxDate', dateText);
}
});
}
先用 beforeShow 读取另一个输入框的值，并把返回值作为本次打开日历时的选项合并进去，这样可避免残留旧约束。两种方式可以组合使用，onSelect 负责实时更新，beforeShow 负责打开时兜底校验。
三、完整示例整合与常见问题
把汉化配置和日期范围联动放到一个完整页面中，可以更清楚地看到加载顺序和初始化位置。下面是一个可直接运行的 HTML 示例，需要依次引入 jQuery、jQuery UI 的样式与脚本，然后执行中文区域配置和输入框初始化。为了让示例更贴近实际应用，两个日期输入框增加了 readonly 属性，防止用户手动输入非法日期破坏范围约束。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Datepicker 日期范围选择</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<p>
<label>开始日期：<input type="text" id="startDate" readonly /></label>
<label>结束日期：<input type="text" id="endDate" readonly /></label>
</p>
<script>
// 中文区域配置
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '上月',
nextText: '下月',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '年'
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
// 日期范围联动
$(function () {
var startDate = $('#startDate');
var endDate = $('#endDate');
startDate.datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
endDate.datepicker('option', 'minDate', selectedDate);
}
});
endDate.datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
startDate.datepicker('option', 'maxDate', selectedDate);
}
});
});
</script>
</body>
</html>
在整合时会遇到几个高频问题。第一个是日期格式不一致：minDate 接收字符串时要求与当前控件自身的 dateFormat 一致，若不一致会导致解析失败而无法限制日期，因此统一使用 yy-mm-dd 是最稳妥的做法。第二个问题是用户通过浏览器自动填充表单时，只填了开始日期而没有经过日历选择，此时结束日期控件不会自动更新约束，这就需要额外的 onChange 监听或表单提交前校验。
第三个问题集中在中文月份名称上。如果选择加载官方语言包，需要注意语言包里的 monthNamesShort 有时是英文缩写或数字格式，显示在月下拉框中可能不符合预期。统一维护一份自定义中文区域配置，有助于团队在不同项目中保持一致的显示效果。第四个问题是样式：jQuery UI 默认主题的日历面板宽度和字体大小可能与业务系统不协调，可以通过覆盖 .ui-datepicker 相关 CSS 类进行调整，但不要改动组件的核心定位逻辑，否则可能影响弹出位置计算。
总体来看，汉化和日期范围联动是 Datepicker 使用中的两个基础环节。中文配置解决界面可读性，联动约束解决数据有效性。两者结合后，用户可以先选开始日期，再选结束日期，而不会再被英文日历或反向选择困扰。只要注意配置加载顺序、日期格式一致性以及手动修改输入框带来的边界情况，这个方案可以在大多数后台管理系统和表单页面中直接落地。
jQuery UI Datepicker日期范围选择插件汉化修改时间：2026-09-28 05:57:44