On this page
Date
mm/dd/yyyy
Props
<DateField>
<Label>Date</Label>
<DateInput />
</DateField>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/date-fieldUsage
Use DateField to allow users to enter and edit date values using a keyboard.
import { DateField } from '@/components/ui/date-field'
import { DateInput } from '@/components/ui/input'
import { Label } from '@/components/ui/field'<DateField>
<Label>Date</Label>
<DateInput />
</DateField>Examples
mm/dd/yyyy
small (sm)
mm/dd/yyyy
medium (md)
mm/dd/yyyy
large (lg)
mm/dd/yyyy
Meeting date
mm/dd/yyyy
Appointment date
mm/dd/yyyy
Please select a date.Event date
mm/dd/yyyy
Please select a date.Meeting date
mm/dd/yyyy
Hour
4/7/2021, 6 PM UTC
Minute
4/7/2021, 6:45 PM UTC
Second
4/7/2021, 6:45:22 PM UTC
mm/dd/yyyy, ––:––
11/7/2022, 12:45 AM PST
Appointment time
11/7/2022, 10:45 AM
mm/dd/yyyy
mm/dd/yyyy
Event date
mm/dd/yyyy
1/1/1980
mm/dd/yyyy
2/3/2020
2/3/2020
selected date: 2020-02-03
API Reference
DateField
A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Granularity | — | ||
boolean | false | ||
12 | 24 | — | ||
function | — | ||
boolean | — | ||
boolean | — | ||
T | null | — | ||
boolean | — | ||
T | null | — | ||
T | null | — | ||
function | — | ||
DateInput
A date input groups the editable date segments within a date field.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | "md" | ||
DateSegment
A date segment displays an individual unit of a date and time, and allows users to edit the value by typing or using the arrow keys to increment and decrement.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Last updated on 6/16/2026