Docs
Date Time Range Field
Date Time Range Field
Date Time Field allows user to enter date and time value for a range of dates.
Installation
npx shadcn@latest add https://ui-x.junwen-k.dev/r/date-time-range-field.jsonUsage
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>