DateTimeInput

Stable

Combined date and time field in a single segmented input.

Installation

npm install @xaui/native

Import

import { DateTimeInput, getDateOrder, dateTimeInputValueToDate, dateToDateTimeInputValue } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Basic DateTimeInput

Combined date and time entry in a single field.

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

export function BasicExample() {
  return <DateTimeInput label="Appointment" />
}

Custom Format

Set date order, separator, hour cycle, and granularity.

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

export function FormatExample() {
  return (
    <DateTimeInput
      label="Reminder"
      dateOrder="DMY"
      separator="/"
      hourCycle={24}
      granularity="minute"
    />
  )
}

With Seconds

Include the seconds segment for precise time entry.

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

export function WithSecondsExample() {
  return (
    <DateTimeInput
      label="Timestamp"
      dateOrder="YMD"
      separator="-"
      hourCycle={24}
      granularity="second"
    />
  )
}

Controlled DateTimeInput

Manage the combined value with React state.

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

export function ControlledExample() {
  const [value, setValue] = useState('')

  return (
    <DateTimeInput
      label="Event date & time"
      value={value}
      onValueChange={setValue}
      dateOrder="DMY"
      separator="/"
      hourCycle={24}
    />
  )
}

Convert value to Date

Use dateTimeInputValueToDate to parse the formatted string into a Date object.

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

dateTimeInputValueToDate('25/01/2024 14:30', 'DMY', { separator: '/' })
// → Date { 2024-01-25T14:30:00.000 }

dateTimeInputValueToDate('2024-01-25 02:30 PM', 'YMD', { separator: '-', hourCycle: 12 })
// → Date { 2024-01-25T14:30:00.000 }

dateTimeInputValueToDate('31/02/2024 10:00', 'DMY', { separator: '/' })
// → null (invalid date)

Convert Date to value

Use dateToDateTimeInputValue to format a Date or ISO string into the value format expected by DateTimeInput.

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

dateToDateTimeInputValue(new Date(2024, 0, 25, 14, 30, 0), 'DMY', { separator: '/' })
// → "25/01/2024 14:30"

dateToDateTimeInputValue(new Date(2024, 0, 25, 14, 30, 45), 'YMD', {
  separator: '-',
  granularity: 'second',
  hourCycle: 12,
})
// → "2024-01-25 02:30:45 PM"