本教程详细介绍了如何利用 jquery ui datepicker 实现仅选择月份和年份的功能，而非完整的日期。文章将涵盖必要的库文件引入、关键配置选项的设置（如 `changemonth`、`changeyear`、`dateformat`），以及如何通过 `onclose` 回调函数精确控制输入字段的显示格式。此外，还将提供完整的代码示例和本地文件部署建议，帮助开发者构建专业的、专注于年月选择的日期输入界面。
1. 引言：实现年月选择的需求
在许多业务场景中，我们可能只需要用户选择特定的月份和年份，而无需精确到某一天。传统的日期选择器通常默认显示日历视图，允许选择具体的日期。本教程将指导您如何使用功能强大的 jQuery UI Datepicker 组件，通过一系列配置和事件处理，将其改造为专注于年月选择的专业工具。
2. 准备工作：引入必要的库文件
要使用 jQuery UI Datepicker，您需要引入 jQuery 库和 jQuery UI 库（包括其JavaScript和CSS文件）。为了避免使用CDN，您可以将这些文件下载到本地项目目录中。
下载链接：
- jQuery 核心库： https://www.php.cn/link/a6a2b3e3c6569e69afe1e025d0ff8d1f
- jQuery UI JavaScript： https://www.php.cn/link/6508deb7d1b89059767d5af370618046
- jQuery UI CSS 样式： https://www.php.cn/link/b1e895366dfa5d6a2b31a21ecfc5efe3
请右键点击上述链接并选择“另存为”将文件下载到您的项目文件夹中。
HTML 引入示例：
将以下代码片段放置在您的 HTML 文件的
或 标签内，确保 jQuery 库在 jQuery UI 库之前加载。请将 path/to/your/ 替换为实际的文件路径。
3. 构建 HTML 结构
为了实现日期选择功能，我们需要在页面中创建输入框元素。这里我们以两个输入框为例，用于实现“从日期”到“至日期”的年月范围选择。
From Date :
To Date :
4. 核心配置：实现纯月份和年份选择
现在，我们将使用 JavaScript 和 jQuery UI Datepicker 的配置选项来实现年月选择功能。关键在于以下几个配置项和事件处理。
4.1 关键配置选项
- changeMonth: true：允许用户通过下拉菜单选择月份。
- changeYear: true：允许用户通过下拉菜单选择年份。
- showButtonPanel: true：显示一个按钮面板，通常包含“今天”和“完成”按钮，这对于触发 onClose 事件非常有用。
- dateFormat: 'mm-yy'：设置输入框中日期的显示格式为“月-年”。
4.2 onClose 事件处理
onClose 回调函数是实现纯年月选择的核心。当日期选择器关闭时，此函数会被调用。我们可以在这里获取用户选择的月份和年份，然后手动设置输入框的值，确保只显示年月。
onClose: function(dateText, inst) {
// 获取选择的月份和年份
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
// 设置输入框的日期，日期部分固定为1
$(this).datepicker('setDate', new Date(year, month, 1));
}4.3 隐藏日历视图
为了彻底隐藏日期的选择界面，我们可以在 CSS 中将 .ui-datepicker-calendar 元素的 display 属性设置为 none。
.ui-datepicker-calendar {
display: none;
}您可以将此 CSS 规则添加到您的自定义样式文件或直接嵌入到 HTML 的
4.4 完整的 JavaScript 初始化代码
将上述配置和事件处理应用到我们的 datepicker1 和 datepicker2 输入框。此外，我们还保留了日期范围选择的逻辑，通过 onChange 事件联动两个日期选择器。
// 初始化日期变量
var startDate = new Date();
var FromEndDate = new Date();
// 初始化 datepicker1 (From Date)
$('#datepicker1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm-yy', // 显示格式为 月-年
onClose: function(dateText, inst) {
// 当日期选择器关闭时，获取选择的月份和年份
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
// 设置输入框的日期，日期部分固定为1，确保只显示年月
$(this).datepicker('setDate', new Date(year, month, 1));
},
onChange: function(selected) {
// 处理日期范围联动，设置 datepicker2 的最小可选日期
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
$('#datepicker2').datepicker('setStartDate', startDate);
}
});
// 初始化 datepicker2 (To Date)
$('#datepicker2').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm-yy', // 显示格式为 月-年
onClose: function(dateText, inst) {
// 当日期选择器关闭时，获取选择的月份和年份
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
// 设置输入框的日期，日期部分固定为1，确保只显示年月
$(this).datepicker('setDate', new Date(year, month, 1));
},
onChange: function(selected) {
// 处理日期范围联动，设置 datepicker1 的最大可选日期
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('#datepicker1').datepicker('setEndDate', FromEndDate);
}
});5. 完整代码示例
将所有部分整合到一起，您将得到一个完整的 HTML 文件，实现年月选择功能：
jQuery UI Datepicker 年月选择教程
From Date :
To Date :
6. 注意事项与最佳实践
- 本地文件部署： 强烈建议将 jQuery 和 jQuery UI 的 JS 和 CSS 文件下载到您的本地服务器或项目目录中。这不仅可以提高页面加载速度，还能避免因 CDN 不可用而导致的功能失效。
- onClose 的重要性： onClose 事件是实现纯年月选择的关键。它允许我们在用户完成选择（即关闭选择器）后，手动格式化和设置输入框的值，以确保只显示月份和年份。
- onChange 的作用： 在本示例中，onChange 事件主要用于处理两个日期选择器之间的联动，例如设置“From Date”的结束日期不能晚于“To Date”的开始日期。如果您的应用不需要日期范围选择，可以省略 onChange 回调中的联动逻辑。
- 样式调整： .ui-datepicker-calendar { display: none; } 是强制隐藏日历日期部分的关键 CSS。您可以根据项目需求进一步调整 jQuery UI Datepicker 的样式，以匹配您的 UI 设计。
- 兼容性： jQuery UI Datepicker 具有良好的浏览器兼容性，但在旧版浏览器中可能需要额外的 polyfill 或降级方案。
7. 总结
通过本教程，您应该已经掌握了如何利用 jQuery UI Datepicker 实现一个专注于月份和年份选择的输入控件。核心方法包括正确引入库文件、配置 changeMonth、changeYear 和 dateFormat 选项，以及最重要的是，通过 onClose 事件拦截并格式化用户选择的结果。这种方法不仅功能强大，而且提供了高度的定制性，能够满足各种特定的年月选择需求。
