datetimepicker组件中beforeShowDay选项失效问题求助

问题根源 #

你用的是带时间选择的datetimepicker组件，但beforeShowDay是纯日期选择器datepicker的专属配置项，绝大多数datetimepicker组件（比如常用的Bootstrap Eonasdan DateTimePicker）不支持这个选项，所以你的alert不会触发，函数完全不会执行。

另外代码里还有个隐藏问题：日期格式化时没补零，比如3月2日会生成3/2/2023，但你的active_dates里是03/02/2023，格式不匹配会导致无法匹配目标日期。

解决方案 #

根据需求分两种情况处理：

情况1：不需要时间选择，改用datepicker

如果业务上不需要选时间，直接切换为纯日期选择器datepicker，beforeShowDay就能正常生效，同时修正日期格式化的补零问题：

$(document).ready(function(){
    const current = new Date();
    const prior = new Date(current);
    prior.setDate(current.getDate() - 30); // 修正prior赋值，确保是Date对象
    var active_dates = ["03/02/2023","03/03/2023"];

    // 补零函数，保证月份/日期为两位数字
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }

    $("#purchase_date").datepicker({
        format: 'mm/dd/yyyy',
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        startDate: prior,
        // endDate: '+0d',
        showOtherMonths: true,
        beforeShowDay: function(date){
            var curr_date = padZero(date.getDate());
            var curr_month = padZero(date.getMonth() + 1);
            var curr_year = date.getFullYear();
            var formattedDate = curr_month + "/" + curr_date + "/" + curr_year;

            if ($.inArray(formattedDate, active_dates) !== -1){
               return {
                  classes: 'activeClass'
               };
            }
            return {}; // 必须返回对象，不能直接return
        }
    });
});

情况2：必须保留时间选择功能

如果需要保留时间选择，用datetimepicker对应的回调选项（以Bootstrap Eonasdan DateTimePicker为例），通过customRender处理日期单元格的类名添加，同时修正日期格式化逻辑：

$(document).ready(function(){
    const current = new Date();
    const prior = new Date(current);
    prior.setDate(current.getDate() - 30);
    var active_dates = ["03/02/2023","03/03/2023"];

    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }

    $("#purchase_date").datetimepicker({
        format: 'MM/DD/YYYY HH:mm:ss', // 匹配moment.js格式，确保和组件兼容
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        startDate: prior,
        // endDate: '+0d',
        showOtherMonths: true,
        pickerPosition: "bottom-left",
        customRender: function(date, cellType) {
            // 只处理日期单元格
            if (cellType === 'day') {
                var curr_date = padZero(date.date());
                var curr_month = padZero(date.month() + 1);
                var curr_year = date.year();
                var formattedDate = curr_month + "/" + curr_date + "/" + curr_year;
                
                if ($.inArray(formattedDate, active_dates) !== -1) {
                    return { classes: 'activeClass' };
                }
            }
            return {};
        }
    });
});

额外注意点 #

• 原代码中const prior = new Date().setDate(current.getDate() - 30);是错误的，setDate返回的是时间戳，不是Date对象，必须先创建current的副本再修改日期。
• 确保datetimepicker组件版本和使用的回调选项匹配，不同厂商的组件API可能有差异，建议查阅对应官方文档确认可用的回调函数。

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