Date Field

A date field allows users to enter and edit date values using a keyboard.

mmddyyyy

<DateField aria-label="Meeting date">
  <DateInput />
</DateField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/date-field

Usage

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>

Playground

Use the controls below to experiment with different date field props and see the live preview and code update.

Date

mmddyyyy

label

isDisabled

isReadOnly

isInvalid

<DateField>
  <Label>Date</Label>
  <DateInput />
</DateField>

Examples

mmddyyyy

small (sm)

mmddyyyy

medium (md)

mmddyyyy

large (lg)

mmddyyyy

Meeting date

mmddyyyy

Appointment date

mmddyyyy

Please select a date.

Event date

mmddyyyy

Please select a date.

Meeting date

mmddyyyy

Hour

4720216PMUTC

Minute

472021645PMUTC

Second

47202164522PMUTC

mmddyyyy––––

11720221245AMPST

Appointment time

11720221045AM

mmddyyyy

Event date

mmddyyyy

111980

mmddyyyy

232020

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`	`—`
	`((date: DateValue) => boolean)`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`T \| null`	`—`
	`DOMRenderFunction<"div", DateFieldRenderProps>`	`—`
	`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"`
	`DOMRenderFunction<"div", DateInputRenderProps>`	`—`

Last updated on 5/22/2026