Datepicker - HapplyUI

A calendar datepicker component with single date, range, and popover modes.

Installation

bunx @happlyui/cli@latest add datepicker

Dependencies

npm packages

react-day-picker@8.10.1
date-fns
framer-motion
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
compact-button

Usage

import * as Datepicker from "@/components/ui/datepicker"

<Datepicker.Calendar mode="single" selected={date} onSelect={setDate} />

Examples

Demo

Inline calendar for single date selection.

<Datepicker.Calendar mode="single" selected={date} onSelect={setDate} />

Date picker inside a popover triggered by a button.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root variant="neutral" mode="stroke">
      {date ? format(date, 'LLL dd, y') : 'Select a date'}
    </Button.Root>
  </Popover.Trigger>
  <Popover.Content className="p-0" showArrow={false}>
    <Datepicker.Calendar mode="single" selected={date} onSelect={setDate} />
  </Popover.Content>
</Popover.Root>

With Approval

Popover datepicker with Cancel/Apply buttons.

<Popover.Root>
  <Popover.Trigger asChild>
    <Button.Root variant="neutral" mode="stroke">Select a date</Button.Root>
  </Popover.Trigger>
  <Popover.Content className="p-0" showArrow={false}>
    <Datepicker.Calendar mode="single" selected={date} onSelect={setDate} />
    <div className="flex gap-4 border-t border-stroke-soft-200 p-4">
      <Button.Root variant="neutral" mode="stroke" size="small">Cancel</Button.Root>
      <Button.Root variant="primary" mode="filled" size="small">Apply</Button.Root>
    </div>
  </Popover.Content>
</Popover.Root>

Range

Date range selection in a popover.

<Datepicker.Calendar mode="range" selected={range} onSelect={setRange} />

With Form Field

Datepicker composed with FormField for consistent label and hint.

Date of Birth*

Select your date of birth.

<FormField.Root
  label="Date of Birth"
  required
  hint="Select your date of birth."
>
  <Datepicker.Calendar mode="single" selected={date} onSelect={setDate} />
</FormField.Root>

API Reference

Datepicker.Calendar

The calendar component. Extends react-day-picker DayPicker props.

Prop	Type	Default	Description
`mode`	`'single' \| 'range' \| 'multiple'`	-	Selection mode
`selected`	`Date \| DateRange \| Date[]`	-	Selected date(s)
`onSelect`	`(value) => void`	-	Callback when selection changes
`showOutsideDays`	`boolean`	`true`	Show days from adjacent months

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa