Date Range Picker

Select date ranges for filtering or booking

SaaSCalendar

Overview

DateRangePicker provides a dropdown calendar interface for selecting date ranges. It displays two months side by side, supports min/max date constraints, configurable week start day, and a clear/done footer. The selection uses a two-click flow (start date, then end date) with hover preview.

Usage

import { DateRangePicker } from "@leanicon/web-builder-library/saas";

<DateRangePicker
  placeholder="Select date range"
  onChange={(range) => console.log("Range:", range)}
/>;

Variants

Default

Default (Dark)

With Default Value

Disabled

Monday Start

Props

Name	Type	Default	Required	Description
`value`	`DateRange \| null`	—	No	Currently selected range (controlled)
`defaultValue`	`DateRange \| null`	—	No	Default selected range (uncontrolled)
`disabled`	`boolean`	`false`	No	Whether picker is disabled
`minDate`	`string`	—	No	Minimum selectable date (ISO string)
`maxDate`	`string`	—	No	Maximum selectable date (ISO string)
`placeholder`	`string`	`Select date range`	No	Placeholder text
`weekStartsOn`	`enum`	`0`	No	First day of week (0=Sunday, 1=Monday)
`numberOfMonths`	`number`	`2`	No	Number of months to display
`className`	`string`	—	No	Custom class name
`onChange`	`((range: DateRange \| null) => void)`	—	No	Called when range changes