# Date Input

URL: https://ark-ui.com/docs/components/date-input
LLM: https://ark-ui.com/llms.txt/components/date-input

A segment-based date input that allows users to enter dates by navigating individual date parts.

---



## Anatomy



```tsx
<DateInput.Root>
  <DateInput.Label />
  <DateInput.Control>
    <DateInput.SegmentGroup>
      <DateInput.Segment />
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>
```

## Examples

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Basic = () => (
  <DateInput.Root className={styles.Root}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Default Value

Use the `defaultValue` prop with `parseDate` to set the initial date value.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const DefaultValue = () => (
  <DateInput.Root className={styles.Root} defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Controlled

Use the `value` and `onValueChange` props to control the date input's value programmatically.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate, type DateValue } from '@internationalized/date'
import { useState } from 'react'
import styles from 'styles/date-input.module.css'

export const Controlled = () => {
  const [value, setValue] = useState<DateValue[]>([parseDate('2024-06-15')])

  return (
    <DateInput.Root className={styles.Root} value={value} onValueChange={(details) => setValue(details.value)}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  )
}
```

### Root Provider

An alternative way to control the date input is to use the `RootProvider` component and the `useDateInput` hook. This
way you can access the state and methods from outside the component.

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const RootProvider = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <output>{dateInput.valueAsString.length > 0 ? dateInput.valueAsString : 'N/A'}</output>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}
```

### Granularity

Use the `granularity` prop to control which date fields are displayed. Supported values are `day`, `hour`, `minute`, and
`second`.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Granularity = () => (
  <DateInput.Root className={styles.Root} granularity="second">
    <DateInput.Label className={styles.Label}>Date & Time</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Time Only

To create a time-only input, set `granularity` to `minute` (or `second`) and provide a `formatter` that only includes
time fields. Use the `hourCycle` prop to switch between 12 and 24 hour formats.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

const timeFormatter = new DateFormatter('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
})

export const TimeOnly = () => (
  <DateInput.Root
    className={styles.Root}
    granularity="minute"
    hourCycle={24}
    formatter={timeFormatter}
    timeZone={getLocalTimeZone()}
  >
    <DateInput.Label className={styles.Label}>Time</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Range

To create a date input that allows a range selection, set the `selectionMode` prop to `range` and render two
`SegmentGroup` components with `index` props set to `0` and `1`.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Range = () => (
  <DateInput.Root className={styles.Root} selectionMode="range">
    <DateInput.Label className={styles.Label}>Date Range</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup index={0} className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
      <span>→</span>
      <DateInput.SegmentGroup index={1} className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput index={0} />
    <DateInput.HiddenInput index={1} />
  </DateInput.Root>
)
```

### Min and Max

Use the `min` and `max` props with `parseDate` to restrict the selectable date range. Dates outside this range will be
marked as invalid.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const MinMax = () => (
  <DateInput.Root className={styles.Root} min={parseDate('2024-01-01')} max={parseDate('2024-12-31')}>
    <DateInput.Label className={styles.Label}>Date (2024 only)</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Disabled

Use the `disabled` prop to prevent user interaction with the date input.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const Disabled = () => (
  <DateInput.Root className={styles.Root} disabled defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Read Only

Use the `readOnly` prop to make the date input non-editable while still being focusable.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const ReadOnly = () => (
  <DateInput.Root className={styles.Root} readOnly defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Invalid

Use the `invalid` prop to indicate an error state on the date input.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Invalid = () => (
  <DateInput.Root className={styles.Root} invalid>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)
```

### Leading Zeros

Use the `shouldForceLeadingZeros` prop to toggle whether numeric segments are padded with a leading zero.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import { useState } from 'react'
import styles from 'styles/date-input.module.css'

export const LeadingZeros = () => {
  const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = useState(true)

  return (
    <div className="stack">
      <label className={styles.CheckboxLabel}>
        <input
          className={styles.Checkbox}
          checked={shouldForceLeadingZeros}
          onChange={(event) => setShouldForceLeadingZeros(event.target.checked)}
          type="checkbox"
        />
        Force leading zeros
      </label>
      <DateInput.Root
        className={styles.Root}
        defaultValue={[parseDate('2024-06-05')]}
        shouldForceLeadingZeros={shouldForceLeadingZeros}
      >
        <DateInput.Label className={styles.Label}>Date</DateInput.Label>
        <DateInput.Control className={styles.Control}>
          <DateInput.SegmentGroup className={styles.SegmentGroup}>
            <DateInput.SegmentContext>
              {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
            </DateInput.SegmentContext>
          </DateInput.SegmentGroup>
        </DateInput.Control>
        <DateInput.HiddenInput />
      </DateInput.Root>
    </div>
  )
}
```

### Localized

Use the `locale` prop to set the language and regional formatting of the date segments.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/date-input.module.css'

export const Localized = () => (
  <LocaleProvider locale="fr-FR">
    <DateInput.Root className={styles.Root} granularity="minute" hourCycle={24}>
      <DateInput.Label className={styles.Label}>Date et heure</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)
```

### RTL

Set the `dir` prop to `rtl` for right-to-left language support.

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/date-input.module.css'

export const RTL = () => (
  <LocaleProvider locale="ar-SA">
    <DateInput.Root className={styles.Root} dir="rtl">
      <DateInput.Label className={styles.Label}>التاريخ</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)
```

### With Clear Button

Use `useDateInput` via `RootProvider` to access the `clearValue` method and render a clear button alongside the input.

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import { XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/date-input.module.css'

export const WithClearButton = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
        <button aria-label="Clear date" className={button.Root} type="button" onClick={() => dateInput.clearValue()}>
          <XIcon />
        </button>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}
```

### With Date Picker

Combine `DateInput` with `DatePicker` by syncing their values using `onValueChange` to provide both typed and
calendar-based date selection.

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import { DatePicker, useDatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import styles from 'styles/date-input.module.css'
import datePickerStyles from 'styles/date-picker.module.css'

export const WithDatePicker = () => {
  const datePicker = useDatePicker()
  const dateInput = useDateInput({
    value: datePicker.value,
    onValueChange(details) {
      datePicker.setValue(details.value)
    },
  })

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DatePicker.RootProvider className={datePickerStyles.Root} value={datePicker}>
          <DatePicker.Control className={datePickerStyles.Control}>
            <DateInput.SegmentGroup className={styles.SegmentGroup}>
              <DateInput.Context>
                {(dateInput) =>
                  dateInput
                    .getSegments()
                    .map((segment, index) => (
                      <DateInput.Segment
                        className={styles.Segment}
                        key={`${segment.type}-${index}`}
                        segment={segment}
                      />
                    ))
                }
              </DateInput.Context>
            </DateInput.SegmentGroup>
            <DatePicker.Trigger className={datePickerStyles.Trigger}>
              <CalendarIcon />
            </DatePicker.Trigger>
          </DatePicker.Control>
          <Portal>
            <DatePicker.Positioner>
              <DatePicker.Content className={datePickerStyles.Content}>
                <DatePicker.View view="day" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableHead className={datePickerStyles.TableHead}>
                            <DatePicker.TableRow className={datePickerStyles.TableRow}>
                              {datePicker.weekDays.map((weekDay, id) => (
                                <DatePicker.TableHeader className={datePickerStyles.TableHeader} key={id}>
                                  {weekDay.short}
                                </DatePicker.TableHeader>
                              ))}
                            </DatePicker.TableRow>
                          </DatePicker.TableHead>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.weeks.map((week, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {week.map((day, id) => (
                                  <DatePicker.TableCell className={datePickerStyles.TableCell} key={id} value={day}>
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {day.day}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="month" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {months.map((month, id) => (
                                  <DatePicker.TableCell
                                    className={datePickerStyles.TableCell}
                                    key={id}
                                    value={month.value}
                                  >
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {month.label}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="year" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {years.map((year, id) => (
                                  <DatePicker.TableCell
                                    className={datePickerStyles.TableCell}
                                    key={id}
                                    value={year.value}
                                  >
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {year.label}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
              </DatePicker.Content>
            </DatePicker.Positioner>
          </Portal>
        </DatePicker.RootProvider>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`allSegments`**
Type: `Partial<{
  year: boolean
  month: boolean
  day: boolean
  hour: boolean
  minute: boolean
  second: boolean
  dayPeriod: boolean
  era: boolean
  literal: boolean
  timeZoneName: boolean
  weekday: boolean
  unknown: boolean
  fractionalSecond: boolean
}>`
Required: false
Default Value: `undefined`
Description: The computed segments map for the formatter.

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`createCalendar`**
Type: `(identifier: CalendarIdentifier) => Calendar`
Required: false
Default Value: `undefined`
Description: A function that creates a calendar object for a given calendar identifier.
Use this to support non-Gregorian calendars (e.g., Persian, Islamic, Buddhist).

**`defaultPlaceholderValue`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The initial placeholder date when rendered.

**`defaultValue`**
Type: `DateValue[]`
Required: false
Default Value: `undefined`
Description: The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s).

**`dir`**
Type: `'ltr' | 'rtl'`
Required: false
Default Value: `"ltr"`
Description: The document's text/writing direction.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date input is disabled.

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The `form` attribute of the hidden input element.

**`format`**
Type: `(date: DateValue, details: FormatDateDetails) => string`
Required: false
Default Value: `undefined`
Description: The format function for converting a DateValue to a string.

**`formatter`**
Type: `DateFormatter`
Required: false
Default Value: `undefined`
Description: The date formatter to use.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Required: false
Default Value: `undefined`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

**`granularity`**
Type: `DateGranularity`
Required: false
Default Value: `"day"`
Description: Determines the smallest unit that is displayed in the date input.

**`hideTimeZone`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to hide the time zone segment when the value is a `ZonedDateTime`.
Has no effect for values without a time zone.

**`hourCycle`**
Type: `HourCycle`
Required: false
Default Value: `undefined`
Description: Whether to use 12-hour or 24-hour time format.
By default, this is determined by the locale.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  label: (index: number) => string
  control: string
  segmentGroup: (index: number) => string
  hiddenInput: (index: number) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the date input. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date input is invalid

**`isDateUnavailable`**
Type: `(date: DateValue, locale: string) => boolean`
Required: false
Default Value: `undefined`
Description: Returns whether a date is unavailable.
When a committed date matches, the input is marked as invalid.

**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The locale (BCP 47 language tag) to use when formatting the date.

**`max`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The maximum date that can be selected.

**`min`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The minimum date that can be selected.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The `name` attribute of the input element.

**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: A function called when the date input gains or loses focus.

**`onPlaceholderChange`**
Type: `(details: PlaceholderChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: A function called when the placeholder value changes.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the value changes.

**`placeholderValue`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The controlled placeholder date.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date input is read-only.

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date input is required

**`selectionMode`**
Type: `SelectionMode`
Required: false
Default Value: `"single"`
Description: The selection mode of the date input.
- `single` - only one date can be entered
- `range` - a range of dates can be entered (start and end)

**`shouldForceLeadingZeros`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to always show leading zeros in month, day, and hour fields.
When false, formatting follows the locale default (e.g. "1" instead of "01").

**`timeZone`**
Type: `string`
Required: false
Default Value: `"UTC"`
Description: The time zone to use

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The localized messages to use.

**`value`**
Type: `DateValue[]`
Required: false
Default Value: `undefined`
Description: The controlled selected date(s).

#### Data Attributes

**`data-scope`**: date-input
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: date-input
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused

### HiddenInput

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`index`**
Type: `number`
Required: false
Default Value: `undefined`
Description: undefined

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: date-input
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid

### RootProvider

#### Props

**`value`**
Type: `DateInputApi<PropTypes>`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### SegmentGroup

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`index`**
Type: `number`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: date-input
**`data-part`**: segment-group
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused

### Segment

#### Props

**`segment`**
Type: `DateSegment`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: date-input
**`data-part`**: segment
**`data-type`**: The type of the item
**`data-readonly`**: Present when read-only
**`data-disabled`**: Present when disabled
**`data-value`**: The value of the item
**`data-editable`**: 
**`data-placeholder-shown`**: Present when placeholder is shown

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `focused` | `boolean` | Whether the date input is focused |
| `disabled` | `boolean` | Whether the date input is disabled |
| `invalid` | `boolean` | Whether the date input is invalid |
| `value` | `DateValue[]` | The selected date(s). |
| `valueAsDate` | `Date[]` | The selected date(s) as Date objects. |
| `valueAsString` | `string[]` | The selected date(s) as strings. |
| `placeholderValue` | `DateValue` | The placeholder date. |
| `displayValues` | `IncompleteDate[]` | Per-group editing state. Each IncompleteDate tracks which segments have been
filled in by the user (non-null = entered, null = placeholder). |
| `focus` | `VoidFunction` | Focuses the first segment. |
| `setValue` | `(values: DateValue[]) => void` | Sets the selected date(s) to the given values. |
| `clearValue` | `VoidFunction` | Clears the selected date(s). |
| `getSegments` | `(props?: SegmentsProps | undefined) => DateSegment[]` | Returns the segments for the given index. |
| `getSegmentState` | `(props: SegmentProps) => SegmentState` | Returns the state details for a given segment. |


## Accessibility

Complies with the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).