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
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")
Prop allowOnlyDatesList	Type Array<Date>	Default value undefined	Description Allowlist of dates that can be selected. All other dates are disabled.
Prop timezone	Type "system" \| "UTC"	Default value "system"	Description Timezone used to display and interpret dates. system uses the local timezone.
Prop responsivePositioning	Type boolean	Default value true	Description When true, the calendar may flip to avoid collisions. Set false to keep it aligned with the input.

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"
    />
  )
}

DatePicker: For selecting a single date instead of a range.
DateTimeRangePicker: For selecting a range with date and time.
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

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

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

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

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

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

Date picker Date time range picker

Date range picker

Example

Props

Quick start

Related components

Common use cases

Basic date range picker

With future dates disabled

With maximum range length

With predefined date ranges

Disabled state