DatePicker

Date, month and year picking with native Date values, plus a two-month range picker.

import { DatePicker } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Entry

Basic

Loading preview

Range

Loading preview

APIs

DatePicker properties

allowClearPickerCommonProps: boolean
Defaults to true.
classNamePickerCommonProps: string
defaultValue: null | Date
Defaults to null.
disabledPickerCommonProps: boolean
disabledDatePickerCommonProps: (date: Date) => boolean
footer: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
formatPickerCommonProps: string | (date: Date) => string
maxPickerCommonProps: Date
minPickerCommonProps: Date
mode: 'date' | 'month' | 'year'
Defaults to "date".
onChange: (date: Date | null) => void
placeholder: string
shadowPickerCommonProps: boolean
sizePickerCommonProps: 'small' | 'large' | 'middle'
stylePickerCommonProps: CSSProperties
value: null | Date
variantPickerCommonProps: 'filled' | 'outlined' | 'borderless'

DateRangePicker properties

allowClearPickerCommonProps: boolean
Defaults to true.
classNamePickerCommonProps: string
defaultValue: DateRangeValue
disabledPickerCommonProps: boolean
disabledDatePickerCommonProps: (date: Date) => boolean
formatPickerCommonProps: string | (date: Date) => string
maxPickerCommonProps: Date
minPickerCommonProps: Date
onChange: (range: DateRangeValue) => void
placeholder: [string, string]
shadowPickerCommonProps: boolean
sizePickerCommonProps: 'small' | 'large' | 'middle'
stylePickerCommonProps: CSSProperties
value: DateRangeValue
variantPickerCommonProps: 'filled' | 'outlined' | 'borderless'

Values are native Date objects; days compare by calendar day, so a min with a time of day still enables that day. The grid always shows six weeks and follows the active dayjs locale for week start and names. Click the title to move from days to months to years; mode sets the lowest level.

Migrating from antd DatePicker

Dayjs values → Date (dayjs(value).toDate() at the call site).
picker="month" → mode="month"; minDate / maxDate → min / max.
renderExtraFooter → footer; showNow={false} is the default.
DatePicker.RangePicker → DateRangePicker.
Time, week, quarter and presets are not supported.