[Bug] Fix timezone drift, respect locale + user date-time-locale across pickers (#3646)

Author: markus-moser

assets/js/src/core/components/date-picker/date-picker.tsx

@@ -24,6 +24,8 @@ import { useStyles } from './date-picker.styles'
 import cn from 'classnames'
 import { useFieldWidthOptional } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/use-field-width'
 import { formatDate, formatDateTime } from '@Pimcore/utils/date-time'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
+import { isNonEmptyString } from '@Pimcore/utils/type-utils'
 
 export type DatePickerProps = PickerProps & {
   value?: DatePickerValueType
@@ -33,10 +35,18 @@ export type DatePickerProps = PickerProps & {
   disabled?: boolean
   inherited?: boolean
   showSuffixIcon?: boolean
+  /**
+   * When explicitly `false`, the value is treated as a server-timezone wall-clock so the displayed
+   * value does not drift with the browser timezone (see `toDayJs`). Defaults to the previous
+   * absolute-instant behaviour when omitted.
+   */
+  respectTimezone?: boolean
 }
 
 const DatePickerComponent = (props: DatePickerProps): React.JSX.Element => {
-  const value = toDayJs(props.value)
+  const { timezone } = useSettings()
+  const serverTimezone = isNonEmptyString(timezone) ? timezone : undefined
+  const value = toDayJs(props.value, undefined, { respectTimezone: props.respectTimezone, timezone: serverTimezone })
   const fieldWidths = useFieldWidthOptional()
 
   const { styles } = useStyles()

assets/js/src/core/components/date-picker/date-range-picker.tsx

@@ -22,6 +22,7 @@ import { useStyles } from '@Pimcore/components/date-picker/date-picker.styles'
 import cn from 'classnames'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { useFieldWidthOptional } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/use-field-width'
+import { formatDate, formatDateTime } from '@Pimcore/utils/date-time'
 
 export type DateRange = [start: Dayjs | null, end: Dayjs | null]
 export type DateRangeTargetValue = [start: DatePickerValueType, end: DatePickerValueType]
@@ -72,9 +73,17 @@ export const DateRangePicker = (props: DateRangePickerProps): React.JSX.Element
     props.onChange?.(valueFromDayJs(dates, props.outputType, props.outputFormat))
   }
 
+  const formatDisplayValue = (date: Dayjs): string => {
+    const timestamp = date.unix()
+    return props.showTime !== undefined && props.showTime !== false
+      ? formatDateTime({ timestamp, dateStyle: 'short', timeStyle: 'short' })
+      : formatDate(timestamp)
+  }
+
   return (
     <OriginalDatePicker.RangePicker
       { ...props }
+      format={ props.format ?? formatDisplayValue }
       onChange={ handleChange }
       popupClassName={ styles.datePickerDropdown }
       rootClassName={ cn(styles.datePicker, props.className, { [styles.inherited]: props.inherited }) }

assets/js/src/core/components/date-picker/utils/date-picker-utils.test.ts

@@ -0,0 +1,163 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import { toDayJs, fromDayJs, toServerWallClock, formatFilterDate, parseFilterDate } from './date-picker-utils'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+// Pimcore date/datetime timezone semantics: respectTimezone=true means the value is an absolute
+// instant rendered in the browser timezone; respectTimezone=false means the value is a wall-clock
+// anchored to the server timezone (so the displayed wall-clock does not drift between browsers).
+//
+// All assertions are independent of the host (browser) timezone the test process runs under,
+// except where they intentionally compare against the host-local `dayjs.unix()` rendering (the
+// respectTimezone=true case), which is the no-regression property.
+
+// Two reference instants: winter (Vienna = UTC+1) and summer/DST (Vienna = UTC+2).
+const WINTER_UNIX = dayjs.utc('2024-01-15T12:00:00Z').unix()
+const SUMMER_UNIX = dayjs.utc('2024-07-15T12:00:00Z').unix()
+
+describe('toServerWallClock', () => {
+  it('renders the instant as the wall-clock of the given server timezone (winter)', () => {
+    expect(toServerWallClock(dayjs.unix(WINTER_UNIX), 'Europe/Vienna').format('YYYY-MM-DD HH:mm'))
+      .toBe('2024-01-15 13:00') // UTC+1
+    expect(toServerWallClock(dayjs.unix(WINTER_UNIX), 'America/New_York').format('YYYY-MM-DD HH:mm'))
+      .toBe('2024-01-15 07:00') // UTC-5
+    expect(toServerWallClock(dayjs.unix(WINTER_UNIX), 'UTC').format('YYYY-MM-DD HH:mm'))
+      .toBe('2024-01-15 12:00')
+  })
+
+  it('honours DST for the server timezone (summer)', () => {
+    expect(toServerWallClock(dayjs.unix(SUMMER_UNIX), 'Europe/Vienna').format('YYYY-MM-DD HH:mm'))
+      .toBe('2024-07-15 14:00') // UTC+2 in summer
+  })
+})
+
+describe('toDayJs — respectTimezone === false (server-timezone wall-clock, no browser drift)', () => {
+  it('anchors numeric values to the server timezone wall-clock', () => {
+    const result = toDayJs(WINTER_UNIX, undefined, { respectTimezone: false, timezone: 'Europe/Vienna' })
+    expect(result?.format('YYYY-MM-DD HH:mm')).toBe('2024-01-15 13:00')
+  })
+
+  it('round-trips stably: stored -> display -> naive string -> server-tz parse -> stored', () => {
+    const serverTz = 'Europe/Vienna'
+    // Read for display (what the picker shows / edits).
+    const display = toDayJs(WINTER_UNIX, undefined, { respectTimezone: false, timezone: serverTz })
+    // Save: non-respect-timezone fields emit a naive wall-clock string.
+    const naive = fromDayJs(display, 'dateString', 'YYYY-MM-DD HH:mm')
+    expect(naive).toBe('2024-01-15 13:00')
+    // Backend Carbon::parse interprets the naive string in the server timezone.
+    const recovered = dayjs.tz(naive as string, serverTz).unix()
+    expect(recovered).toBe(WINTER_UNIX)
+  })
+
+  it('falls back to the absolute instant when no server timezone is configured', () => {
+    const result = toDayJs(WINTER_UNIX, undefined, { respectTimezone: false, timezone: '' })
+    expect(result?.valueOf()).toBe(dayjs.unix(WINTER_UNIX).valueOf())
+  })
+})
+
+describe('toDayJs — respectTimezone !== false (absolute instant in browser timezone)', () => {
+  it('returns the same instant as dayjs.unix (no regression) when respectTimezone is true', () => {
+    const result = toDayJs(WINTER_UNIX, undefined, { respectTimezone: true, timezone: 'Europe/Vienna' })
+    expect(result?.valueOf()).toBe(dayjs.unix(WINTER_UNIX).valueOf())
+  })
+
+  it('does not apply the server timezone when respectTimezone is omitted', () => {
+    expect(toDayJs(WINTER_UNIX)?.valueOf()).toBe(dayjs.unix(WINTER_UNIX).valueOf())
+    expect(toDayJs(WINTER_UNIX, undefined, { timezone: 'Europe/Vienna' })?.valueOf())
+      .toBe(dayjs.unix(WINTER_UNIX).valueOf())
+  })
+})
+
+describe('toDayJs — non-numeric inputs are unchanged', () => {
+  it('passes through dayjs values', () => {
+    const d = dayjs.unix(WINTER_UNIX)
+    expect(toDayJs(d, undefined, { respectTimezone: false, timezone: 'Europe/Vienna' })).toBe(d)
+  })
+
+  it('parses strings with the given format and returns null for nullish', () => {
+    expect(toDayJs('2024-01-15', 'YYYY-MM-DD')?.format('YYYY-MM-DD')).toBe('2024-01-15')
+    expect(toDayJs(null)).toBeNull()
+    expect(toDayJs()).toBeNull()
+  })
+})
+
+describe('formatFilterDate', () => {
+  // The DatePicker filter component emits a browser-local timestamp (seconds) — i.e. browser-local
+  // midnight of the day the user clicked, as produced by fromDayJs's 'timestamp' branch. Mock that
+  // shape directly so the test is independent of the host tz the jest runtime uses.
+  const tsBrowserLocalMidnight = new Date(2026, 2, 15).getTime() / 1000
+
+  it('returns null for null', () => {
+    expect(formatFilterDate(null, true)).toBeNull()
+    expect(formatFilterDate(null, false)).toBeNull()
+  })
+
+  it('respectTimezone=false emits the picked calendar day as UTC ISO 8601', () => {
+    expect(formatFilterDate(tsBrowserLocalMidnight, false)).toBe('2026-03-15T00:00:00Z')
+  })
+
+  it('respectTimezone=true emits an ISO 8601 string with browser offset (instant)', () => {
+    const out = formatFilterDate(tsBrowserLocalMidnight, true)!
+    // ISO includes the date, "T", time, and a numeric offset or Z.
+    expect(out).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}([+-]\d{2}:\d{2}|Z)$/)
+    // Round-trips back to the same instant when parsed.
+    expect(dayjs(out).unix()).toBe(tsBrowserLocalMidnight)
+  })
+})
+
+describe('parseFilterDate (read-back round-trip)', () => {
+  // Pins the regression: stored UTC ISO must not shift the picker day in browsers west of UTC.
+  const tsBrowserLocalMidnight = new Date(2026, 2, 15).getTime() / 1000
+
+  it('returns null for null', () => {
+    expect(parseFilterDate(null)).toBeNull()
+  })
+
+  it('round-trips a respect=false stored value back to the originally picked day', () => {
+    const stored = formatFilterDate(tsBrowserLocalMidnight, false)!
+    expect(stored).toBe('2026-03-15T00:00:00Z')
+    const recovered = parseFilterDate(stored)!
+    expect(dayjs.unix(recovered).format('YYYY-MM-DD')).toBe('2026-03-15')
+  })
+
+  it('round-trips a respect=true stored value back to the originally picked day', () => {
+    const stored = formatFilterDate(tsBrowserLocalMidnight, true)!
+    const recovered = parseFilterDate(stored)!
+    expect(dayjs.unix(recovered).format('YYYY-MM-DD')).toBe('2026-03-15')
+  })
+
+  it('ignores any offset or Z marker on the stored value (calendar day only)', () => {
+    expect(dayjs.unix(parseFilterDate('2026-03-15T00:00:00Z')!).format('YYYY-MM-DD')).toBe('2026-03-15')
+    expect(dayjs.unix(parseFilterDate('2026-03-15T00:00:00-04:00')!).format('YYYY-MM-DD')).toBe('2026-03-15')
+    expect(dayjs.unix(parseFilterDate('2026-03-15T00:00:00+09:00')!).format('YYYY-MM-DD')).toBe('2026-03-15')
+  })
+})
+
+describe('fromDayJs — unchanged save behaviour', () => {
+  it('formats a dateString with the supplied output format', () => {
+    expect(fromDayJs(dayjs('2024-01-15 13:30'), 'dateString', 'YYYY-MM-DD HH:mm')).toBe('2024-01-15 13:30')
+  })
+
+  it('returns null for null', () => {
+    expect(fromDayJs(null, 'dateString', 'YYYY-MM-DD')).toBeNull()
+  })
+
+  it('emits unix seconds (start of day) for the timestamp output type', () => {
+    const value = dayjs('2024-01-15 13:30')
+    const ts = fromDayJs(value, 'timestamp') as number
+    expect(ts).toBe(new Date(2024, 0, 15).getTime() / 1000)
+  })
+})

assets/js/src/core/components/date-picker/utils/date-picker-utils.ts

@@ -9,14 +9,76 @@
  */
 
 import dayjs, { type Dayjs } from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import { isNonEmptyString } from '@Pimcore/utils/type-utils'
+
+// Extend dayjs with timezone support (idempotent; mirrors use-date-converter.ts)
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 export type DatePickerValueType = string | number | Dayjs | null
 export type OutputType = 'dateString' | 'timestamp' | 'dayjs'
-export const toDayJs = (value?: DatePickerValueType | unknown, format?: string): Dayjs | null => {
+
+export interface ToDayJsOptions {
+  /**
+   * When explicitly `false` the value is treated as a timezone-agnostic wall-clock anchored to the
+   * server timezone (Pimcore semantics for date `columnType:'date'` / datetime `respectTimezone:false`).
+   * The stored instant is rendered in `timezone` and handed to the picker as a browser-local dayjs
+   * carrying those wall-clock fields, so the displayed wall-clock no longer drifts with the browser
+   * timezone. Any other value keeps the previous behaviour (display the absolute instant locally).
+   */
+  respectTimezone?: boolean | null
+  /** Server timezone, e.g. from `useSettings().timezone`. */
+  timezone?: string
+}
+
+/**
+ * Returns a browser-local dayjs whose wall-clock fields equal the given instant rendered in
+ * `timezone`. Used to anchor non-respect-timezone date fields to the server timezone.
+ */
+export const toServerWallClock = (instant: Dayjs, timezone: string): Dayjs =>
+  dayjs(instant.tz(timezone).format('YYYY-MM-DDTHH:mm:ss'))
+
+/**
+ * Serialise a date-picker timestamp (browser-local seconds) for a grid filter request:
+ *   - respectTimezone=true  → ISO 8601 with the browser offset (absolute-instant semantics).
+ *   - respectTimezone=false → the picked calendar day pinned to UTC midnight as ISO 8601. The
+ *                              generic-data-index pipeline indexes naive `date` / `datetime`
+ *                              values into OpenSearch without an offset (which OS interprets as
+ *                              UTC), so anchoring the filter to UTC keeps the query window aligned
+ *                              with the indexed instants regardless of the server timezone.
+ */
+export const formatFilterDate = (timestamp: number | null, respectTimezone: boolean): string | null => {
+  if (timestamp === null) {
+    return null
+  }
+  const dj = dayjs.unix(timestamp)
+  if (respectTimezone) {
+    return dj.format()
+  }
+  return `${dj.format('YYYY-MM-DD')}T00:00:00Z`
+}
+
+/**
+ * Inverse of `formatFilterDate`. Slices the calendar prefix so the read-back picker shows the
+ * picked day regardless of any offset / `Z` marker on the stored value.
+ */
+export const parseFilterDate = (dateStr: string | null): number | null => {
+  if (dateStr === null) {
+    return null
+  }
+  return dayjs(dateStr.slice(0, 10), 'YYYY-MM-DD').unix()
+}
+
+export const toDayJs = (value?: unknown, format?: string, options?: ToDayJsOptions): Dayjs | null => {
   if (dayjs.isDayjs(value)) {
     return value
   }
   if (typeof value === 'number') {
+    if (options?.respectTimezone === false && isNonEmptyString(options.timezone)) {
+      return toServerWallClock(dayjs.unix(value), options.timezone)
+    }
     return dayjs.unix(value)
   }
   if (typeof value === 'string') {

assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx

@@ -9,14 +9,15 @@
  */
 
 import React from 'react'
-import dayjs from 'dayjs'
 import { Select } from '@Pimcore/components/select/select'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { DatePicker } from '@Pimcore/components/date-picker/date-picker'
 import { DateRangePicker } from '@Pimcore/components/date-picker/date-range-picker'
 import { useDynamicFilter } from '@Pimcore/components/dynamic-filter/provider/use-dynamic-filter'
 import { t } from 'i18next'
 import { type AbstractFieldFilterDefinition } from '../dynamic-type-field-filter-abstract'
+import { formatFilterDate, parseFilterDate } from '@Pimcore/components/date-picker/utils/date-picker-utils'
+import { isFieldRespectTimezone } from '../../objects/data-related/types/abstract/dynamic-type-object-data-abstract-date'
 
 export enum DatePickerSettingValue {
   ON = 'on',
@@ -25,8 +26,6 @@ export enum DatePickerSettingValue {
   AFTER = 'after'
 }
 
-const DATE_FORMAT = 'YYYY-MM-DD'
-
 export interface DateValue {
   setting: DatePickerSettingValue
   from: string | null
@@ -37,7 +36,8 @@ export interface DateValue {
 export interface DynamicTypeFieldFilterDateProps extends AbstractFieldFilterDefinition {}
 
 export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilterDateProps): React.JSX.Element => {
-  const { data: rawData, setData } = useDynamicFilter()
+  const { data: rawData, setData, type: filterType, config: filterConfig } = useDynamicFilter()
+  const respectTimezone = isFieldRespectTimezone(filterType, (filterConfig as { fieldDefinition?: { columnType?: string, respectTimezone?: boolean | null } } | undefined)?.fieldDefinition)
 
   const data: DateValue = rawData ?? {
     setting: DatePickerSettingValue.ON,
@@ -92,15 +92,11 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte
   }
 
   const convertValueToISOFormat = (timestamp: number | null): string | null => {
-    if (timestamp === null) return null
-
-    return dayjs.unix(timestamp).format()
+    return formatFilterDate(timestamp, respectTimezone)
   }
 
   const convertISOToTimestamp = (dateStr: string | null): number | null => {
-    if (dateStr === null) return null
-
-    return dayjs(dateStr).startOf('day').unix()
+    return parseFilterDate(dateStr)
   }
 
   const handleDateChange = (field: 'on' | 'from' | 'to', value: string | null): void => {
@@ -146,7 +142,6 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte
       {currentSetting === DatePickerSettingValue.BETWEEN && (
         <DateRangePicker
           allowEmpty={ [true, true] }
-          format={ DATE_FORMAT }
           onChange={ (value: unknown) => {
             const [newFrom, newTo] = value as [number | null, number | null]
 
@@ -159,7 +154,6 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte
           }
       {currentSetting !== DatePickerSettingValue.BETWEEN && (
       <DatePicker
-        format={ DATE_FORMAT }
         onChange={ (value: unknown) => {
           const newValue = typeof value === 'number' ? value : null
           const convertedValue = convertValueToISOFormat(newValue)