Custom Shadcn Date Selector for React and Tailwind CSS. A universal date selector component with multiple period types, filter modes, and flexible display options.
"use client"
import { useState } from "react"Installation
pnpm dlx shadcn@latest add @reui/r-date-selector
Usage
import {
DateSelector,
type DateSelectorValue,
} from "@/components/reui/r-date-selector"const [value, setValue] = useState<DateSelectorValue | undefined>()
return <DateSelector value={value} onChange={setValue} label="Due date" />Examples
With Popover
"use client"
import { useEffect, useState } from "react"With Dialog
"use client"
import { useEffect, useState } from "react"With i18n Support
"use client"
import { useEffect, useMemo, useState } from "react"API Reference
DateSelector
The main component for selecting dates and time periods.
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateSelectorValue | - | The current value of the selector. |
onChange | (value: DateSelectorValue) => void | - | Callback fired when the value changes. |
allowRange | boolean | true | Whether to allow selecting date ranges (using "between" operator). |
periodTypes | DateSelectorPeriodType[] | - | List of available period types (day, month, etc.). |
defaultPeriodType | DateSelectorPeriodType | "day" | The initial period type. |
defaultFilterType | DateSelectorFilterType | "is" | The initial filter operator. |
presetMode | DateSelectorFilterType | - | If set, locks the selector to this specific filter mode. |
showInput | boolean | true | Whether to show the text input field above the selector. |
showTwoMonths | boolean | true | Whether to show two months in the calendar view (desktop only). |
label | string | - | Optional label to display above the filter toggle. |
yearRange | number | 10 | The number of years to show in the year/month/quarter list. |
baseYear | number | new Date().getFullYear() | The reference year for the year selection list. |
minYear | number | 2015 | The minimum selectable year. |
maxYear | number | 2026 | The maximum selectable year. |
i18n | Partial<DateSelectorI18nConfig> | - | Custom labels and operators for internationalization. |
inputHint | string | - | Optional hint text to display in the input field when empty and focused. |
dayDateFormat | string | "MM/dd/yyyy" | The format used to display single days. |
className | string | - | Additional CSS classes for the container. |
Interfaces
DateSelectorValue
The structure of the value returned by the onChange callback.
| Property | Type | Description |
|---|---|---|
period | DateSelectorPeriodType | The selected period type (day, month, quarter, half-year, year). |
operator | DateSelectorFilterType | The selected operator (is, before, after, between). |
startDate | Date | The selected start date (for day period). |
endDate | Date | The selected end date (for day period range). |
year | number | The selected year. |
month | number | The selected month (0-11). |
quarter | number | The selected quarter (0-3). |
halfYear | number | The selected half-year (0-1). |
rangeStart | { year: number; value: number } | The start of a period range. |
rangeEnd | { year: number; value: number } | The end of a period range. |
More Shadcn Date Selector components
Browse 4 production-ready Shadcn Date Selector components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 4 Shadcn Date Selector components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.