Date Picker

A date picker component with range and presets.

Installation

The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

See installation instructions for the Popover and the Calendar components.

Usage

let (date, setDate) = React.useState(() => None)
 
<Popover>
  <Popover.Trigger
    render={<Button
      variant=Outline
      dataEmpty=?{date->Option.isNone ? Some(true) : None}
      className="data-[empty=true]:text-muted-foreground justify-start text-left font-normal"
    />}
  >
    {switch date {
    | Some(d) => d->format("PPP")->React.string
    | None => <span> {"Pick a date"->React.string} </span>
    }}
  </Popover.Trigger>
  <Popover.Content className="w-auto p-0">
    <Calendar mode=Single selected={date} onSelect={value => setDate(_ => value)} />
  </Popover.Content>
</Popover>

Examples

Basic

A basic date picker component.

Range Picker

A date picker component for selecting a range of dates.

Date of Birth

A date picker component for selecting a date of birth. This component includes a dropdown caption layout for date and month selection.

Input

A date picker component with an input field for selecting a date.

Time Picker

A date picker component with a time input field for selecting a time.

Natural Language Picker

This component uses the chrono-node library to parse natural language dates.