DatePicker

Single date selection with a calendar dropdown. Value is a Date | null. Default trigger format is ISO YYYY-MM-DD — override with format.

Due date

Clearable

Disabled


import { DatePicker } from '@gg-software/ui';
 
<DatePicker label="Due date" value={date} onChange={(date) => setDate(date)} />
 
<DatePicker
    label="Within this year"
    minDate={new Date('2026-01-01')}
    maxDate={new Date('2026-12-31')}
    disabledDate={(date) => date.getDay() === 0} // no Sundays
    format={(date) => date.toLocaleDateString('cs-CZ')}
    clearable
/>

Props

Prop	Type	Default	Description
`value`	`Date \| null`	—
`defaultValue`	`Date \| null`	`null`
`onChange`	`((date: Date \| null) => void)`	—
`format`	`((date: Date) => string)`	—	format the selected date for the trigger (default ISO YYYY-MM-DD)
`placeholder`	`string`	`Select date`
`minDate`	`Date`	—
`maxDate`	`Date`	—
`disabledDate`	`((date: Date) => boolean)`	—
`clearable`	`boolean`	`false`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/DatePicker/DatePicker.tsx