Merge pull request #342 from digipolisantwerp/GFOP-162

GFOP-162

Author: TriangleJuice

packages/ngx-calendar/src/lib/components/calendar/calendar.component.spec.ts

@@ -1,6 +1,6 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component } from '@angular/core';
-import { DateRange } from '@acpaas-ui/ngx-utils';
+import { DateRange, DateHelper } from '@acpaas-ui/ngx-utils';
 
 import { CalendarModule } from '../../calendar.module';
 import { CalendarComponent } from './calendar.component';
@@ -216,11 +216,15 @@ describe('The Calendar Component', () => {
 
     it('emits the picked date and the completion status', () => {
       const date = new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const day = date.getDate();
+      const expectedDate = new Date(DateHelper.toUtcMidnightInBrussels(year, month, day));
 
       calendar.pickDate(date);
 
       expect(calendar.selectDate.emit).toHaveBeenCalledWith({
-        date,
+        date: expectedDate,
         complete: true,
       });
       expect(calendar.switchView).not.toHaveBeenCalled();

packages/ngx-calendar/src/lib/components/calendar/calendar.component.ts

@@ -61,7 +61,7 @@ export class CalendarComponent implements OnInit, OnChanges {
   constructor(
     @Inject(CALENDAR_MONTH_LABELS) public moduleMonthLabels = CALENDAR_DEFAULT_MONTH_LABELS,
     @Inject(CALENDAR_WEEKDAY_LABELS) public moduleWeekdayLabels = CALENDAR_DEFAULT_WEEKDAY_LABELS,
-    private calendarService: CalendarService
+    private calendarService: CalendarService,
   ) {}
 
   public ngOnInit() {
@@ -153,10 +153,22 @@ export class CalendarComponent implements OnInit, OnChanges {
   pickDate(date: Date): void {
     const complete = this.activeView === CALENDAR_VIEW_MONTH;
 
-    this.selectDate.emit({
-      date,
-      complete,
-    });
+    if (complete) {
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const day = date.getDate();
+      const timezoneAwareDate = new Date(DateHelper.toUtcMidnightInBrussels(year, month, day));
+
+      this.selectDate.emit({
+        date: timezoneAwareDate,
+        complete,
+      });
+    } else {
+      this.selectDate.emit({
+        date,
+        complete,
+      });
+    }
 
     if (!complete) {
       this.activeDate = date;

packages/ngx-forms/src/lib/datepicker/components/datepicker/datepicker.component.ts

@@ -94,7 +94,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro
     @Inject(DATEPICKER_ERROR_LABELS) private errorLabels = DATEPICKER_DEFAULT_ERROR_LABELS,
     public calendarService: CalendarService,
     private formBuilder: UntypedFormBuilder,
-    private ref: ChangeDetectorRef
+    private ref: ChangeDetectorRef,
   ) {}
 
   public ngOnInit(): void {
@@ -108,7 +108,10 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro
         const date = DateHelper.parseDate(format, 'yyyy-MM-dd');
         if (date) {
           this.selectedDate = date;
-          this.onChange(date.toISOString());
+          const year = date.getFullYear();
+          const month = date.getMonth();
+          const day = date.getDate();
+          this.onChange(DateHelper.toUtcMidnightInBrussels(year, month, day));
         } else {
           // Change value with original value (and not null or '') so we can add an error in the validate function
           this.onChange(value);
@@ -138,7 +141,7 @@ export class DatepickerComponent implements OnInit, OnChanges, OnDestroy, Contro
     // Create an interval if min/max is filled in
     this.interval = IntervalBuilder.dateInterval(
       this.min ? new Date(this.min) : null,
-      this.max ? new Date(this.max) : null
+      this.max ? new Date(this.max) : null,
     )
       .not()
       .build();

packages/ngx-utils/src/lib/date/datehelper.ts

@@ -9,6 +9,7 @@ import getLastWeekdayOfMonth from './helpers/getLastWeekdayOfMonth';
 import getMonthLength from './helpers/getMonthLength';
 import getWeekday from './helpers/getWeekday';
 import parseDate from './helpers/parseDate';
+import toUtcMidnightInBrussels from './helpers/toUtcMidnightInBrussels';
 import updateDate from './helpers/updateDate';
 import updateMonth from './helpers/updateMonth';
 
@@ -24,6 +25,7 @@ class DateHelper {
   static getMonthLength: any;
   static getWeekday: any;
   static parseDate: any;
+  static toUtcMidnightInBrussels: any;
   static updateDate: any;
   static updateMonth: any;
 }
@@ -39,6 +41,7 @@ DateHelper.getLastWeekdayOfMonth = getLastWeekdayOfMonth;
 DateHelper.getMonthLength = getMonthLength;
 DateHelper.getWeekday = getWeekday;
 DateHelper.parseDate = parseDate;
+DateHelper.toUtcMidnightInBrussels = toUtcMidnightInBrussels;
 DateHelper.updateDate = updateDate;
 DateHelper.updateMonth = updateMonth;
 

packages/ngx-utils/src/lib/date/helpers/toUtcMidnightInBrussels.ts

@@ -0,0 +1,10 @@
+export default function toUtcMidnightInBrussels(year: number, month: number, day: number): string {
+  const utcDate = new Date(Date.UTC(year, month, day, 0, 0, 0));
+  const brusselsDate = new Date(utcDate.toLocaleString('en-US', { timeZone: 'Europe/Brussels' }));
+  const utcBrusselsDate = new Date(brusselsDate.toLocaleString('en-US', { timeZone: 'UTC' }));
+  const offset = utcDate.getTime() - utcBrusselsDate.getTime();
+
+  const brusselsMidnight = new Date(utcDate.getTime() + offset);
+
+  return brusselsMidnight.toISOString();
+}

packages/ngx-utils/src/public-api.ts

@@ -46,6 +46,7 @@ export { default as getLastWeekdayOfMonth } from './lib/date/helpers/getLastWeek
 export { default as getMonthLength } from './lib/date/helpers/getMonthLength';
 export { default as getWeekday } from './lib/date/helpers/getWeekday';
 export { default as parseDate } from './lib/date/helpers/parseDate';
+export { default as toUtcMidnightInBrussels } from './lib/date/helpers/toUtcMidnightInBrussels';
 export { default as updateDate } from './lib/date/helpers/updateDate';
 export { default as updateMonth } from './lib/date/helpers/updateMonth';