Bootstrap DateTimePicker在Safari/Firefox中日期解析失败问题排查

没错，这确实是传给moment函数的时间格式处理方式导致的跨浏览器兼容性问题！

为什么会出现这个差异？ #

Chrome的原生Date对象对"MM-DD-YYYY hh:mm A"这种格式的字符串解析兼容性较好，但Safari和Firefox的原生Date解析引擎不支持这种非标准的日期格式。当你直接调用moment(date)而不指定输入格式时，moment会先尝试用浏览器原生的Date解析来处理字符串，这就导致了在Safari和Firefox中解析失败，抛出Invalid Date错误。

解决办法：明确指定moment的输入格式 #

你需要在调用moment时显式传入输入字符串的格式，这样moment会跳过原生Date解析，用自己的解析逻辑处理，保证在所有浏览器中行为一致。而且Bootstrap DateTimePicker的defaultDate参数可以直接接受moment对象，不需要转成原生Date，代码可以更简洁：

// 获取输入的日期字符串
const dateStr = $('#drop-off').val(); // "04-07-2018 4:22 PM"
// 明确指定格式解析为moment对象
const defaultDate = moment(dateStr, 'MM-DD-YYYY hh:mm A');
// 初始化DateTimePicker
$(a).datetimepicker({
  format: 'MM-DD-YYYY hh:mm A',
  defaultDate: defaultDate
});

如果你的业务场景确实需要传递原生Date对象，也可以在moment解析后调用.toDate()转换：

const defaultDate = moment(dateStr, 'MM-DD-YYYY hh:mm A').toDate();

这样修改后，就能在Chrome、Safari、Firefox等浏览器中正常运行，不会再出现解析错误了。

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