DateField | Arbol UI

Language

Appearance

Date

Birth date

4121987

As on the patient's ID document.

import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
import { DateField } from '@arbol-ai/ui';

<DateField
  className="max-w-xs"
  defaultValue={new CalendarDate(1987, 4, 12)}
  description="As on the patient's ID document."
  label="Birth date"
  maxValue={today(getLocalTimeZone())}
/>

Time in 24 hours

hourCycle overrides the locale, for an app that always shows 24 hours.

Opens at

0800

Closes at

1830

import { Time } from '@internationalized/date';
import { TimeField } from '@arbol-ai/ui';

<div className="flex max-w-sm gap-3">
  <TimeField defaultValue={new Time(8, 0)} hourCycle={24} label="Opens at" />
  <TimeField defaultValue={new Time(18, 30)} hourCycle={24} label="Closes at" />
</div>

Invalid

Ends on

mmddyyyy

The campaign must end after it starts.

import { DateField } from '@arbol-ai/ui';

<DateField
  className="max-w-xs"
  errorMessage="The campaign must end after it starts."
  isInvalid
  label="Ends on"
/>

Source

The examples above are src/components/date-field/date-field.examples.tsx, which the library’s tests render too.