Date time range picker

Date Time Range Picker provides a tabbed calendar for selecting a start and end date with time. Use it for query windows, log search, and other ranges where the time of day matters. It supports predefined time periods, UTC or local time, seconds, and range validation.

Example

Props

Prop	Type	Default value	Description
Prop *onSelectDateRange	Type (startDate: Date, endDate: Date, predefinedDateLabel?: string) => void	Default value undefined	Description Called when both ends of the range are set. The optional third argument is the label of a predefined period, if one was selected.
Prop startDate	Type Date	Default value undefined	Description Currently selected start date and time (controlled component)
Prop endDate	Type Date	Default value undefined	Description Currently selected end date and time (controlled component)
Prop placeholder	Type string	Default value "start date – end date"	Description Placeholder text displayed when no range is selected
Prop disabled	Type boolean	Default value false	Description Whether the 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 range. -1 means no limit.
Prop predefinedTimesList	Type Array<{ label: string; dateRange: { startDate: Date; endDate: Date } }>	Default value undefined	Description Labeled relative time periods shown in a side list. When provided, the calendar opens from Custom time period.
Prop shouldShowSeconds	Type boolean	Default value false	Description Whether time inputs and the trigger display seconds
Prop timezone	Type "system" \| "UTC"	Default value "system"	Description Timezone used to display and interpret dates. system uses the local timezone.
Prop defaultActiveTab	Type "startDate" \| "endDate"	Default value "startDate"	Description Which calendar tab is active when the picker opens
Prop closeOnDateRangeSelected	Type boolean	Default value false	Description Whether the dropdown closes as soon as both start and end are selected
Prop shouldFireIfInvalid	Type boolean	Default value true	Description Whether onSelectDateRange fires when the end is before the start. The picker still shows an error message either way.
Prop openDirection	Type "left" \| "right"	Default value "right"	Description Preferred side for the custom calendar when predefined times are shown
Prop responsivePositioning	Type boolean	Default value true	Description When true, the dropdown may flip to avoid collisions. Set false to keep it aligned with the input.

* denotes required field

Quick start

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyDateTimeRangePicker() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end, predefinedDateLabel) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
  />
)
}

DatePicker: For selecting a single date without time.
DateRangePicker: For selecting a date range without time of day.
TextField: For text input, sometimes used alongside date time range pickers.
Label: Provides accessible labels for date time range pickers.

Common use cases

With seconds

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeWithSeconds() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
    shouldShowSeconds
  />
)
}

With predefined time periods

Pass labeled ranges in predefinedTimesList. Selecting an item calls onSelectDateRange with that period’s label as the third argument. Choose Custom time period to open the tabbed calendar.

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeWithPredefined() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()
const now = new Date()
const predefinedTimesList = [
  {
    label: 'Past 15 minutes',
    dateRange: { startDate: new Date(now.getTime() - 15 * 60 * 1000), endDate: now },
  },
  {
    label: 'Past hour',
    dateRange: { startDate: new Date(now.getTime() - 60 * 60 * 1000), endDate: now },
  },
  {
    label: 'Past day',
    dateRange: { startDate: new Date(now.getTime() - 24 * 60 * 60 * 1000), endDate: now },
  },
]

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end, predefinedDateLabel) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
    predefinedTimesList={predefinedTimesList}
  />
)
}

UTC timezone

timezone="system" (default) uses the local timezone. timezone="UTC" displays and interprets the same Date values in UTC.

Local

UTC

import { DateTimeRangePicker, Container, Text } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeTimezone() {
const [startDate, setStartDate] = useState(new Date('2026-05-01T06:00:00Z'))
const [endDate, setEndDate] = useState(new Date('2026-05-01T12:00:00Z'))

return (
  <Container orientation="vertical" gap="md">
    <DateTimeRangePicker
      startDate={startDate}
      endDate={endDate}
      onSelectDateRange={(start, end) => {
        setStartDate(start)
        setEndDate(end)
      }}
      timezone="system"
    />
    <DateTimeRangePicker
      startDate={startDate}
      endDate={endDate}
      onSelectDateRange={(start, end) => {
        setStartDate(start)
        setEndDate(end)
      }}
      timezone="UTC"
    />
  </Container>
)
}

With future dates disabled

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeWithFutureDisabled() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
    futureDatesDisabled
  />
)
}

With maximum range length

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeWithMaxLength() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
    maxRangeLength={7}
  />
)
}

Validation

By default onSelectDateRange still fires if the end is before the start. The picker shows End date and time must be after start. Set shouldFireIfInvalid={false} to skip the callback until the range is valid.

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DateTimeRangeValidation() {
const [startDate, setStartDate] = useState(new Date('2026-07-20T14:00:00'))
const [endDate, setEndDate] = useState(new Date('2026-07-20T10:00:00'))

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end) => {
      setStartDate(start)
      setEndDate(end)
    }}
    shouldFireIfInvalid={false}
  />
)
}

Disabled state

import { DateTimeRangePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function DisabledDateTimeRangePicker() {
const [startDate, setStartDate] = useState<Date | undefined>()
const [endDate, setEndDate] = useState<Date | undefined>()

return (
  <DateTimeRangePicker
    startDate={startDate}
    endDate={endDate}
    onSelectDateRange={(start, end) => {
      setStartDate(start)
      setEndDate(end)
    }}
    placeholder="Select date and time range"
    disabled
  />
)
}

Date range picker File upload