Skip to main content

DatePicker

A date picker (DatePicker) offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important.

Examples

Properties

NameTypeDefaultDescription
valuedateCurrent value of the DatePicker.
labelstringLabel to display above the DatePicker.
placeholderstringThe short hint displayed in the DatePicker before the user enters a value.
requiredboolfalseDisplay DatePicker as required.
allowTextInputboolfalseWhether the DatePicker allows input a date string directly or not.
borderlessboolfalseWhether or not the DatePicker is borderless.
underlinedboolfalseWhether or not the DatePicker is underlined.
focusedboolfalseWhen set to true the focus is set on the control when it's shown on the page or page opened.

Events

NameDescription
changeFires when the selected date is changed (either selected from dropdown or entered if allowTextInput is enabled.)
focusFires when the control has received focus.
blurFires when the control has lost focus.