Docs
Components
Date Field

Date Field

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.

Docs

Preview

Code

Event date

mmddyyyy

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/date-field

Anatomy

Single import

Multiple imports

import { DateField } from "~/components/ui/date-field";

<DateField.Root>
  <Label />
  <DateField.Input>
    {(segment) => <DateField.Segment segment={segment} />}
  </DateField.Input>
</DateField.Root>;

Examples

Disabled

Preview

Code

Event date

mmddyyyy

Timezone

Under Construction

This component is currently being built. Check back soon for updates!

Granularity

Under Construction

This component is currently being built. Check back soon for updates!

Form

Under Construction

This component is currently being built. Check back soon for updates!

API Reference

DateField.Root

Prop	Type	Default
`value`	`DateValue`
`defaultValue`	`DateValue`
`onChange`	`function`
`minValue`	`DateValue`
`maxValue`	`DateValue`
`granularity`	`enum`
`isDisabled`	`boolean`
`isReadOnly`	`boolean`
`isRequired`	`boolean`
`isInvalid`	`boolean`
`hideTimeZone`	`boolean`
`hourCycle`	`enum`

DateField.Input

Prop	Type	Default
`children`	`function`

DateField.Segment

Prop	Type	Default
`segment`	`DateSegment`
`className`	`string`

Collapsible Dialog

On This Page

Installation
Anatomy
Examples
Disabled
Timezone
Granularity
Form
API Reference
DateField.Root
DateField.Input
DateField.Segment

Contribute