Date Wheel Picker

A year/month/day wheel-based date picker, composed on top of Wheel Picker and persian-date, with a Popover-on-desktop and Drawer-on-mobile trigger for use inside a form field. Wheels don't loop by default — scrolling past December stays on December instead of wrapping back to January — but this is configurable via loop.

Last updated January 1, 1980

CreditsModifiedPublished

Copied from shadcn/ui.

Not a shadcn/ui component — this is an original composition of this registry's own Wheel Picker, Popover, and Drawer, mirroring Time Picker's Popover-on-desktop/Drawer-on-mobile pattern for a calendar date instead of a time-of-day
Year/month/day options and month lengths (including Esfand's leap-year 29/30 day swing) come from this registry's persian-date utilities (toParts/fromParts/daysInMonth) rather than any hand-rolled calendar math

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/date-wheel-picker

Usage

import { DateWheelPicker } from "@/components/ui/date-wheel-picker"
 
export function Example() {
  return <DateWheelPicker defaultValue={new Date(2024, 2, 20)} />
}

Examples

Range

Two Date Wheel Pickers for a membership period, with the start date capped so it can't land after the expiry date.

Step

Set yearStep to a value greater than 1 for a coarse, decade-jump year wheel — useful for a rough birth-decade picker.

Loop

Wheels don't loop by default. Set loop to enable it if wrapping (e.g. scrolling past December back to January) fits your use case.

Calendar Type

undefined

Responsive

ResponsiveDateWheelPicker renders a Popover on desktop and a Drawer on mobile from one shared API. Resize the viewport (or use your browser devtools' device toolbar) below md to see the trigger switch from opening a popover to opening a bottom drawer.

In a Responsive Dialog

Date Wheel Picker embedded inside a Responsive Dialog panel for a date-of-birth flow — a Dialog on desktop, a bottom Drawer on mobile.

Date Wheel Picker embedded inside a Responsive Menu's content for a quick date filter — a Dropdown Menu on desktop, a bottom Drawer menu on mobile.

RTL

Persian month names and digits work naturally in RTL layouts.

API Reference