VUE iview DatePicker在Safari浏览器时间转换异常的解决方法_vue table在苹果系统google hhrome浏览器时间换行,在windows系统没有问题-CSDN博客

本文链接：https://blog.csdn.net/yaochangliang159/article/details/126976225

本文介绍了一种兼容苹果Safari浏览器的日期选择器组件实现方法，通过一个工具类来确保不同浏览器环境下日期格式的一致性和正确性。该方法特别关注了Safari浏览器对于日期格式的特殊要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <DatePicker type="datetime" placeholder="请选择..."
                            :value="eventInfo.happenTime"
                            format="yyyy-MM-dd HH:mm"
                            @on-change="handleChange"
                            :options="pickerOptions" clearable :editable="false"
                            transfer></DatePicker>

    handleChange (date) {
      this.eventInfo.happenTime = dataUtils.getExactTimeWithSafari(date);
    },

关键点在这个工具类：

 //兼容苹果浏览器safari的方法
  getExactTimeWithSafari: (time) => {
    //取得浏览器的userAgent字符串
    var userAgent = navigator.userAgent;
    //判断是否Safari浏览器
    if (userAgent.indexOf("Safari") > -1) {
      time = time.replace(/\-/g,"/");  //把'-'转成'/' yyyy/mm/dd
    }
    var date=new Date(time);
    var year=date.getFullYear();
    /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
    var hour=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
    var minute=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
    var second=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
    return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
  },