本教程详细介绍了如何利用 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 文件的 <head> 或 <bodyyoujiankuohaophpcn 标签内，确保 jQuery 库在 jQuery UI 库之前加载。
<!-- 引入 jQuery 核心库 --> <script src="path/to/your/jquery.min.js"></script> <!-- 引入 jQuery UI JavaScript 文件 --> <script src="path/to/your/jquery-ui.min.js"></script> <!-- 引入 jQuery UI 样式文件 --> <link rel="stylesheet" href="path/to/your/jquery-ui.css" />
请将 path/to/your/ 替换为实际的文件路径。
3. 构建 HTML 结构
为了实现日期选择功能，我们需要在页面中创建输入框元素。这里我们以两个输入框为例，用于实现“从日期”到“至日期”的年月范围选择。
<div class="col-lg-3 col-sm-12"> <h4><b>From Date :</b></h4> <input type="text" class="form-control" name="f_date" id="datepicker1" required /> </div> <div class="col-lg-3 col-sm-12"> <h4><b>To Date :</b></h4> <input type="text" class="form-control" name="t_date" id="datepicker2" required/> </div>
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 的 <style> 标签中。
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 文件，实现年月选择功能：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI Datepicker 年月选择教程</title> <!-- 引入 jQuery UI 样式文件 --> <link rel="stylesheet" href="path/to/your/jquery-ui.css" /> <style> /* 隐藏日历的日期部分，只显示月份和年份选择器 */ .ui-datepicker-calendar { display: none; } /* 可选：为了布局美观，添加一些基础样式 */ body { font-family: Arial, sans-serif; margin: 20px; } .col-lg-3 { float: left; width: 25%; padding: 10px; box-sizing: border-box; } .form-control { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; } </style> </head> <body> <div class="col-lg-3 col-sm-12"> <h4><b>From Date :</b></h4> <input type="text" class="form-control" name="f_date" id="datepicker1" required /> </div> <div class="col-lg-3 col-sm-12"> <h4><b>To Date :</b></h4> <input type="text" class="form-control" name="t_date" id="datepicker2" required/> </div> <!-- 引入 jQuery 核心库 --> <script src="path/to/your/jquery.min.js"></script> <!-- 引入 jQuery UI JavaScript 文件 --> <script src="path/to/your/jquery-ui.min.js"></script> <script> $(function() { // 初始化日期变量 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 的最小可选日期 // 注意：这里的 selected.date 在 onClose 逻辑后可能不是准确的，但对于 setStartDate/setEndDate 依然有效 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); } }); }); </script> </body> </html>
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 事件拦截并格式化用户选择的结果。这种方法不仅功能强大，而且提供了高度的定制性，能够满足各种特定的年月选择需求。