plone · operramon · Mar 5, 2025 · Mar 4, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 2.68.3 (2025-03-04)
+
+### Bug fix
+
+- **Date picker**: 
+  - Dates are now set to 00:00:00 in the user's local time zone instead of UTC
+  - Dates are no longer miscalculated for users in time zones with a negative offset
+
 # 2.68.2 (2025-02-10)
 
 ### Bug fix

diff --git a/projects/pastanaga-angular/package.json b/projects/pastanaga-angular/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@guillotinaweb/pastanaga-angular",
   "description": "Provides Pastanaga UI elements as Angular components",
-  "version": "2.68.2",
+  "version": "2.68.3",
   "license": "MIT",
   "keywords": [
     "angular",

diff --git a/...ts/pastanaga-angular/src/lib/date-picker/__snapshots__/date-picker.component.spec.ts.snap b/...ts/pastanaga-angular/src/lib/date-picker/__snapshots__/date-picker.component.spec.ts.snap
@@ -525,255 +525,267 @@ exports[`DatePickerComponent should generate weeks 1`] = `
 [
   [
     {
-      "date": 2022-06-27T00:00:00.000Z,
+      "date": 2022-06-26T04:00:00.000Z,
       "number": 26,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-06-28T00:00:00.000Z,
+      "date": 2022-06-27T04:00:00.000Z,
       "number": 27,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-06-29T00:00:00.000Z,
+      "date": 2022-06-28T04:00:00.000Z,
       "number": 28,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-06-30T00:00:00.000Z,
+      "date": 2022-06-29T04:00:00.000Z,
       "number": 29,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-07-01T00:00:00.000Z,
+      "date": 2022-06-30T04:00:00.000Z,
       "number": 30,
-      "otherMonth": false,
+      "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-07-02T00:00:00.000Z,
+      "date": 2022-07-01T04:00:00.000Z,
       "number": 1,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-03T00:00:00.000Z,
+      "date": 2022-07-02T04:00:00.000Z,
       "number": 2,
       "otherMonth": false,
       "selected": false,
     },
   ],
   [
     {
-      "date": 2022-07-04T00:00:00.000Z,
+      "date": 2022-07-03T04:00:00.000Z,
       "number": 3,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-05T00:00:00.000Z,
+      "date": 2022-07-04T04:00:00.000Z,
       "number": 4,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-06T00:00:00.000Z,
+      "date": 2022-07-05T04:00:00.000Z,
       "number": 5,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-07T00:00:00.000Z,
+      "date": 2022-07-06T04:00:00.000Z,
       "number": 6,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-08T00:00:00.000Z,
+      "date": 2022-07-07T04:00:00.000Z,
       "number": 7,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-09T00:00:00.000Z,
+      "date": 2022-07-08T04:00:00.000Z,
       "number": 8,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-10T00:00:00.000Z,
+      "date": 2022-07-09T04:00:00.000Z,
       "number": 9,
       "otherMonth": false,
       "selected": false,
     },
   ],
   [
     {
-      "date": 2022-07-11T00:00:00.000Z,
+      "date": 2022-07-10T04:00:00.000Z,
       "number": 10,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-12T00:00:00.000Z,
+      "date": 2022-07-11T04:00:00.000Z,
       "number": 11,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-13T00:00:00.000Z,
+      "date": 2022-07-12T04:00:00.000Z,
       "number": 12,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-14T00:00:00.000Z,
+      "date": 2022-07-13T04:00:00.000Z,
       "number": 13,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-15T00:00:00.000Z,
+      "date": 2022-07-14T04:00:00.000Z,
       "number": 14,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-16T00:00:00.000Z,
+      "date": 2022-07-15T04:00:00.000Z,
       "number": 15,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-17T00:00:00.000Z,
+      "date": 2022-07-16T04:00:00.000Z,
       "number": 16,
       "otherMonth": false,
       "selected": false,
     },
   ],
   [
     {
-      "date": 2022-07-18T00:00:00.000Z,
+      "date": 2022-07-17T04:00:00.000Z,
       "number": 17,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-19T00:00:00.000Z,
+      "date": 2022-07-18T04:00:00.000Z,
       "number": 18,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-20T00:00:00.000Z,
+      "date": 2022-07-19T04:00:00.000Z,
       "number": 19,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-21T00:00:00.000Z,
+      "date": 2022-07-20T04:00:00.000Z,
       "number": 20,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-22T00:00:00.000Z,
+      "date": 2022-07-21T04:00:00.000Z,
       "number": 21,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-23T00:00:00.000Z,
+      "date": 2022-07-22T04:00:00.000Z,
       "number": 22,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-24T00:00:00.000Z,
+      "date": 2022-07-23T04:00:00.000Z,
       "number": 23,
       "otherMonth": false,
       "selected": false,
     },
   ],
   [
     {
-      "date": 2022-07-25T00:00:00.000Z,
+      "date": 2022-07-24T04:00:00.000Z,
       "number": 24,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-26T00:00:00.000Z,
+      "date": 2022-07-25T04:00:00.000Z,
       "number": 25,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-27T00:00:00.000Z,
+      "date": 2022-07-26T04:00:00.000Z,
       "number": 26,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-28T00:00:00.000Z,
+      "date": 2022-07-27T04:00:00.000Z,
       "number": 27,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-29T00:00:00.000Z,
+      "date": 2022-07-28T04:00:00.000Z,
       "number": 28,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-30T00:00:00.000Z,
+      "date": 2022-07-29T04:00:00.000Z,
       "number": 29,
       "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-07-31T00:00:00.000Z,
+      "date": 2022-07-30T04:00:00.000Z,
       "number": 30,
-      "otherMonth": true,
+      "otherMonth": false,
       "selected": false,
     },
   ],
   [
     {
-      "date": 2022-08-01T00:00:00.000Z,
+      "date": 2022-07-31T04:00:00.000Z,
       "number": 31,
-      "otherMonth": true,
+      "otherMonth": false,
       "selected": false,
     },
     {
-      "date": 2022-08-02T00:00:00.000Z,
+      "date": 2022-08-01T04:00:00.000Z,
       "number": 1,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-08-03T00:00:00.000Z,
+      "date": 2022-08-02T04:00:00.000Z,
       "number": 2,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-08-04T00:00:00.000Z,
+      "date": 2022-08-03T04:00:00.000Z,
       "number": 3,
       "otherMonth": true,
       "selected": false,
     },
     {
-      "date": 2022-08-05T00:00:00.000Z,
+      "date": 2022-08-04T04:00:00.000Z,
       "number": 4,
       "otherMonth": true,
       "selected": false,
     },
+    {
+      "date": 2022-08-05T04:00:00.000Z,
+      "number": 5,
+      "otherMonth": true,
+      "selected": false,
+    },
+    {
+      "date": 2022-08-06T04:00:00.000Z,
+      "number": 6,
+      "otherMonth": true,
+      "selected": false,
+    },
   ],
 ]
 `;
diff --git a/projects/pastanaga-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/pastanaga-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -130,7 +130,7 @@ describe('DatePickerComponent', () => {
     it('should update with date', () => {
       // === Setup ===
       const value = 'March 22, 2022';
-      const expected = new Date('2022-03-22T00:00:00.000Z');
+      const expected = new Date('2022-03-22T00:00:00.000');
 
       // === Execute ===
       component.inputControl.setValue(value);

diff --git a/projects/pastanaga-angular/src/lib/date-picker/date-picker.component.ts b/projects/pastanaga-angular/src/lib/date-picker/date-picker.component.ts
@@ -13,7 +13,6 @@ import {
 } from '@angular/core';
 import {
   add,
-  addMinutes,
   addMonths,
   getDate,
   getDay,
@@ -137,7 +136,7 @@ export class DatePickerComponent extends PaFormControlDirective {
         const date = formatDate(value, 'longDate', this.locale);
 
         this.inputControl.setValue(date);
-        this._selectedDate = this.getUtcDate(startOfDay(new Date(value)));
+        this._selectedDate = startOfDay(new Date(value));
         this.trackedDate = this._selectedDate || new Date();
       });
 
@@ -160,7 +159,7 @@ export class DatePickerComponent extends PaFormControlDirective {
             }
           } else if (value) {
             // this maintains the user's format for now
-            date = this.getUtcDate(parse(value, format, this.trackedDate));
+            date = parse(value, format, this.trackedDate);
           }
           return date;
         }),
@@ -178,7 +177,7 @@ export class DatePickerComponent extends PaFormControlDirective {
   private generateWeeks(): void {
     this.weeks = [];
 
-    const monthStartDate = this.getUtcDate(startOfDay(set(this.trackedDate, { date: 1 }))) as Date;
+    const monthStartDate = startOfDay(set(this.trackedDate, { date: 1 }));
     const monthFirstDay = getDay(monthStartDate);
     const monthLastDay = getDay(lastDayOfMonth(this.trackedDate));
     const monthNumDays = getDaysInMonth(monthStartDate);
@@ -306,15 +305,6 @@ export class DatePickerComponent extends PaFormControlDirective {
     this.onChange(this._selectedDate?.toISOString());
   }
 
-  /**
-   * date is corresponding to the start of the day in the current local, like 2023-06-02T00:00:00.000 GMT+0200
-   * If we keep it like this, date.toISOString() returns 2023-06-01T22:00:00.000Z (toISOString always converting the date provided date to UTC)
-   * So we add the timezone offset to the date: that way this._selectedDate.toISOString() will return 2023-06-02T00:00:00.000Z as expected
-   */
-  private getUtcDate(date: Date | undefined) {
-    return date && addMinutes(date, date.getTimezoneOffset() * -1);
-  }
-
   override setDisabledState(isDisabled: boolean) {
     if (isDisabled === this.inputControl.disabled) {
       return;