---
title: Date picker
description: Date Picker allows users to select a single date from a calendar interface.
category: Forms
related: [DateRangePicker, TextField, Label, Container]
commonPatterns: [form-date-picker, filter-date-picker, birthdate-picker]
---

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

# 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                                                                          |
| ------------------- | ------------------------------ | ------------- | ------------------------------------------------------------------------------------ |
| onSelectDate        | `(selectedDate: Date) => void` | `undefined`   | Callback function called when a date is selected. Receives the selected Date object. |
| date                | `Date`                         | `undefined`   | Currently selected date (controlled component)                                       |
| placeholder         | `string`                       | `undefined`   | Placeholder text displayed when no date is selected                                  |
| disabled            | `boolean`                      | `false`       | Whether the date picker is disabled and cannot be interacted with                    |
| futureDatesDisabled | `boolean`                      | `false`       | Whether dates in the future should be disabled and unselectable                      |

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

## Quick start

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

## Related components

- **DateRangePicker**: For selecting a range of dates.
- **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

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

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

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

### Disabled state

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