309

Date Time Range Field

PreviousNext

Date Time Range Field allows user to enter date and time value for a range of dates.

Docs
import {
  DateTimeRangeField,
  DateTimeRangeFieldAmPm,

Installation

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

Usage

import {
  DateTimeRangeField,
  DateTimeRangeFieldAmPm,
  DateTimeRangeFieldDays,
  DateTimeRangeFieldFrom,
  DateTimeRangeFieldHours,
  DateTimeRangeFieldMinutes,
  DateTimeRangeFieldMonths,
  DateTimeRangeFieldSeconds,
  DateTimeRangeFieldSeparator,
  DateTimeRangeFieldTo,
  DateTimeRangeFieldYears,
} from "@/components/ui/date-time-range-field";
<DateTimeRangeField>
  <DateTimeRangeFieldFrom>
    <DateTimeRangeFieldDays />
    <DateTimeRangeFieldSeparator>/</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldMonths />
    <DateTimeRangeFieldSeparator>/</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldYears />
    <DateTimeRangeFieldSeparator>·</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldHours />
    <DateTimeRangeFieldSeparator>:</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldMinutes />
    <DateTimeRangeFieldSeparator>:</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldSeconds />
    <DateTimeRangeFieldAmPm />
  </DateTimeRangeFieldFrom>
 
  <DateTimeRangeFieldSeparator>-</DateTimeRangeFieldSeparator>
 
  <DateTimeRangeFieldTo>
    <DateTimeRangeFieldDays />
    <DateTimeRangeFieldSeparator>/</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldMonths />
    <DateTimeRangeFieldSeparator>/</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldYears />
    <DateTimeRangeFieldSeparator>·</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldHours />
    <DateTimeRangeFieldSeparator>:</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldMinutes />
    <DateTimeRangeFieldSeparator>:</DateTimeRangeFieldSeparator>
    <DateTimeRangeFieldSeconds />
    <DateTimeRangeFieldAmPm />
  </DateTimeRangeFieldTo>
</DateTimeRangeField>

Examples

Default

import {
  DateTimeRangeField,
  DateTimeRangeFieldAmPm,

Form

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

Schedule your event by selecting a start and end date.

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. Since the range spans two groups of segments, prefer one visible label for the whole field, or label the From and To groups individually with aria-label when they need distinct names.

API Reference

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

DateTimeRangeField

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

DateTimeRangeFieldFrom, DateTimeRangeFieldTo

Wrap From and To. Segments must be placed inside one of the two.

DateTimeRangeFieldDays, DateTimeRangeFieldMonths, DateTimeRangeFieldYears, DateTimeRangeFieldHours, DateTimeRangeFieldMinutes, DateTimeRangeFieldSeconds

Wrap the corresponding segments, rendered with the Date Time Field segment styling and placeholders.

DateTimeRangeFieldAmPm

Wraps AmPm; renders only when its field has hour12.

DateTimeRangeFieldSeparator

Wraps the styled Date Time Field separator. Pass the separator character as children (e.g. /, : or - between the two fields).