Date picker

Date Picker provides a calendar interface for selecting a single date. It includes support for disabling future dates and custom placeholders.

Example

Props

Prop	Type	Default value	Description
Prop onSelectDate	Type (selectedDate: Date) => void	Default value undefined	Description Callback function called when a date is selected. Receives the selected Date object.
Prop date	Type Date	Default value undefined	Description Currently selected date (controlled component)
Prop placeholder	Type string	Default value undefined	Description Placeholder text displayed when no date is selected
Prop disabled	Type boolean	Default value false	Description Whether the date 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 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 { DatePicker } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyDatePicker() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={selectedDate}
      onSelectDate={setSelectedDate}
      placeholder="Select a date"
    />
  )
}

DateRangePicker: For selecting a range of dates.
DateTimeRangePicker: For selecting a range with date and time.
TextField: For text input, sometimes used alongside date pickers.
Label: Provides accessible labels for date pickers.
Container: For organizing date pickers within forms.

Common use cases

Form date picker

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

function FormDatePicker() {
  const [birthDate, setBirthDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={birthDate}
      onSelectDate={setBirthDate}
      placeholder='Select birth date'
      futureDatesDisabled
    />
  )
}

Filter date picker

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

function FilterDatePicker() {
  const [filterDate, setFilterDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={filterDate}
      onSelectDate={setFilterDate}
      placeholder='Filter by date'
    />
  )
}

With future dates disabled

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

function DatePickerWithFutureDisabled() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={selectedDate}
      onSelectDate={setSelectedDate}
      placeholder="Select a date"
      futureDatesDisabled
    />
  )
}

Allowlist of dates

Only dates in allowOnlyDatesList can be selected. Combine with timezone when you need UTC rather than the local calendar.

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

function AllowlistDatePicker() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={selectedDate}
      onSelectDate={setSelectedDate}
      placeholder="Select an allowed date"
      timezone="system"
      allowOnlyDatesList={[
        new Date('2026-01-15'),
        new Date('2026-01-20'),
        new Date('2026-02-01'),
      ]}
    />
  )
}

Disabled state

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

function DisabledDatePicker() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>()
  return (
    <DatePicker
      date={selectedDate}
      onSelectDate={setSelectedDate}
      placeholder="Select a date"
      disabled
    />
  )
}

Autocomplete Date range picker