JollyUI
  1. Docs
  2. Date Picker

Date Picker

A date picker component with range and presets.

Docs

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.

Loading...

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