Date Picker

A date picker component with range and presets.

'use client'
 
import { format } from 'date-fns'
import * as React from 'react'
import { Calendar } from 'ui'
import {
  DatePicker,
  DatePickerButton,
  DatePickerContent,
  DatePickerTrigger,
} from 'ui-patterns/DatePicker'
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <DatePickerButton variant="outline" className="w-[280px]">
          {date ? format(date, 'PPP') : <span>Pick a date</span>}
        </DatePickerButton>
      </DatePickerTrigger>
      <DatePickerContent>
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </DatePickerContent>
    </DatePicker>
  )
}

Installation

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

See installation instructions for the Popover and the Calendar components.

Usage

'use client'
 
import { format } from 'date-fns'
import * as React from 'react'
import { Button, Calendar } from 'ui'
import {
  DatePicker,
  DatePickerButton,
  DatePickerContent,
  DatePickerTrigger,
} from 'ui-patterns/DatePicker'
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <DatePickerButton variant="outline" className="w-[280px]">
          {date ? format(date, 'PPP') : <span>Pick a date</span>}
        </DatePickerButton>
      </DatePickerTrigger>
      <DatePickerContent>
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </DatePickerContent>
    </DatePicker>
  )
}

See the React DayPicker documentation for more information.

API Reference

<DatePicker /> accepts the same props as the <Popover /> component.
<DatePickerTrigger /> accepts the same props as the <PopoverTrigger /> component.
<DatePickerContent /> accepts the same props as the <PopoverContent /> component.
<DatePickerButton /> accepts the same props as the <Button /> component and an optional isInvalid prop to visually indicate an invalid date.

Examples

Date Picker

'use client'
 
import { format } from 'date-fns'
import * as React from 'react'
import { Calendar } from 'ui'
import {
  DatePicker,
  DatePickerButton,
  DatePickerContent,
  DatePickerTrigger,
} from 'ui-patterns/DatePicker'
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <DatePickerButton variant="outline" className="w-[280px]">
          {date ? format(date, 'PPP') : <span>Pick a date</span>}
        </DatePickerButton>
      </DatePickerTrigger>
      <DatePickerContent>
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </DatePickerContent>
    </DatePicker>
  )
}

Date Picker

Installation

Usage

API Reference

Examples

Date Picker

Date Range Picker

With Presets

Form