orn-ui
← All components
View as Markdown
Organism

DateField

Requires <UIProvider> — Getting Started →

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add date-field

Or install the whole package and import it

pnpm add orn-ui
import { DateField } from 'orn-ui/date-field';
Depends on:core (theme + icons)modalTypographyicon-buttonpressable-scaletransitiondate-pickerbutton

Usage

  • when to use — A date inside a form: it reads like an Input and opens the calendar in a modal.
  • format — How the chosen date reads in the field. Match your locale.
  • required / error — Same pattern as Input and Select.
  • modalTitle / clearLabel — The strings of the modal, for when the app is not in English.
Demo clip not recorded yet — see MEDIA.md

Variants

DateField — input that opens the calendar

<DateField label="Due date" value={fieldDate} onChange={setFieldDate} maxDate={inAMonth} />

DateField — custom format

<DateField
  label="ISO format"
  value={fieldDate}
  onChange={setFieldDate}
  format={(d) => d.toISOString().slice(0, 10)}
/>

DateField — onClear renders the clear button

<DateField
  label="Due date"
  value={fieldDate}
  onChange={setFieldDate}
  onClear={() => setFieldDate(undefined)}
/>

DateField — mode="range", closes when the range closes

<DateField label="Stay" mode="range" range={fieldRange} onRangeChange={setFieldRange} />

DateField — required + error

<DateField label="Due date" required onChange={() => {}} error="Pick a date to continue" />

DateField — disabled

<DateField label="Locked" value={today} onChange={() => {}} disabled />
Full demo source
const variants: VariantDef[] = [
  {
    label: 'Inline calendar',
    content: <DatePicker value={date} onChange={setDate} />,
  },
  {
    label: 'mode="range" — tap start, then end',
    content: (
      <View style={{ gap: 8 }}>
        <DatePicker mode="range" range={range} onRangeChange={setRange} />
        <Caption>
          {range?.start
            ? `${range.start.toDateString()} → ${range.end ? range.end.toDateString() : '…'}`
            : 'No range selected'}
        </Caption>
      </View>
    ),
  },
  {
    label: 'mode="range" + minDate/maxDate',
    content: <DatePicker mode="range" range={range} onRangeChange={setRange} minDate={today} maxDate={inAMonth} />,
  },
  {
    label: 'minDate / maxDate (next 7 days only)',
    content: <DatePicker value={ranged} onChange={setRanged} minDate={today} maxDate={inAWeek} />,
  },
  {
    label: 'Week starts on Monday',
    content: <DatePicker value={date} onChange={setDate} firstDayOfWeek={1} />,
  },
  {
    label: 'Localized month/weekday names',
    content: (
      <DatePicker
        value={date}
        onChange={setDate}
        monthNames={SPANISH_MONTHS}
        weekdayNames={SPANISH_WEEKDAYS}
        firstDayOfWeek={1}
      />
    ),
  },
  {
    label: 'DateField — input that opens the calendar',
    content: <DateField label="Due date" value={fieldDate} onChange={setFieldDate} maxDate={inAMonth} />,
  },
  {
    label: 'DateField — custom format',
    content: (
      <DateField
        label="ISO format"
        value={fieldDate}
        onChange={setFieldDate}
        format={(d) => d.toISOString().slice(0, 10)}
      />
    ),
  },
  {
    label: 'DateField — onClear renders the clear button',
    content: (
      <DateField
        label="Due date"
        value={fieldDate}
        onChange={setFieldDate}
        onClear={() => setFieldDate(undefined)}
      />
    ),
  },
  {
    label: 'DateField — mode="range", closes when the range closes',
    content: <DateField label="Stay" mode="range" range={fieldRange} onRangeChange={setFieldRange} />,
  },
  {
    label: 'DateField — required + error',
    content: <DateField label="Due date" required onChange={() => {}} error="Pick a date to continue" />,
  },
  {
    label: 'DateField — disabled',
    content: <DateField label="Locked" value={today} onChange={() => {}} disabled />,
  },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

NameTypeDefaultDescription
label?string——
required?booleanfalse—
mode?'single' | 'range'single'single' picks one date; 'range' picks an interval with two taps.
value?Date—Selected date in mode="single".
onChange?(date: Date) => void—Called in mode="single".
range?DateRange—Selected range in mode="range".
onRangeChange?(range: DateRange) => void—Called in mode="range", both when setting the start and when closing the range.
placeholder?stringSelect a date—
error?string——
disabled?booleanfalse—
format?(date: Date) => string"D de Month de YYYY" in EnglishFormats the date shown in the field.
modalTitle?stringthe `selectDate` from `useLabels()`Title of the calendar modal.
onClear?() => void—If provided, the modal shows a button that clears the selection and closes. Without this there's no button: the previous "Clear" only closed, without clearing anything.
clearLabel?stringthe `clear` from `useLabels()`Text for that button.
containerStyle?StyleProp<ViewStyle>——
minDate?Date——
maxDate?Date——
monthNames?string[]those from `useLabels()`Month names.
weekdayNames?string[]those from `useLabels()`Day initials, index 0 = Sunday.
firstDayOfWeek?0 | 100 = Sunday, 1 = Monday.
PreviousChartNextDatePicker