Docs
Date Picker

Date Picker

A date picker component with range and presets.

react-aria-components

Needs work: The below is a basic example. I am still working on ensuring this is feature complete.

Installation

Install the following dependencies:

npm install @internationalized/date date-fns

Add the Button component to your project.

The DatePicker component uses the Calendar and Popover component. Make sure you have them installed in your project.

Copy and paste the following code into your project.

import { getLocalTimeZone } from "@internationalized/date"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import {
  DatePicker,
  DateValue,
  Dialog,
  DialogProps,
  Group,
  GroupProps,
  PopoverProps,
} from "react-aria-components"
import { date } from "zod"
 
import { cn, cnv } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Popover } from "@/components/ui/popover"
 
const _DatePicker = DatePicker
 
export interface _DatePickerButtonProps extends GroupProps {
  date?: DateValue
}
 
const _DatePickerButton = ({ date, ...props }: _DatePickerButtonProps) => (
  <Group {...props}>
    <Button
      variant="outline"
      className={cn(
        "w-[280px] justify-start text-left font-normal",
        !date && "text-muted-foreground"
      )}
    >
      <CalendarIcon className="mr-2 h-4 w-4" />
 
      {date ? (
        format(date?.toDate(getLocalTimeZone()), "PPP")
      ) : (
        <span>Pick a date</span>
      )}
    </Button>
  </Group>
)
 
const _DatePickerContent = ({
  className,
  popoverClassName,
  ...props
}: DialogProps & { popoverClassName?: PopoverProps["className"] }) => (
  <Popover className={(values) => cnv(values, "w-auto p-3", popoverClassName)}>
    <Dialog
      className={cn(
        "flex w-full flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0",
        className
      )}
      {...props}
    />
  </Popover>
)
 
export {
  _DatePicker as DatePicker,
  _DatePickerButton as DatePickerButton,
  _DatePickerContent as DatePickerContent,
}

Update the import paths to match your project setup.

Usage

"use client"
 
import React from "react"
import { type DateValue } from "react-aria-components"
 
import {
  Calendar,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarHeading,
} from "@/registry/default/ui/calendar"
import {
  DatePicker,
  DatePickerButton,
  DatePickerContent,
} from "@/registry/default/ui/date-picker"
 
export default function DatepickerDemo({ ...props }) {
  const [date, setDate] = React.useState<DateValue>()
 
  return (
    <DatePicker shouldCloseOnSelect={false} onChange={setDate} {...props}>
      <DatePickerButton date={date} />
      <DatePickerContent>
        <Calendar>
          <CalendarHeading />
          <CalendarGrid>
            <CalendarGridHeader>
              {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
            </CalendarGridHeader>
            <CalendarGridBody>
              {(date) => (
                <>
                  <CalendarCell date={date} />
                </>
              )}
            </CalendarGridBody>
          </CalendarGrid>
        </Calendar>
      </DatePickerContent>
    </DatePicker>
  )
}

Examples

Date Picker

With Presets

CalendarDropzone