Datepicker

A DatePicker opens a month calendar under the field and fills it with the day you click.

Set picker to week, month, quarter or year to pick a coarser unit than a single day.

Set size to small, medium or large to match the height of the fields around the picker.

Set variant to outlined, filled, text, underlined, borderless or bare to match the other fields in your form. text fills on hover and while focused, and bare draws nothing at all.

Set status to error or warning to flag a date that needs attention.

Set disabled to lock the field so it cannot be opened.

DatePicker.RangePicker picks a start and an end date from one panel and highlights the days between them.

Set allowEmpty on a RangePicker to let either end stay blank, like a filter with only a start or only an end date.

Pass disabled a pair on a RangePicker to lock one end while the other stays editable.

Pass multiple to collect several separate dates in one field, with maxTagCount="responsive" folding the overflow into a count.

Add showTime to pick a time along with the date, on a single DatePicker or on both ends of a RangePicker.

Pass presets to add one-click shortcuts beside the calendar, like Last 7, 30 and 90 days on a RangePicker.

Pass disabledDate a callback that returns true for days that cannot be picked, like weekends for a delivery date.

Set maxDate on the start field and minDate on the end field from each other's value, so the end never comes before the start.

Set needConfirm to add an OK button to a plain date picker, or needConfirm={false} to commit a date and time without one.

Pass cellRender to draw your own calendar cells, like colored dots under days with events, and return info.originNode for the rest.