# منتقي التاريخ: صيغة القيمة والمنطقة الزمنية

> Write the slotsmith DatePicker's value as DD/MM/YYYY, as an instant in a time zone, or your own way, and set the zone the calendar works in.

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.

```tsx
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`](https://slotsmith.dev/ar/components/date-picker/api/#props) is how every day the picker exchanges with you is written: `value`, `defaultValue`, `onChange`, `minDate`, `maxDate`, the [presets](https://slotsmith.dev/ar/components/date-picker/guides/presets/), and the day [`disabledDates`](https://slotsmith.dev/ar/components/date-picker/guides/bounds-and-blocked-days/) 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`](https://slotsmith.dev/ar/components/date-picker/api/#props) and the locale, as before. `createValueCodec(format, timeZone)` returns the same reader and writer, for your own code.

## timeZone

[`timeZone`](https://slotsmith.dev/ar/components/date-picker/api/#props) 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)`.