Date picker: Value format and time zone

The slotsmith date picker’s value is an ISO string by default: the instant the day starts in its time zone. valueFormat makes it the calendar day alone, another pattern or your own format, and timeZone sets the calendar’s zone, as react-day-picker’s timeZone does.

import { useState } from "react";
import { DatePicker } from "slotsmith/date-picker";

export default function ValueFormat() {
  // The value is written the way the form already stores dates.
  const [due, setDue] = useState<string | null>("15/04/2026");
  // An instant: the day starts at midnight in Tokyo, whatever the reader's own zone.
  const [launch, setLaunch] = useState<string | null>(null);

  return (
    <div style={{ display: "grid", gap: "1rem", maxWidth: "20rem" }}>
      <label>
        Due date
        <DatePicker valueFormat="DD/MM/YYYY" value={due} onChange={setDue} minDate="01/04/2026" />
      </label>
      <p dir="ltr">value: {JSON.stringify(due)}</p>

      <label>
        Launch (Tokyo)
        <DatePicker timeZone="Asia/Tokyo" valueFormat="iso-datetime" value={launch} onChange={setLaunch} />
      </label>
      <p dir="ltr">value: {JSON.stringify(launch)}</p>
    </div>
  );
}

The first picker reads and writes DD/MM/YYYY. The second works in Tokyo: pick a day and its value is the instant that day starts there.

valueFormat

valueFormat is how every day the picker exchanges with you is written: value, defaultValue, onChange, minDate, maxDate, the presets, and the day disabledDates is asked about. It takes:

• "iso-datetime", the default: the instant the day starts in timeZone, such as "2026-03-12T00:00:00+09:00". Any ISO instant is read as the day it falls on in that zone, so "2026-03-12T20:00:00Z" is March 13th in Tokyo. Text without a zone, such as "2026-03-12", is that day on the calendar.
• A pattern of YYYY, MM, M, DD and D; anything else is kept as it is. "YYYY-MM-DD" is the calendar day alone, the same day in every zone; "DD/MM/YYYY", "M/D/YYYY" and "YYYY.MM.DD" work too. Text that is not a real day (February 31st, a typo) reads as no value.
• An object with format(day) and parse(text), for any other format: format turns a YYYY-MM-DD day into your text, and parse reads it back, returning null for text that is not a day.

In range mode both ends use the format, and in multiple mode every day does. The text in the trigger is unchanged: it follows format and the locale, as before. createValueCodec(format, timeZone) returns the same reader and writer, for your own code.

timeZone

timeZone is the zone the calendar works in: an IANA name such as "Asia/Tokyo" or "America/New_York", "UTC", or a fixed offset such as "+09:00". Without it the browser’s own zone is used.

• Today is today in that zone: the day marked as today, the month the calendar opens on when nothing is picked, and the day “Go to today” goes to.
• A picked day is the instant it starts in that zone, and an incoming instant is read as the day it falls on there. Days that start on a daylight-saving change get the offset in force at midnight.

With a pattern such as "YYYY-MM-DD" the value is a calendar day, the same in every zone, so timeZone changes only what today is. The library also exports todayIn(timeZone) and dayInZone(date, timeZone).