Trip Dates

Add dates

September 2026

M

T

W

T

F

S

NewForms · added Sep 23

Date Range Picker

A calendar that shows the range before you commit to it, with presets.

Install it in one line

npx devignerui add date-range-picker

Writes components/ui/date-range-picker.tsx and lists what it needs.

First time here

npx devignerui init

Or by hand

Needs React 18+ and Tailwind CSS v4.
Install the dependencies.
npm i cn motion @devigner-ui/icons devignerui
Paste the source from into components/ui/date-range-picker.tsx.

Usage

<DateRangePicker onValueChange={setRange} />

Custom composition

<DateRangePicker title="Stay" presets={presets} renderBadge={(range) => (range ? "Booked" : "Add dates")} />

Every prop

value-

DateRange | null

Controlled range.

defaultValuenull

DateRange | null

Initial range.

onValueChange-

function

Range callback.

month-

Date

Controlled visible month.

defaultMonth-

Date

Initial visible month.

onMonthChange-

function

Month callback.

minDate-

Date

Earliest selectable day.

maxDate-

Date

Latest selectable day.

isDateDisabled-

function

Marks individual days unavailable.

titleTrip Dates

ReactNode

Card title.

presetsWeekend, 3 nights, 1 week, 2 weeks

DateRangePreset[]

Quick-select ranges; a preset lights up when the range matches it.

startLabelCheck-in

string

Start field label.

endLabelCheck-out

string

End field label.

renderBadge-

function

Replaces the badge text.

onClear-

function

Fires when Clear is pressed.

classNames-

DateRangePickerClassNames

Slot classes.

slotProps-

DateRangePickerSlotProps

Slot attributes.