Блог

Проблема:
Я использовал календарь Vuetify для создания календаря. Ежедневный интервал в представлении дня должен отличаться в зависимости от времени работы предприятия в этот день. Логика работает для Firefox и Chrome. Но не в Safari.

Рабочий пример:
Вот Codepen, который я создаю, чтобы продемонстрировать проблему. При нажатии на просмотр дня и перемещении между днями в течение дня отображаются разные временные диапазоны. Перо работает в 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?

У разработчика Vuetify был ответ:

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

Chrome анализирует его как системный часовой пояс и возвращает часы в системном часовом поясе. Safari анализирует его как UTC и возвращает часы в системном часовом поясе. Используйте luxon или date-fns, если вам нужно выполнить арифметические вычисления по датам.

Спасибо @KaelWD