17370845950

本教程详细介绍了如何使用 jquery ui datepicker 实现一个仅允许选择月份和年份的日期选择器。我们将通过配置核心选项、利用 `onclose` 回调函数处理选定的月份和年份，并结合 css 隐藏日历视图，来达到这一目标。教程还包括了如何引入必要的库文件以及实现日期范围联动的逻辑，确保功能完整且用户体验良好。

在许多业务场景中，我们可能只需要用户选择一个特定的月份和年份，而非精确到某一天。jQuery UI Datepicker 提供了一套灵活的配置选项和回调机制，可以帮助我们轻松实现这一功能。本教程将引导您完成从环境准备到核心逻辑实现的所有步骤。

1. 准备工作：引入必要的库文件

要使用 jQuery UI Datepicker，您需要引入以下三个核心文件：

• jQuery 库： jQuery UI 依赖于 jQuery。
• jQuery UI JavaScript 文件： 包含 Datepicker 组件的逻辑。
• jQuery UI CSS 文件： 提供 Datepicker 的样式。

为了避免使用 CDN，您可以右键点击以下链接并选择“另存为”将文件下载到本地项目目录中：

• jQuery 3.6.0
• jQuery UI 1.13.2 JavaScript
• jQuery UI 1.13.2 CSS

下载完成后，请将它们链接到您的 HTML 文件中，通常放在 head 或 body 标签的末尾：

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

2. HTML 结构

我们需要两个输入框来承载“开始日期”和“结束日期”的选择，它们将作为 Datepicker 的触发元素。

  
开始日期 :
  


  
结束日期 :
  

这两个 input 元素通过 id 属性 (datepicker1 和 datepicker2) 被 JavaScript 代码引用，以便初始化 Datepicker。

3. CSS 样式调整

为了实现只选择月份和年份，我们需要隐藏 jQuery UI Datepicker 默认显示的日历天数部分。可以通过添加以下 CSS 规则来完成：

.ui-datepicker-calendar {
  display: none;
}

将此 CSS 代码添加到您的样式表文件（或

4. JavaScript 核心逻辑

现在是实现 Datepicker 功能的关键部分。我们将配置 jQuery UI Datepicker 的选项，并利用 onClose 回调函数来处理月份和年份的选择。

$(function() { // 确保 DOM 加载完成后执行
  // 初始化日期变量
  var startDate = new Date();
  var FromEndDate = new 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();   // 获取选中的年份
      var selectedDate = new Date(year, month, 1); // 创建一个新的日期对象，设置为选中月份的第一天

      $(this).datepicker('setDate', selectedDate); // 将选择器的值设置为这个日期

      // 更新第二个日期选择器的最小可选日期，实现日期范围联动
      $('#datepicker2').datepicker('option', 'minDate', selectedDate);
    }
  });

  // 配置第二个日期选择器 (结束日期)
  $('#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();
      var selectedDate = new Date(year, month, 1);

      $(this).datepicker('setDate', selectedDate);

      // 更新第一个日期选择器的最大可选日期，实现日期范围联动
      $('#datepicker1').datepicker('option', 'maxDate', selectedDate);
    }
  });
});

代码详解：

• $(function() { ... });: 这是 jQuery 的简写，确保在 DOM 加载完成后执行代码，避免元素未加载导致错误。
• changeMonth: true 和 changeYear: true: 这两个选项会在 Datepicker 头部添加月份和年份的下拉选择框，允许用户直接选择。
• showButtonPanel: true: 这个选项会显示一个底部面板，其中包含“今天”和“完成”按钮。在只选择月份和年份的场景中，“完成”按钮（或其等效功能）尤其有用，它允许用户在选择完月份和年份后显式确认。
• dateFormat: 'mm-yy': 设置输入框中日期的显示格式为“月份-年份”，例如“01-2025”。
• onClose: function(dateText, inst) { ... }: 这是实现月份和年份选择的核心。
  • 当用户选择完月份和年份并关闭 Datepicker 时，此回调函数会被触发。
  • 我们通过 jQuery 选择器 $("#ui-datepicker-div .ui-datepicker-month :selected").val() 和 $("#ui-datepicker-div .ui-datepicker-year :selected").val() 获取用户在下拉框中选择的月份和年份。
  • new Date(year, month, 1) 创建一个新的 Date 对象。注意，月份在 JavaScript 的 Date 对象中是基于 0 的（0 代表一月，11 代表十二月），但 val() 获取到的月份是 1-12，所以这里直接使用 month 变量是正确的，因为 val() 已经返回了 0-11 的值（HTML option 元素的 value 属性通常是 0-11）。如果 val() 返回的是 1-12，则需要 month - 1。在 jQuery UI 的内部实现中，$("#ui-datepicker-div .ui-datepicker-month :selected").val() 已经返回了 0-11 的月份索引。
  • $(this).datepicker('setDate', selectedDate) 将当前 Datepicker 的值设置为我们构造的 selectedDate 对象。这会更新输入框的内容。
  • 日期范围联动：
    • 对于 datepicker1 (开始日期)，当其值被设置后，我们通过 $('#datepicker2').datepicker('option', 'minDate', selectedDate); 将 datepicker2 (结束日期) 的最小可选日期设置为 datepicker1 的当前选中日期。
    • 对于 datepicker2 (结束日期)，当其值被设置后，我们通过 $('#datepicker1').datepicker('option', 'maxDate', selectedDate); 将 datepicker1 (开始日期) 的最大可选日期设置为 datepicker2 的当前选中日期。
    • 这种方式确保了“开始日期”不会晚于“结束日期”，“结束日期”不会早于“开始日期”，维护了日期选择的逻辑一致性。

5. 注意事项

• jQuery UI Datepicker 与 Bootstrap Datepicker 的区别：
  • 原问题中提到的 minViewMode: 1 和 format: 'mm-yyyy' 是 bootstrap-datepicker 的选项。本教程使用的是 jQuery UI Datepicker，其实现月份和年份选择的方式有所不同，主要通过 changeMonth、changeYear 选项结合 onClose 回调函数来完成。请勿混淆两者。
• onClose 回调的重要性：
  • 在只选择月份和年份的场景下，onClose 是核心。它允许我们在用户完成选择（关闭 Datepicker 弹窗）时，获取到用户通过下拉框选择的月份和年份，并手动设置输入框的值。如果没有这个回调，即使启用了 changeMonth 和 changeYear，Datepicker 仍然会期望用户选择一个具体的日期。
• 版本兼容性：
  • 本教程基于 jQuery 3.6.0 和 jQuery UI 1.13.2。不同版本之间可能存在细微的 API 差异，如果遇到问题，请检查您使用的库版本。
• 用户体验：
  • showButtonPanel: true 可以提供一个“完成”按钮，对于用户确认选择很有帮助。如果不需要，可以移除。
  • 通过 CSS 隐藏日历天数是关键，它使得界面更清晰，避免用户困惑。

总结

通过本教程，您应该已经掌握了如何利用 jQuery UI Datepicker 构建一个功能完善的月份和年份选择器。核心在于正确配置 changeMonth、changeYear 和 dateFormat 选项，并巧妙地运用 onClose 回调函数来捕获用户的选择并更新输入框的值。同时，通过简单的 CSS 规则隐藏日历天数，可以极大地提升用户体验。结合日期范围联动功能，您可以为用户提供一个强大而直观的日期选择界面。