使用 jQuery UI Datepicker 构建月份和年份选择器教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 jQuery UI Datepicker 构建月份和年份选择器教程

2025-11-07

浏览次数：次

返回列表

使用 jQuery UI Datepicker 构建月份和年份选择器教程

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

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

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

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

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

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

jQuery 3.6.0
jQuery UI 1.13.2 J*aScript
jQuery UI 1.13.2 CSS

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月份和年份选择器</title>
    <!-- 引入 jQuery UI CSS -->
    <link rel="stylesheet" href="path/to/jquery-ui.css" />
</head>
<body>

    <!-- 您的 HTML 内容 -->

    <!-- 引入 jQuery 库 -->
    <script src="path/to/jquery.min.js"></script>
    <!-- 引入 jQuery UI J*aScript -->
    <script src="path/to/jquery-ui.min.js"></script>
    <!-- 您的自定义 J*aScript 代码 -->
    <script>
        // Datepicker 初始化代码将放在这里
    </script>
</body>
</html>

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

2. HTML 结构

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

<div class="col-lg-3 col-sm-12">
  <h4><b>开始日期 :</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>结束日期 :</b></h4>
  <input type="text" class="form-control" name="t_date" id="datepicker2" required/>
</div>

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

3. CSS 样式调整

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

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

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

4. J*aScript 核心逻辑

现在是实现 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 对象。注意，月份在 J*aScript 的 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 规则隐藏日历天数，可以极大地提升用户体验。结合日期范围联动功能，您可以为用户提供一个强大而直观的日期选择界面。

以上就是使用 jQuery UI Datepicker 构建月份和年份选择器教程的详细内容，更多请关注其它相关文章！

# 可选 # 老狼 seo # 南通网站推广主管 # 全场景营销推广活动总结 # 怒江抖音seo运营公司 # 威海优质seo优化厂 # 毕节seo # 淮南学校网站建设 # 梁山营销推广推荐 # 惠州专业网站优化便宜 # 青海seo营销系统 # 放在 # 加载 # 这是 # 的是 # 输入框 # css # 设置为 # 您的 # 选择器 # 回调 # yy # 区别 # cdn # 回调函数 # bootstrap # js # html # jquery # java # javascript