DatePicker: Timezone offset applied incorrectly when parsing dates with time

[baeroe]

Description

The DatePicker component incorrectly applies timezone offsets when parsing dates with time enabled, causing the displayed time to shift by the user's timezone offset from UTC.

For example, if a user in UTC+1 timezone enters 14:00, the displayed value shifts to 15:00 after saving and reloading.

Root Cause

Two issues in frontend/js/components/DatePicker.vue:

1. dateFormat uses 'Z' (ISO 8601 with timezone)

dateFormat: (self.enableTime && self.noCalendar) ? 'H:i:S' : (self.enableTime ? 'Z' : 'Y-m-d'),

The 'Z' format outputs ISO 8601 dates with timezone information, but the backend stores and returns dates without timezone info. This mismatch causes parsing issues.

2. parseDate incorrectly adds 'Z' suffix

return parse(date + 'Z', fullFormat + 'X', Date.UTC());

This appends a 'Z' (UTC indicator) to dates that are actually in local time, causing the timezone offset to be applied twice.

Proposed Fix

1. Change dateFormat to use explicit format without timezone:

dateFormat: (self.enableTime && self.noCalendar) ? 'H:i:S' : (self.enableTime ? 'Y-m-d H:i:S' : 'Y-m-d'),

2. Simplify parseDate to not apply UTC conversions:

parseDate: function (date, format) {
  // European format: dd.MM.yyyy HH:mm:ss
  if (/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}:\d{2}$/.test(date)) {
    // Manual parsing for European format
    var parts = date.split(' ');
    var datePart = parts[0].split('.');
    var timePart = parts[1].split(':');
    return new Date(datePart[2], datePart[1] - 1, datePart[0], timePart[0], timePart[1], timePart[2]);
  }
  // ... similar for other European formats
  
  // ISO formats - date-fns v1 parse() handles these correctly
  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
    return parse(date);
  }
  // ... etc
  
  return new Date(date);
}

Environment

• Twill version: 3.5.2
• PHP version: 8.2
• Browser: Chrome (also reproducible in Firefox/Safari)
• Timezone: Europe/Berlin (UTC+1)

Steps to Reproduce

1. Set your system timezone to something other than UTC (e.g., UTC+1)
2. Create a model with a datetime field using DatePicker with enableTime: true
3. Enter a time value (e.g., 14:00)
4. Save the record
5. Reload the page
6. Observe the time has shifted by your timezone offset (shows 15:00 instead of 14:00)

[baeroe]

Patch file

Here's a patch that can be applied to fix this issue:

--- a/frontend/js/components/DatePicker.vue
+++ b/frontend/js/components/DatePicker.vue
@@ -132,7 +132,7 @@
           wrap: true,
           altInput: true,
           altFormat: self.altFormatComputed,
-          dateFormat: (self.enableTime && self.noCalendar) ? 'H:i:S' : (self.enableTime ? 'Z' : 'Y-m-d'), // This is the universal format that will be parsed by the back-end.
+          dateFormat: (self.enableTime && self.noCalendar) ? 'H:i:S' : (self.enableTime ? 'Y-m-d H:i:S' : 'Y-m-d'), // This is the universal format that will be parsed by the back-end.
           static: self.staticMode,
           appendTo: self.staticMode ? self.$refs[self.refs.flatPicker] : undefined,
           enableTime: self.enableTime,
@@ -147,22 +147,55 @@
           altInputClass: 'flatpickr-input form-control',
           maxDate: self.maxDate,
           parseDate: function (date, format) {
-            const fullFormat = 'yyyy-MM-dd HH:mm:ss';
-            if (date.length === fullFormat.length) {
-              return parse(date + 'Z', fullFormat + 'X', Date.UTC());
+            // Helper function to manually parse European dates (date-fns v1 doesn't support format strings)
+            function parseEuropean(dateStr, hasSeconds) {
+              var parts = dateStr.split(' ');
+              var datePart = parts[0].split('.');
+              var day = parseInt(datePart[0], 10);
+              var month = parseInt(datePart[1], 10) - 1; // JS months are 0-indexed
+              var year = parseInt(datePart[2], 10);
+
+              if (parts.length > 1) {
+                var timePart = parts[1].split(':');
+                var hours = parseInt(timePart[0], 10);
+                var minutes = parseInt(timePart[1], 10);
+                var seconds = hasSeconds ? parseInt(timePart[2], 10) : 0;
+                return new Date(year, month, day, hours, minutes, seconds);
+              }
+              return new Date(year, month, day);
             }
-            const fullFormatNoSeconds = 'yyyy-MM-dd HH:mm';
-            if (date.length === fullFormatNoSeconds.length) {
-              return parse(date + 'Z', fullFormat + 'X', Date.UTC());
+
+            // European formats FIRST (regex-based, more specific)
+            // European format: dd.MM.yyyy HH:mm:ss
+            if (/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}:\d{2}$/.test(date)) {
+              return parseEuropean(date, true);
             }
-            const fullFormatNoTime = 'yyyy-MM-dd';
-            if (date.length === fullFormatNoTime.length) {
-              return parse(date, fullFormatNoTime, Date.UTC());
+            // European format: dd.MM.yyyy HH:mm
+            if (/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/.test(date)) {
+              return parseEuropean(date, false);
+            }
+            // European format: dd.MM.yyyy
+            if (/^\d{2}\.\d{2}\.\d{4}$/.test(date)) {
+              return parseEuropean(date, false);
             }
 
+            // ISO formats - date-fns v1 parse() handles these correctly
+            // ISO format: yyyy-MM-dd HH:mm:ss
+            if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
+              return parse(date);
+            }
+            // ISO format: yyyy-MM-dd HH:mm
+            if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(date)) {
+              return parse(date);
+            }
+            // ISO format: yyyy-MM-dd
+            if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+              return parse(date);
+            }
+
             if (self.isValidTime(date)) {
-              const currentDate = new Date();
-              date = `${currentDate.toDateString()} ${date}`;
+              var currentDate = new Date();
+              date = currentDate.toDateString() + ' ' + date;
             }
 
             // Hope for the best..

This can be applied using cweagans/composer-patches in composer.json:

{
    "extra": {
        "patches": {
            "area17/twill": {
                "Fix DatePicker timezone offset issue": "patches/twill-datepicker-timezone-fix.patch"
            }
        }
    }
}