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 index c52a20dcde..9722d913d5 100644 --- 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 @@ -
Selected Date: {{ displayDate }}
+
+ Selected Date: {{ selectedDate | date: 'MMM d, y z':(useTimezoneUTC ? 'UTC' : undefined) }} +
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 index 9ce16a58ff..b5413e6af0 100644 --- 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 index 05d33fc6d0..c45170b571 100644 --- 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();