Datepicker

Overview

The datepicker allows the user to select a date from a calendar.

Demo

Select Variant

Props

Property	Description	Type	Values	Default	Required
label	The label to show with the input	string	string		✓
hideLabel	Hide the label	boolean \| undefined	boolean \| undefined
name	The input name	string \| undefined	string \| undefined
selectedDate	The start date of the datepicker or range if enabled	string \| number \| Date \| undefined	string \| number \| Date \| undefined
visible	Forces visibility of the datepicker	boolean \| undefined	boolean \| undefined
inline	Inlines the datepicker with other elements	boolean \| undefined	boolean \| undefined
range	Enables range selection	boolean \| undefined	boolean \| undefined
rangeSeparator	The separator for the range selection	string \| undefined	string \| undefined	" - "
position	The position of the datepicker	AirDatepickerPosition \| undefined	AirDatepickerPosition \| undefined	"bottom left"
minDate	The minimum date that can be selected	string \| number \| Date \| undefined	string \| number \| Date \| undefined
maxDate	The maximum date that can be selected	string \| number \| Date \| undefined	string \| number \| Date \| undefined
buttons	Buttons to show on the datepicker	("today" \| "clear")[] \| undefined	("today" \| "clear")[] \| undefined
timepicker	Enables time selection	boolean \| undefined	boolean \| undefined
disabled	Disable the datepicker	boolean \| undefined	boolean \| undefined
placeholder	The datepicker input placeholder	string \| undefined	string \| undefined
required	Whether the datepicker is required	boolean \| undefined	boolean \| undefined
autoClose	If true the datepicker will be hidden after selecting the date	boolean \| undefined	boolean \| undefined
format	Formats the date; accepts day.js formats	string \| undefined	string \| undefined	"MM/DD/YYYY"
dataVal	The input attributes for .NET validation	string \| undefined	string \| undefined
dataValRequired		string \| undefined	string \| undefined
hideInitialValue	Prevents the datepicker from displaying a value until interacted with	boolean \| undefined	boolean \| undefined	false
prevHtml	Custom HTML for the previous month button	string \| undefined	string \| undefined	"<svg fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#a)\"><path d=\"m15.41 7.41-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59 4.58-4.59z\" fill=\"#66686a\"/></g><defs><clipPath id=\"a\"><rect width=\"24\" height=\"24\" fill=\"#fff\"/></clipPath></defs></svg>"
nextHtml	Custom HTML for the next month button	string \| undefined	string \| undefined	"<svg fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#a)\"><path d=\"m10 6-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6-6-6z\" fill=\"#323232\"/></g><defs><clipPath id=\"a\"><rect width=\"24\" height=\"24\" fill=\"#fff\"/></clipPath></defs></svg>"
tooltipHtml	Custom HTML for the tooltip	string \| undefined	string \| undefined
readonlyInput	Disables manual typing in the input	boolean \| undefined	boolean \| undefined
dataQaId	QA identifier for the input	string \| undefined	string \| undefined

Events

Name	Return Type
date-selected	[date?: Date \| Date[] \| undefined]