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();