[Bug] #1055 — align date/datetime field timezone handling with Pimcore semantics

Pimcore date/datetime fields have two timezone modes:
  - respectTimezone=true  → absolute instant, displayed in the browser timezone
  - respectTimezone=false → wall-clock anchored to the configured server timezone

Studio was reading respect=false fields with dayjs.unix() in browser-local time,
so the displayed wall-clock drifted by the browser↔server offset on reload. The
respect=true path already behaved correctly.

This wires useSettings().timezone + the field's respect-timezone semantics through
every surface where these fields are rendered or edited:

  - DatePicker.tsx: new respectTimezone prop; toDayJs(value, _, {respectTimezone,
    timezone}) anchors the input to the server wall-clock via dayjs.tz()
  - date-picker-utils.ts: toServerWallClock helper; formatFilterDate(timestamp,
    respectTimezone) emits ISO+offset for respect=true, UTC ISO of the picked
    calendar day for respect=false (aligns with the generic-data-index pipeline,
    which indexes naive date strings as UTC)
  - abstract/date/datetime object-data types: propagate respectTimezone; new
    DateGridCellPreview / DatetimeGridCellPreview render the grid cell with the
    server timezone when respect=false; fix datetime columnType union
  - date-time.ts: optional timeZone passed through to Intl
  - field-filter date component: reads field config via useDynamicFilter and
    uses formatFilterDate
  - batch-edit datetime component: reads field config from batchEdit and forwards
    respectTimezone + outputFormat + showTime to the shared DatePicker; same
    component handles both date and datetime since the backend FrontendType enum
    has a single DATETIME entry

Tests: 20 new Jest cases in date-picker-utils.test.ts (toServerWallClock /
toDayJs / fromDayJs / formatFilterDate) and 5 in date-time.test.ts (timeZone
forwarding to Intl). All pure-function tests, fast and host-tz-independent.

Companion PR in studio-backend-bundle: pimcore/studio-backend-bundle#1864.

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/utils/date-picker-utils.test.ts

