时间戳

首页 > 解决方案 > Vuetify v-calendar：动态每日间隔在 Safari 上不起作用

vue.js - Vuetify v-calendar：动态每日间隔在 Safari 上不起作用

问题描述

问题：
我确实使用了 Vuetify 日历来构建日历。日视图中的每日间隔应根据当天的营业时间而有所不同。该逻辑适用于 Firefox 和 Chrome。但不是在 Safari 上。

工作示例：
这是我为演示该问题而构建的 Codepen。单击日视图并在日间移动时，一天内有不同的时间范围。Pen 适用于 FF 和 Chrome，但不适用于 Safari。 https://codepen.io/ttezcan/pen/KKzjEMM 这是动态改变区间的主要方法：

setIntervalByWeekday(weekday) {
            console.log(weekday);                
       if (weekday === 7) {
         weekday = 0;                    
       }                  
       if (weekday === -1) {           
         weekday = 6;
       }
                            
       this.weekday = weekday;
                            
       let start = this.bussiness_hours[weekday]['start'];
                            
       let end = this.bussiness_hours[weekday]['end'];
               
       var timeStart = new Date('2020-05-19 ' + start).getHours();
                            
       var timeEnd = new Date('2020-05-19 ' + end).getHours();
                            
       var duration = timeEnd - timeStart;
       this.firstInterval = start;
       this.intervalCount = duration;                  
     },

我尝试了什么：
我的研究表明，Safari 中的问题发生在动态更改
:first-interval="firstInterval" 和
:interval-count="intervalCount" 的值时。

我尝试使用计算道具来强制重新渲染组件。
我尝试调用 this.$refs.calendar.checkChange() 来强制重新渲染。

任何人都知道如何使这项工作适用于 Safari？

标签： vue.jsvuejs2vuetify.js

解决方案

Vuetify 开发人员给出了答案：

new Date('2020-05-19 ' + start).getHours()

Chrome 将其解析为系统时区并返回系统时区中的小时数。Safari 将其解析为 UTC 并返回系统时区中的小时数。如果您需要对日期进行算术运算，请使用 luxon 或 date-fns。

谢谢@KaelWD

推荐阅读