308

Date Time Field

PreviousNext

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

Docs
import {
  DateTimeField,
  DateTimeFieldAmPm,

Installation

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

Usage

import {
  DateTimeField,
  DateTimeFieldAmPm,
  DateTimeFieldDays,
  DateTimeFieldHours,
  DateTimeFieldMinutes,
  DateTimeFieldMonths,
  DateTimeFieldSeconds,
  DateTimeFieldSeparator,
  DateTimeFieldYears,
} from "@/components/ui/date-time-field";
<DateTimeField>
  <DateTimeFieldDays />
  <DateTimeFieldSeparator>/</DateTimeFieldSeparator>
  <DateTimeFieldMonths />
  <DateTimeFieldSeparator>/</DateTimeFieldSeparator>
  <DateTimeFieldYears />
  <DateTimeFieldSeparator>·</DateTimeFieldSeparator>
  <DateTimeFieldHours />
  <DateTimeFieldSeparator>:</DateTimeFieldSeparator>
  <DateTimeFieldMinutes />
  <DateTimeFieldSeparator>:</DateTimeFieldSeparator>
  <DateTimeFieldSeconds />
  <DateTimeFieldAmPm />
</DateTimeField>

Examples

Default

import {
  DateTimeField,
  DateTimeFieldAmPm,

Form

Schedule your event
Let attendees know when your event takes place.

Schedule your event by selecting a date and time.

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

Accessibility

Labeling

Each segment is an individual <input>, so the field needs a group label: associate a visible label with the field (for example via <Field> and <FieldLabel> in forms), or label the group with aria-labelledby. Separators are decorative and hidden from assistive technology with aria-hidden.

Keyboard interactions

KeyDescription
ArrowLeft ArrowRightMoves focus to the previous / next segment.
ArrowUp ArrowDownIncrements / decrements the focused segment.
0–9Types a value into the segment, advancing to the next when complete.
A PSets the meridiem segment to AM / PM.
Backspace DeleteClears the focused segment.

API Reference

Styled wrappers around the Date Time Field primitive — see the primitive page for the full prop tables.

DateTimeField

Wraps Root and accepts all of its props (value, onValueChange, hour12, minDate, maxDate, …), rendered as an Input Group.

DateTimeFieldDays, DateTimeFieldMonths, DateTimeFieldYears, DateTimeFieldHours, DateTimeFieldMinutes, DateTimeFieldSeconds

Wrap the corresponding segments with input styling and default placeholders (dd, mm, yyyy and -- for the time segments).

DateTimeFieldAmPm

Wraps AmPm; renders only when the field has hour12.

DateTimeFieldSeparator

Wraps Separator with muted styling. Pass the separator character as children (e.g. / or :).