---
title: Date range picker
description: Date Range Picker allows users to select a range of dates from a calendar interface with support for predefined date ranges.
category: Forms
related: [DatePicker, TextField, Label, Container]
commonPatterns: [filter-date-range, report-date-range, predefined-ranges]
---

Source: https://clickhouse.design/click-ui/daterangepicker

# 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

## Props

| Prop                     | Type                                                       | Default value             | Description                                                                                  |
| ------------------------ | ---------------------------------------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- |
| onSelectDateRange        | `(selectedStartDate: Date, selectedEndDate: Date) => void` | `undefined`               | Callback function called when a date range is selected. Receives start and end Date objects. |
| startDate                | `Date`                                                     | `undefined`               | Currently selected start date (controlled component)                                         |
| endDate                  | `Date`                                                     | `undefined`               | Currently selected end date (controlled component)                                           |
| placeholder              | `string`                                                   | `"start date – end date"` | Placeholder text displayed when no date range is selected                                    |
| disabled                 | `boolean`                                                  | `false`                   | Whether the date range picker is disabled and cannot be interacted with                      |
| futureDatesDisabled      | `boolean`                                                  | `false`                   | Whether dates in the future should be disabled and unselectable                              |
| futureStartDatesDisabled | `boolean`                                                  | `false`                   | Whether future dates can be selected as the start date (end date can still be future)        |
| maxRangeLength           | `number`                                                   | `-1`                      | Maximum number of days allowed in the date range. -1 means no limit.                         |
| predefinedDatesList      | `Array<DateRange>`                                         | `[]`                      | Array of predefined date range options (e.g., "Last 7 days", "Last month")                   |

```tsx
import { DateRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function Example() {
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"
  />
)
}
```

## Quick start

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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
  />
)
}
```