---
title: "DateField"
description: "A date or a time typed segment by segment, in the order and format of the locale. Use DatePicker when people should also see a calendar."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DateField

## Date

```tsx
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.

```tsx
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

```tsx
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`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/date-field/date-field.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/pickers/date-field/index.mdx