Date Range Picker
Date Range Picker provides a calendar interface for selecting a range of dates. It includes support for predefined date ranges, disabling future dates, and maximum range length constraints.
Example
Select date range
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop onSelectDateRange | Type (selectedStartDate: Date, selectedEndDate: Date) => void | Default value undefined | Description Callback function called when a date range is selected. Receives start and end Date objects. |
Prop startDate | Type Date | Default value undefined | Description Currently selected start date (controlled component) |
Prop endDate | Type Date | Default value undefined | Description Currently selected end date (controlled component) |
Prop placeholder | Type string | Default value "start date – end date" | Description Placeholder text displayed when no date range is selected |
Prop disabled | Type boolean | Default value false | Description Whether the date range picker is disabled and cannot be interacted with |
Prop futureDatesDisabled | Type boolean | Default value false | Description Whether dates in the future should be disabled and unselectable |
Prop futureStartDatesDisabled | Type boolean | Default value false | Description Whether future dates can be selected as the start date (end date can still be future) |
Prop maxRangeLength | Type number | Default value -1 | Description Maximum number of days allowed in the date range. -1 means no limit. |
Prop predefinedDatesList | Type Array<DateRange> | Default value [] | Description Array of predefined date range options (e.g., "Last 7 days", "Last month") |
Quick Start
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'
function MyDateRangePicker() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
/>
)
}Related Components
- DatePicker: For selecting a single date instead of a range.
- TextField: For text input, sometimes used alongside date range pickers.
- Label: Provides accessible labels for date range pickers.
- Container: For organizing date range pickers within forms.
Common Use Cases
Basic Date Range Picker
Select date range
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'
function BasicDateRangePicker() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
/>
)
}With Future Dates Disabled
Select date range
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'
function DateRangeWithFutureDisabled() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
futureDatesDisabled
/>
)
}With Maximum Range Length
Select date range
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'
function DateRangeWithMaxLength() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
maxRangeLength={30}
/>
)
}With Predefined Date Ranges
Select date range
import { DateRangePicker, getPredefinedMonthsForDateRangePicker, DateRange } from '@clickhouse/click-ui'
import { useState } from 'react'
function DateRangeWithPredefined() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
// Get last 6 months as predefined ranges
const predefinedRanges: DateRange[] = getPredefinedMonthsForDateRangePicker(-6)
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
predefinedDatesList={predefinedRanges}
/>
)
}Disabled State
Select date range
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'
function DisabledDateRangePicker() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onSelectDateRange={(start, end) => {
setStartDate(start)
setEndDate(end)
}}
placeholder="Select date range"
disabled
/>
)
}