jQuery UI Datepicker 实现纯月份和年份选择教程

本教程详细介绍了如何利用 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 文件的

请将 path/to/your/ 替换为实际的文件路径。

3. 构建 HTML 结构

为了实现日期选择功能，我们需要在页面中创建输入框元素。这里我们以两个输入框为例，用于实现“从日期”到“至日期”的年月范围选择。

Toolplay

一站式AI应用聚合生成平台

下载

  
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 文件，实现年月选择功能：

    
    
    

    
    
    



    

        
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 事件拦截并格式化用户选择的结果。这种方法不仅功能强大，而且提供了高度的定制性，能够满足各种特定的年月选择需求。