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