Docs
Date Time Range Field Primitive

Date Time Range Field Primitive

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

DocsAPI Reference

About

The <DateTimeRangeFieldPrimitive /> component is built on top of timescape, wrapping the library to deliver a more consistent API that aligns with Radix UI conventions.

Installation

npx shadcn@latest add https://ui-x.junwen-k.dev/r/date-time-range-field-primitive.json

Anatomy

Import all parts and piece them together.

import * as DateTimeRangeFieldPrimitive from "@/components/ui/date-time-range-field-primitive"
 
export default () => (
  <DateTimeRangeFieldPrimitive.Root>
    <DateTimeRangeFieldPrimitive.From>
      <DateTimeRangeFieldPrimitive.Days />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Months />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Years />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Hours />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Minutes />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Seconds />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.AmPm />
    </DateTimeRangeFieldPrimitive.From>
 
    <DateTimeRangeFieldPrimitive.Separator />
 
    <DateTimeRangeFieldPrimitive.To>
      <DateTimeRangeFieldPrimitive.Days />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Months />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Years />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Hours />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Minutes />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.Seconds />
      <DateTimeRangeFieldPrimitive.Separator />
      <DateTimeRangeFieldPrimitive.AmPm />
    </DateTimeRangeFieldPrimitive.To>
  </DateTimeRangeFieldPrimitive.Root>
)

Examples

Default

Disabled

Date Time FieldDate Picker