Date picker

The Datepicker component provides a dynamic, accessible, localized month-based datepicker

Open Calendar
October 2017


localeStringen-USAny valid single locale for Date.prototype.toLocaleString()
labelStringChoose a dateA string for the label of the input field
microcopyObject-Translatable strings for the microcopy for the calendar. All properties must be present to be valid.
microcopy.todayStringToday: {date}String representation of Today: {date}. Must include {date}, which will be replaced with the localized date.
microcopy.nextStringNext MonthString representation of Next Month
microcopy.previousStringNext MonthString representation of Previous Month
microcopy.openStringOpen CalendarString representation of Open Calendar
microcopy.cancelStringCancelString representation of Cancel
inputsObjectInput names (so multiple datepickers can be used in the same form)
inputs.localStringdate-localInput name and ID for the visible, read-only input field
inputs.dayStringdate-dayInput name for the hidden numeric day input
inputs.monthStringdate-monthInput name for the hidden numeric month input
inputs.yearStringdate-yearInput name for the hidden numeric year input


dateSelectedtargetWhen a click event is fired on a date, this event will fire and pass the relevant target of the event