如何用jQuery UI Datepicker实现月份和年份选择功能

jQuery UI Datepicker是常用的日期选择插件，默认展示完整的日期面板，支持选择年、月、日。但在实际业务中，我们经常会遇到只需要选择月份或者年份的场景，比如统计报表的时间筛选、按月份归档的内容查询等，这时候就需要对Datepicker进行针对性配置。

基础环境准备

使用jQuery UI Datepicker前需要先引入相关的依赖文件，包括jQuery库、jQuery UI的JS文件和对应的CSS主题文件，示例代码如下：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery UI样式 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<!-- 引入jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<!-- 页面输入框 -->
<input type="text" id="dateInput" placeholder="点击选择时间">

实现仅选择月份功能

要实现仅选择月份的效果，核心是通过配置Datepicker的参数，隐藏日期面板中的日期部分，只保留年份和月份的选择控件，同时调整显示格式。具体配置如下：

$(function() {
    $("#dateInput").datepicker({
        // 设置仅显示月份面板，隐藏日期部分
        changeMonth: true,
        changeYear: true,
        // 关闭日期选择，只保留年月
        showButtonPanel: true,
        dateFormat: "yy-mm",
        // 自定义面板关闭逻辑，选中月份后自动关闭
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker("setDate", new Date(year, month, 1));
        }
    });
});

上述配置中，changeMonth和changeYear设置为true，允许用户切换月份和年份；dateFormat设置为yy-mm，最终输入框显示的内容会是类似2024-05的格式；onClose回调用于处理选中月份后的赋值逻辑，确保只保留年月信息。

实现仅选择年份功能

仅选择年份的场景下，需要隐藏月份和日期部分，只保留年份选择控件，同时调整面板的显示逻辑。配置示例如下：

$(function() {
    $("#dateInput").datepicker({
        changeYear: true,
        // 隐藏月份下拉框
        changeMonth: false,
        // 隐藏日期面板
        showButtonPanel: true,
        dateFormat: "yy",
        // 自定义年份选择逻辑
        onClose: function(dateText, inst) {
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker("setDate", new Date(year, 0, 1));
        },
        // 隐藏日期单元格
        beforeShow: function(input, inst) {
            setTimeout(function() {
                // 隐藏日期表格
                $("#ui-datepicker-div table.ui-datepicker-calendar").hide();
                // 隐藏月份下拉框
                $("#ui-datepicker-div .ui-datepicker-month").hide();
            }, 0);
        }
    });
});

这里通过beforeShow回调隐藏了日期表格和月份下拉框，只保留年份选择控件，dateFormat设置为yy，最终输入框显示的内容为四位年份，比如2024。

同时支持月份和年份选择

如果需要同时支持选择月份和年份，不需要做额外的隐藏逻辑，只需要开启对应的切换参数即可，配置如下：

$(function() {
    $("#dateInput").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm",
        yearRange: "2000:2030", // 限制可选年份范围
        showButtonPanel: true
    });
});

上述配置中增加了yearRange参数，限制可选年份在2000到2030之间，用户可以通过下拉框快速切换年份和月份，选中后输入框会显示对应的年月信息。

常见问题与解决

• 如果选择后输入框显示格式不符合预期，检查dateFormat参数是否正确，yy代表四位年份，mm代表两位月份，dd代表两位日期。
• 如果面板显示异常，确认jQuery和jQuery UI的版本是否兼容，建议使用官方稳定版本。
• 如果需要限制可选的最小或最大时间，可以添加minDate和maxDate参数，比如minDate: "-1Y"表示只能选择过去一年的时间。

总结

通过合理配置jQuery UI Datepicker的参数，我们可以轻松实现月份选择、年份选择以及同时选择月份和年份的功能，不需要额外开发复杂的自定义日期控件。开发者可以根据实际业务需求调整显示格式、可选范围等参数，快速适配不同的使用场景。

jQuery_UIDatepicker月份选择年份选择日期控件修改时间：2026-07-12 07:51:22