日期选择器(Datepicker)年月显示及异常自动变更问题求助

这个坑我之前踩过！当你把Datepicker配置成只选年月的模式后，打开选择器却不做任何选择就点击外部关闭，它会默认把当前系统年月回填到输入框里，直接覆盖掉之前选中的值，确实很烦人。下面给你两个实用的解决办法：

方法1：通过事件监听保留原始值 #

核心思路是在打开选择器前记录当前的选中值，关闭时如果用户没做选择就恢复原值，同时确保打开选择器时显示的是已选的年月（而不是当前年月）：

$(".datclassMonth").datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    showOtherMonths: false,
    // 打开选择器前记录原始值，并设置显示的年月为已选值
    beforeShow: function(input, inst) {
        // 存储当前输入框的原始值
        $(this).data('originalDate', $(this).val());
        // 如果已有选中日期，让选择器默认显示该年月
        var selectedDate = $(this).datepicker('getDate');
        if (selectedDate) {
            inst.selectedMonth = selectedDate.getMonth();
            inst.selectedYear = selectedDate.getFullYear();
        }
    },
    // 关闭选择器时判断是否需要恢复原始值
    onClose: function(dateText, inst) {
        var originalVal = $(this).data('originalDate');
        // 如果关闭后输入框为空（用户未选择），恢复原始值
        if ($(this).val().trim() === '') {
            $(this).val(originalVal);
        }
        // 清除临时存储的原始值（可选）
        $(this).removeData('originalDate');
    }
});

方法2：重写Datepicker的默认关闭逻辑（进阶） #

如果觉得方法1不够彻底，可以重写Datepicker的_hideDatepicker方法，禁止它在未选择时自动回填当前日期：

// 先保存原始的_hideDatepicker方法
var originalHide = $.datepicker._hideDatepicker;
$.datepicker._hideDatepicker = function() {
    var input = this._curInst.input;
    var originalVal = input.data('originalDate');
    // 调用原始方法关闭选择器
    originalHide.apply(this, arguments);
    // 如果输入框为空且有原始值，恢复原始值
    if (input.val().trim() === '' && originalVal) {
        input.val(originalVal);
        input.removeData('originalDate');
    }
};

// 然后正常初始化你的Datepicker
$(".datclassMonth").datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    showOtherMonths: false,
    beforeShow: function(input) {
        $(input).data('originalDate', $(input).val());
    }
});

小提示 #

• 确保你的输入框初始值是符合MM yy格式的（比如"March 2018"），否则getDate可能无法正确解析。
• 如果是动态生成的.datclassMonth元素，记得用事件委托或者在元素生成后再初始化Datepicker。

内容的提问来源于stack exchange，提问作者user3572563