jQuery UI Datepicker 实现纯月份和年份选择教程-html教程-PHP中文网

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 文件的 <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 结构

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

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

以上就是jQuery UI Datepicker 实现纯月份和年份选择教程的详细内容，更多请关注php中文网其它相关文章！