@@ -0,0 +1,135 @@
+/**
+ * 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 } 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('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,65 @@
  */
 
 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`
+}
+
+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/batch-edits/components/datetime/dynamic-type-batch-edit-datetime-component.tsx

@@ -14,12 +14,35 @@ import { type AbstractBatchEditDefinition } from '@Pimcore/modules/element/dynam
 import { Form } from '@Pimcore/components/form/form'
 export interface DynamicTypeBatchEditDatetimeProps extends AbstractBatchEditDefinition {}
 
+/**
+ * Batch-edit picker for `date` and `datetime` fields. The backend's FrontendType only has DATETIME
+ * (no separate DATE), so this single component covers both — distinguished at runtime via
+ * `batchEdit.type` and the field-level config on `batchEdit.config.fieldDefinition`.
+ *
+ * Timezone semantics mirror the editor exactly:
+ *   - respectTimezone=true  → absolute instant; emit ISO with browser offset on save.
+ *   - respectTimezone=false → server-tz wall-clock; emit a naive string the backend's Carbon::parse
+ *                              interprets in the server timezone.
+ */
 export const DynamicTypeBatchEditDatetimeComponent = ({ batchEdit }: DynamicTypeBatchEditDatetimeProps): React.JSX.Element => {
-  const { key } = batchEdit
+  const { key, type } = batchEdit
+  const fieldDefinition = (batchEdit as { config?: { fieldDefinition?: Record<string, any> } }).config?.fieldDefinition
+  const isDateOnly = type === 'date'
+  const respectTimezone = isDateOnly
+    ? fieldDefinition?.columnType !== 'date'              // date field: 'date' columnType = wall-clock
+    : fieldDefinition?.respectTimezone !== false           // datetime field: explicit false flips
+  const outputFormat = respectTimezone
+    ? undefined
+    : (isDateOnly ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm')
 
   return (
     <Form.Item name={ key }>
-      <DatePicker outputType='timestamp' />
+      <DatePicker
+        outputFormat={ outputFormat }
+        outputType='dateString'
+        respectTimezone={ respectTimezone }
+        showTime={ isDateOnly ? undefined : { format: 'HH:mm' } }
+      />
     </Form.Item>
   )
 }

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

@@ -17,6 +17,20 @@ import { DateRangePicker } from '@Pimcore/components/date-picker/date-range-pick
 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 } from '@Pimcore/components/date-picker/utils/date-picker-utils'
+
+/**
+ *   - `date` field with `columnType:'date'` → wall-clock, anchored to the server timezone.
+ *   - `date` field with `columnType:'bigint(20)'` (default) → absolute instant.
+ *   - `datetime` field with `respectTimezone:false` → wall-clock, anchored to the server timezone.
+ *   - `datetime` field with `respectTimezone:true` (default) → absolute instant.
+ */
+const isRespectTimezone = (filterType: string | undefined, fieldDefinition: Record<string, any> | undefined): boolean => {
+  if (filterType === 'date') {
+    return fieldDefinition?.columnType !== 'date'
+  }
+  return fieldDefinition?.respectTimezone !== false
+}
 
 export enum DatePickerSettingValue {
   ON = 'on',
@@ -37,7 +51,9 @@ 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 fieldDefinition: Record<string, any> | undefined = (filterConfig as { fieldDefinition?: Record<string, any> } | undefined)?.fieldDefinition
+  const respectTimezone = isRespectTimezone(filterType, fieldDefinition)
 
   const data: DateValue = rawData ?? {
     setting: DatePickerSettingValue.ON,
@@ -92,9 +108,7 @@ 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 => {

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/types/abstract/dynamic-type-object-data-abstract-date.tsx

@@ -49,6 +49,7 @@ export abstract class DynamicTypeObjectDataAbstractDate extends DynamicTypeObjec
         inherited={ props.inherited }
         outputFormat={ props.respectTimezone !== false || outputType !== 'dateString' ? undefined : props.outputFormat }
         outputType={ outputType }
+        respectTimezone={ props.respectTimezone ?? undefined }
         showTime={ props.showTime }
         style={ { maxWidth: toCssDimension(props.defaultFieldWidth.small) } }
         value={ props.value }

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-date.tsx

@@ -24,11 +24,23 @@ import { isNumber } from 'lodash'
 import { type DynamicTypeFieldFilterAbstract } from '../../../field-filters/dynamic-type-field-filter-abstract'
 import { container } from '@Pimcore/app/depency-injection'
 import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
+import { isNonEmptyString } from '@Pimcore/utils/type-utils'
 
 export type DateObjectDataDefinition = AbstractDateObjectDataDefinition & {
   columnType: 'date' | 'bigint(20)'
 }
 
+const DateGridCellPreview = ({ value, respectTimezone }: { value: unknown, respectTimezone: boolean }): React.ReactElement => {
+  const { timezone } = useSettings()
+  const serverTimezone = isNonEmptyString(timezone) ? timezone : undefined
+  const formatted = (isNumber(value) || typeof value === 'string')
+    ? formatDate(value, respectTimezone ? undefined : serverTimezone)
+    : ''
+
+  return <GridCellPreviewWrapper>{formatted}</GridCellPreviewWrapper>
+}
+
 export class DynamicTypeObjectDataDate extends DynamicTypeObjectDataAbstractDate {
   id: string = 'date'
   gridCellEditMode: EditMode = 'edit-modal'
@@ -46,8 +58,13 @@ export class DynamicTypeObjectDataDate extends DynamicTypeObjectDataAbstractDate
   }
 
   getGridCellPreviewComponent (props: GetGridCellDefinitionProps): React.ReactElement {
-    const value = props.cellProps.getValue()
+    const columnType = (props.objectProps as DateObjectDataDefinition).columnType
 
-    return <GridCellPreviewWrapper>{(isNumber(value) || typeof value === 'string') ? formatDate(value) : ''}</GridCellPreviewWrapper>
+    return (
+      <DateGridCellPreview
+        respectTimezone={ columnType === 'bigint(20)' }
+        value={ props.cellProps.getValue() }
+      />
+    )
   }
 }