Chakra UI DatePicker v2 retains browser time‑zone in returned Date despite locale setting

Answer

Chakra UI’s DatePicker v2 does not expose any prop or configuration flag that forces the onChange callback to return a UTC Date. The returned value is always a Date set to midnight in the browser’s local time‑zone.

Why the locale setting does not change the timezone

The locale prop (e.g., locale='fr-FR') only influences the calendar’s display formatting—month names, day names, first‑of‑week, etc. It does not affect how the internal Date object is created, so the timezone of the returned value remains tied to the user’s environment.

Recommended pattern for UTC conversion

1. Keep the locale prop for proper UI localization.
2. In the onChange handler, convert the received local‑midnight Date to a UTC instant using a timezone‑aware library such as date‑fns‑tz:

import { zonedTimeToUtc } from 'date-fns-tz';

function handleChange(date) {
  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const utcDate = zonedTimeToUtc(date, timeZone);
  // utcDate now represents the same instant but expressed in UTC
  console.log('UTC date:', utcDate.toISOString());
}

If you prefer not to add a dependency, you can obtain the ISO string and treat it as UTC:

function handleChange(date) {
  const iso = date.toISOString(); // already in UTC
  // Store or send iso directly; avoid new Date(iso) if you need a UTC‑based Date
}

Verification steps

• Render <DatePicker locale='fr-FR' onChange={d => console.log('raw:', d, 'ISO:', d.toISOString())} />, select a date, and confirm the logged Date’s hours/minutes/seconds are zero and correspond to the browser’s local midnight.
• Apply the conversion snippet above and verify that utcDate.toISOString() matches the original date’s ISO string shifted to UTC (i.e., the same instant).
• Check the Chakra UI GitHub releases and roadmap (up to mid‑2024) for any mention of a timezone‑aware DatePicker feature; none is present.

Roadmap outlook

As of the latest public documentation and roadmap, Chakra UI has not announced a timezone‑aware mode or a UTC‑output flag for the DatePicker v2 in any upcoming release.