Date Picker

A button that opens a calendar popover for picking a single date. Set showTime to choose a local date and time together.

import { DatePicker } from '@jbpark/ui-kit';

<DatePicker onChange={date => console.log(date)} />;

<DatePicker
  showTime={{ minuteStep: 15 }}
  onChange={date => console.log(date)}
/>;

Selected: noneDate and time: none

Props

Prop	Type	Default
`value`	`Date`	-
`defaultValue`	`Date`	-
`placeholder`	`string`	`'Pick a date'`
`disabled`	`boolean`	-
`showTime`	`boolean \| { minuteStep?: number }`	`false`
`onChange`	`(date: Date \| undefined) => void`	-
`className`	`string`	-

Works both controlled (pass value + onChange) and uncontrolled (pass defaultValue, or neither).

With showTime, selecting a date or changing the time only updates the popup's draft. OK commits one local Date and calls onChange; Cancel, Escape, and clicking outside discard the draft. The time starts at 00:00 when no value is set, and the trigger displays the committed time in 24-hour format. minuteStep sets the native time input's minute interval.

Labelling

id, aria-label, aria-labelledby, aria-describedby and aria-invalid go to the trigger button, which is the element that receives focus. Pair id with an external <label htmlFor> to name it, and point aria-describedby at an error or hint message:

<label htmlFor="due-date">Due date</label>
<DatePicker id="due-date" aria-describedby="due-date-error" aria-invalid />
<p id="due-date-error">Pick a date before Friday.</p>

Props​

Labelling​

Props

Labelling