Date Picker Component

A customizable calendar component for date picking with multiple views, built with React Day Picker and Tailwind CSS.

Support for day, month, quarter, and year views
Range selection capability
Customizable styling
Fully accessible with ARIA attributes
Responsive design

Installation

The Date Picker component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the date picker in your project.

React TSX
1import DatePicker, { 
2  DateRangePicker, 
3  MonthPicker, 
4  QuarterPicker, 
5  YearPicker 
6} from "@/components/modern-ui/date-picker"

Date Picker

The DatePicker component allows users to select a single date.

Date Range Picker

The DateRangePicker allows users to select a range of dates, which is ideal for booking applications, event planning, or any scenario that requires a date range selection.

Month Picker

The MonthPicker component is useful when you need users to select an entire month instead of a specific date.

Quarter Picker

The QuarterPicker component allows users to select a quarter of a year, which is useful for financial or business applications.

Year Picker

The YearPicker component is perfect for when you need users to select an entire year.

API Reference

Calendar Props

Prop	Type	Default	Description
`mode`	`"single"` \| `"range"` \| `"multiple"`	`"single"`	The selection mode of the calendar
`selected`	`Date` \| `DateRange` \| `Date[]`	`undefined`	The selected date or dates
`onSelect`	`(date: Date \| DateRange \| Date[] \| undefined) => void`	`undefined`	Function called when a date is selected
`className`	`string`	`""`	Additional CSS classes
`showOutsideDays`	`boolean`	`true`	Show days from the previous and next months
`showYearSwitcher`	`boolean`	`true`	Show the year switcher in the caption
`yearRange`	`number`	`12`	Number of years to display in year view
`numberOfMonths`	`number`	`1`	Number of months to display side by side
`disabled`	`Date[] \| ((date: Date) => boolean)`	`undefined`	Dates to disable or function to determine if a date should be disabled
`fromDate`	`Date`	`undefined`	The earliest date that can be selected
`toDate`	`Date`	`undefined`	The latest date that can be selected
`defaultMonth`	`Date`	`undefined`	The month to display initially
`initialView`	`"days"` \| `"months"` \| `"quarters"` \| `"years"`	`"days"`	The initial view of the calendar

DatePicker Props

Prop	Type	Default	Description
`date`	`Date`	`undefined`	The selected date
`setDate`	`(date: Date \| undefined) => void`	`undefined`	Function called when a date is selected
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`"Pick a date"`	Placeholder text to display when no date is selected

DateRangePicker Props

Prop	Type	Default	Description
`dateRange`	`DateRange`	`undefined`	The selected date range
`setDateRange`	`(dateRange: DateRange \| undefined) => void`	`undefined`	Function called when a date range is selected
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`"Pick a date range"`	Placeholder text to display when no date range is selected
`numberOfMonths`	`number`	`2`	Number of months to display side by side

MonthPicker Props

Prop	Type	Default	Description
`month`	`Date`	`undefined`	The selected month
`setMonth`	`(month: Date \| undefined) => void`	`undefined`	Function called when a month is selected
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`"Pick a month"`	Placeholder text to display when no month is selected

QuarterPicker Props

Prop	Type	Default	Description
`quarter`	`Date`	`undefined`	The selected quarter
`setQuarter`	`(quarter: Date \| undefined) => void`	`undefined`	Function called when a quarter is selected
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`"Pick a quarter"`	Placeholder text to display when no quarter is selected

YearPicker Props

Prop	Type	Default	Description
`year`	`Date`	`undefined`	The selected year
`setYear`	`(year: Date \| undefined) => void`	`undefined`	Function called when a year is selected
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`"Pick a year"`	Placeholder text to display when no year is selected

Custom Styling

The Calendar component supports extensive customization through className props:

monthsClassName
monthCaptionClassName
weekdaysClassName
weekdayClassName
monthClassName
captionClassName
captionLabelClassName
buttonNextClassName
buttonPreviousClassName
navClassName
monthGridClassName
weekClassName
dayClassName
dayButtonClassName
rangeStartClassName
rangeEndClassName
rangeMiddleClassName
selectedClassName
todayClassName
outsideClassName
disabledClassName
hiddenClassName