DatePicker
A date field that opens a calendar to pick one date, or a range between two dates. Looks like Input.
Master
Click the field to open the calendar. Switch type to dual for two dates. Picks save on Apply.
Usage
Use DatePicker for dates in forms and filters. type single picks one day; type dual picks a start and an end across two months, with quick ranges like Last week. monthYear menus turns the month and year over the days into two menus, for dates far from today, like a date of birth; the arrows stay beside them. Picks stay pending until Apply; Cancel, Escape or a click outside leave the value as it was. Dates are ISO strings (YYYY-MM-DD); a range is { start, end }. Label, hint, error, help and sizes work like Input. See contracts/datepicker.json for the full contract. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- A date in a form, like an invoice or due date.
- A period for a report or filter, like last month (type dual).
Don'ts
- Do not invent a local Calendar, DateRangePicker, Popover or native input type=date.
- Do not use two DatePickers for a start and end. Use type dual.
- Do not use for time. There is no time picker yet.
- Do not use raw hex.
<DatePicker label="Invoice date" type="single" size="md" labelPosition="top" monthYear="title" />