🐛 Remove unneccessary timezone offset

kirbydesign · Mar 22, 2022 · a260c9d · a260c9d
1 parent 8da374f
commit a260c9d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 27 deletions.
diff --git a/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.html b/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.html
@@ -1,6 +1,6 @@
 <kirby-card>
   <kirby-calendar
-    [timezone]="'UTC'"
+    [timezone]="useTimezoneUTC ? 'UTC' : 'local'"
     [disableWeekends]="disableWeekends"
     [disablePastDates]="disablePastDates"
     [disableFutureDates]="disableFutureDates"
@@ -20,4 +20,6 @@
   </kirby-card-footer>
 </kirby-card>
 
-<div *ngIf="selectedDate">Selected Date: {{ displayDate }}</div>
+<div *ngIf="selectedDate">
+  Selected Date: {{ selectedDate | date: 'MMM d, y z':(useTimezoneUTC ? 'UTC' : undefined) }}
+</div>
diff --git a/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.ts b/apps/cookbook/src/app/examples/calendar-example/calendar-card-example.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { addDays, startOfDay, subDays } from 'date-fns';
-import { format, utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 
 @Component({
   selector: 'cookbook-calendar-card-example',
@@ -9,7 +9,6 @@ import { format, utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 })
 export class CalendarCardExampleComponent implements OnChanges {
   selectedDate: Date;
-  displayDate: string;
   @Input() disableWeekends = false;
   @Input() disablePastDates = false;
   @Input() disableFutureDates = false;
@@ -39,11 +38,7 @@ export class CalendarCardExampleComponent implements OnChanges {
         // be misleading and confusing
         if (this.useTimezoneUTC) {
           // realign local -> selectedDate
-          this.selectedDate = zonedTimeToUtc(
-            // this.subtractTimezoneOffset(this.selectedDate),
-            this.selectedDate,
-            this.timeZoneName
-          );
+          this.selectedDate = zonedTimeToUtc(this.selectedDate, this.timeZoneName);
         } else {
           // realign UTC -> local
           this.selectedDate = utcToZonedTime(this.selectedDate, this.timeZoneName);
@@ -54,9 +49,6 @@ export class CalendarCardExampleComponent implements OnChanges {
 
   onDateChange(selectedDate: Date) {
     this.selectedDate = selectedDate;
-    this.displayDate = format(this.selectedDate, 'yyyy-MM-dd HH:mm:ssXXX', {
-      timeZone: this.timeZoneName,
-    });
   }
 
   selectNextMonth() {
@@ -80,8 +72,4 @@ export class CalendarCardExampleComponent implements OnChanges {
       addDays(today, daysFromToday)
     );
   }
-
-  private subtractTimezoneOffset(date: Date): Date {
-    return new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
-  }
 }
diff --git a/libs/designsystem/src/lib/components/calendar/calendar.component.ts b/libs/designsystem/src/lib/components/calendar/calendar.component.ts
@@ -408,15 +408,10 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnChanges {
       let newDate = new Date(this.activeMonth);
       newDate.setDate(newDay.date);
 
-      console.log(`${newDate} ⬅️ newDate`);
-
       if (this.timezone === 'UTC') {
-        newDate = zonedTimeToUtc(this.subtractTimezoneOffset(newDate), this.timeZoneName);
-        // newDate = zonedTimeToUtc(newDate, this.timeZoneName);
-        console.log(`${newDate} ⬅️ newDate (UTC)`);
+        newDate = zonedTimeToUtc(newDate, this.timeZoneName);
       }
 
-      // newDate.setDate(newDay.date);
       const dateToEmit = newDate;
 
       if (this.hasDateChanged(newDate, this._selectedDate)) {
@@ -498,11 +493,6 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnChanges {
     };
   }
 
-  private subtractTimezoneOffset(date: Date): Date {
-    const timezoneOffsetInMs = date.getTimezoneOffset() * 60 * 1000;
-    return new Date(date.getTime() - timezoneOffsetInMs);
-  }
-
   private getDateFromNavigableYear(navigableYear: number | Date): Date {
     if (navigableYear instanceof Date) return navigableYear;
     const today = this.todayDate || new Date();