jQuery UI datepicker()忽略format属性 mm/dd/yyyy格式显示异常

异常原因 #

这个问题是由bootstrap-datepicker的日期解析规则导致的：
setDate方法接收字符串类型的入参时，会直接按照你当前配置的format格式去拆分解析字符串，不会自动识别你传入的原始日期格式。
你第一次配置format:'yyyy/mm/dd'时，后端渲染的{{ $module->test }}输出的是2021/09/01格式的字符串，和解析规则完全匹配，所以解析正确。
当你修改为format:'mm/dd/yyyy'后，datepicker仍然用新的格式规则去解析你传入的2021/09/01字符串：会把第一段的2021识别为月份，超出12的合法范围后自动做日期溢出计算，最终得到完全不符合预期的错误日期。而mm/yyyy等格式看起来正常，只是刚好匹配了传入字符串的部分拆分规则，本质仍然是错误解析的结果。

解决建议 #

• 方案1（最通用）：不要给setDate传字符串，先把后端返回的日期字符串按照已知的原始格式转为Date对象再传入：

const rawDateStr = '{{ $module->test }}';
const [year, month, day] = rawDateStr.split('/');
const formalDate = new Date(year, Number(month) - 1, day);

$('#test-dp-component .input-group.date').datepicker({
    format:'mm/dd/yyyy',
}).datepicker("setDate", formalDate);

• 方案2（适配多场景）：明确区分日期的解析格式和展示格式，bootstrap-datepicker支持给format参数传入自定义对象分别配置两种规则：

$('#test-dp-component .input-group.date').datepicker({
    format: {
        // 前端展示的日期格式
        toDisplay: (date) => {
            const mm = String(date.getMonth() + 1).padStart(2, '0');
            const dd = String(date.getDate()).padStart(2, '0');
            return `${mm}/${dd}/${date.getFullYear()}`;
        },
        // 解析入参时用的格式，和后端返回的日期格式对齐
        toValue: (dateStr) => {
            const [year, month, day] = dateStr.split('/');
            return new Date(year, Number(month) - 1, day);
        }
    }
}).datepicker("setDate", '{{ $module->test }}');

• 方案3（最稳妥）：后端直接输出Unix时间戳，前端直接用时间戳生成Date对象，完全避免格式解析冲突：

// 此处假设后端输出的是秒级时间戳，需乘1000转为毫秒级
$('#test-dp-component .input-group.date').datepicker({
    format:'mm/dd/yyyy',
}).datepicker("setDate", new Date({{ $module->test_timestamp }} * 1000));

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