Byun DateRange Picker

A copy-paste React date range picker with presets, optional time and timezone inputs, and 3-click range selection. This demo page focuses on practical usage and API details in a document-first layout.

Preset sidebar with customizable preset definitions
Optional time and timezone controls
Controlled and uncontrolled usage patterns
Accessible defaults with keyboard support

Live demo

Full picker with time, timezone, and no-date-range mode enabled.

No value applied yet.

Quick start

Prerequisites: Node.js 20+ and pnpm 10+.

This is a copy-paste component, not an npm package. Copy the files below into your project and install the dependencies.

1. Clone and copy required files

git clone https://github.com/hyunghwan/byun-daterange-picker.git
cd byun-daterange-picker

components/ui/super-date-range-picker.tsx
components/ui/calendar.tsx
components/ui/button.tsx
components/ui/popover.tsx
components/ui/command.tsx
components/ui/dialog.tsx
components/ui/input.tsx
components/ui/separator.tsx
components/ui/switch.tsx
lib/utils.ts

2. Install dependencies

pnpm add date-fns react-day-picker lucide-react cmdk \
  @radix-ui/react-popover @radix-ui/react-dialog \
  @radix-ui/react-separator @radix-ui/react-switch \
  @radix-ui/react-slot class-variance-authority \
  clsx tailwind-merge

3. Use in your app

import { SuperDateRangePicker } from "@/components/ui/super-date-range-picker";

export default function App() {
  return <SuperDateRangePicker onApply={(range) => console.log(range)} />;
}

Examples

Core examples are shown by default. Advanced variants are grouped in a collapsed section.

Default

Preset sidebar + 2-month calendar with Apply commit.

No value applied yet.

Time + timezone

Enable both time inputs and timezone selector.

No value applied yet.

Allow no date range

Adds an All dates option and Skip date filter toggle.

No value applied yet.

Advanced examples

No presets

Calendar-only mode by hiding the preset sidebar.

No value applied yet.

Custom presets

Inject your own DateRangePreset array.

No value applied yet.

API reference

Props for SuperDateRangePicker.

Prop	Type	Default	Description
value	SuperDateRangeValue	-	Controlled value. Pass null for no date range.
defaultValue	SuperDateRangeValue	-	Initial value for uncontrolled mode.
onApply	(value) => void	-	Called when the user clicks Apply.
onChange	(value) => void	-	Called for pending changes before Apply.
showPresets	boolean	true	Shows preset sidebar.
presets	DateRangePreset[]	DEFAULT_PRESETS	Custom preset list.
defaultPreset	string	-	Preset key selected on first render.
showTime	boolean	false	Adds HH:mm:ss inputs.
showTimezone	boolean	false	Shows searchable timezone selector.
timezone	string	-	Controlled timezone value.
defaultTimezone	string	local	Initial timezone for uncontrolled mode.
onTimezoneChange	(tz) => void	-	Called when timezone changes.
dateFormat	string	dd-MMM-yyyy	date-fns format string for inputs and label.
minDate	Date	-	Earliest selectable date.
maxDate	Date	-	Latest selectable date.
disabled	boolean	false	Disables trigger button.
allowNoDateRange	boolean	false	Enables no-date-range mode.
noDateRangeLabel	string	All dates	Label for no-date-range option.
placeholder	string	Select date range	Trigger placeholder text.
triggerClassName	string	-	Extra trigger classes.
triggerVariant	string	outline	Trigger button variant.
align	start \| center \| end	start	Popover alignment.
open	boolean	-	Controlled popover open state.
onOpenChange	(open) => void	-	Called when open state changes.
aria-label	string	auto	Accessible label for trigger button.
aria-describedby	string	-	ID describing the picker.
id	string	-	ID forwarded to trigger button.
className	string	-	Extra wrapper classes.