DateInput

Stable

Date field with segmented day, month and year entries and locale-aware ordering.

Installation

npm install @xaui/native

Import

import { DateInput, getDateOrder, dateInputValueToDate, dateToDateInputValue } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

import { DateInput } from '@xaui/native/input'

export function Example() {
  return <DateInput />
}

Basic Date Input

Date field with default locale-based ordering.

import { DateInput } from '@xaui/native/input'

export function BasicExample() {
  return <DateInput label="Birth date" />
}

Custom Order and Separator

Explicit segment order and separator character.

import { DateInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function FormatExample() {
  return (
    <Column gap={10}>
      <DateInput label="US format" dateOrder="MDY" separator="/" />
      <DateInput label="ISO format" dateOrder="YMD" separator="-" />
      <DateInput label="EU format" dateOrder="DMY" separator="." />
    </Column>
  )
}

Locale Auto-detection

Let the locale determine the date order automatically.

import { DateInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function LocaleExample() {
  return (
    <Column gap={10}>
      <DateInput label="English" locale="en-US" />
      <DateInput label="French" locale="fr-FR" />
      <DateInput label="Japanese" locale="ja-JP" />
    </Column>
  )
}

Controlled Date Input

Manage the date value with React state.

import { useState } from 'react'
import { DateInput } from '@xaui/native/input'

export function ControlledExample() {
  const [date, setDate] = useState('')

  return (
    <DateInput
      label="Appointment"
      value={date}
      onValueChange={setDate}
      dateOrder="DMY"
      separator="/"
    />
  )
}

Convert value to Date

Use dateInputValueToDate to parse the formatted string into a Date object (time set to 00:00:00.000).

import { dateInputValueToDate } from '@xaui/native/input'

const date = dateInputValueToDate('25/01/2024', 'DMY', '/')
// → Date { 2024-01-25T00:00:00.000 }

const invalid = dateInputValueToDate('31/02/2024', 'DMY', '/')
// → null

Convert Date to value

Use dateToDateInputValue to format a Date or ISO string into the value format expected by DateInput.

import { dateToDateInputValue } from '@xaui/native/input'

dateToDateInputValue(new Date(2024, 0, 25), 'DMY', '/')
// → "25/01/2024"

dateToDateInputValue(new Date(2024, 0, 25), 'YMD', '-')
// → "2024-01-25"

dateToDateInputValue('2024-01-25T00:00:00.000Z', 'MDY', '.')
// → "01.25.2024"