309

Date Field

PreviousNext

Date Field allows user to enter date value.

Docs
import {
  DateField,
  DateFieldDays,

Installation

pnpm dlx shadcn@latest add junwen-k/ui-x/date-field

Usage

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

Examples

Default

import {
  DateField,
  DateFieldDays,

Form

Personal information
Tell us a little bit about yourself.

Your date of birth is used to calculate your age.

import { Button } from "@/components/ui/button";
import {
  Card,

Accessibility

The field follows the segment keyboard model and labeling guidance described in the Date Time Field accessibility section.

API Reference

A date-only preset of the Date Time Field — each part wraps its Date Time Field counterpart and accepts the same props.

DateField

Wraps DateTimeField and accepts all of the Root props (value, onValueChange, minDate, maxDate, …).

DateFieldDays, DateFieldMonths, DateFieldYears

Wrap the corresponding segments with their default placeholders (dd, mm, yyyy).

DateFieldSeparator

Wraps the separator with / as the default children.