Docs
Date Picker Primitive

Date Picker Primitive

An unstyled date picker component.

Installation

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

Anatomy

Import all parts and piece them together.

import * as DatePickerPrimitive from "@/components/ui/date-picker-primitive"
 
export default () => (
  <DatePickerPrimitive.Root>
    <DatePickerPrimitive.Trigger>
      <DatePickerPrimitive.Value />
    </DatePickerPrimitive.Trigger>
    <DatePickerPrimitive.Input />
    <DatePickerPrimitive.Clear />
    <DatePickerPrimitive.Anchor />
 
    <DatePickerPrimitive.Portal>
      <DatePickerPrimitive.Content>
        <DatePickerPrimitive.Calendar />
      </DatePickerPrimitive.Content>
    </DatePickerPrimitive.Portal>
  </DatePickerPrimitive.Root>
)

Examples

Input

Multiple

Range

Date Time Range FieldDropzone