Vue.js在Safari出现Invalid Date错误，苹果端日历UI不显示求助

核心原因 #

Safari（包括iOS端Safari/Chrome、Mac端Safari）对日期字符串的解析遵循更严格的标准，不支持类似yyyy-MM-dd HH:mm:ss这种用空格分隔日期和时间的格式，而Chrome、Edge等浏览器会自动兼容这种格式，导致跨端解析差异，进而引发RangeError: Invalid Date错误，最终导致日历UI无法正常渲染。

最优解决方案 #

• 统一日期解析逻辑，兼容跨浏览器
  手动转换服务端返回的日期字符串，使其符合Safari可解析的格式，或使用轻量日期库规避浏览器差异：

  1. 手动转换格式：

     // 处理服务端日期字符串，替换空格为T
     function parseServerDate(dateStr) {
       if (!dateStr) return null;
       return new Date(dateStr.replace(' ', 'T'));
     }
     

  2. 使用Day.js（推荐，轻量无依赖）：

     import dayjs from 'dayjs';
     // 直接解析任意合法格式，自动兼容所有浏览器
     const validDate = dayjs(dateStr).toDate();
     

• 校验日期有效性，保障组件正常渲染
  在将日期传递给日历组件前，先校验是否为合法Date对象，避免无效值导致UI异常：

  // 校验日期有效性
  function isValidDate(date) {
    return date instanceof Date && !isNaN(date);
  }
  
  // Vue组件中处理示例
  computed: {
    calendarDate() {
      const parsedDate = parseServerDate(this.serverResponseDate);
      // 若解析失败，返回当前日期或空值（根据业务需求调整）
      return isValidDate(parsedDate) ? parsedDate : new Date();
    }
  }
  

• 全局捕获Promise拒绝，消除控制台报错
  在项目入口文件（如main.js）添加全局监听，处理未捕获的Promise拒绝：

  window.addEventListener('unhandledrejection', (event) => {
    console.warn('未处理的Promise拒绝:', event.reason);
    event.preventDefault(); // 阻止浏览器默认的报错提示
  });
  

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