1. Docs
  3. Components
  5. 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 ediTabs.le segment.

Docs

Component date-field-demo not found in registry.

Installation

npx shadcn@latest add @kanpeki/date-field

Anatomy

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

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

Examples

Time

Component date-field-time not found in registry.

Form

Component date-field-form not found in registry.

CollapsibleDialog