Command Palette

Search for a command to run...

GitHubGitHub

Date Field

Date Field allows user to enter date value.

Docs
Open in Open in v0

Installation

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/date-field.json

Usage

import {
  DateField,
  DateFieldDays,
  DateFieldMonths,
  DateFieldSeparator,
  DateFieldYears,
} from "@/components/ui/date-field";
<DateField>
  <DateFieldDays />
  <DateFieldSeparator />
  <DateFieldMonths />
  <DateFieldSeparator />
  <DateFieldYears />
</DateField>

Examples

Default

Open in Open in v0

Form

Open in Open in v0

Your date of birth is used to calculate your age.

Control Group

A component for grouping form controls like text inputs, buttons, selects and other elements into a single cohesive unit.

Date Time Field

Date Time Field allows user to enter date and time value.