Date Picker
Date Picker component is used as wrapper to any existing <INPUT type="text"> element and make it a date field with custom calendar date picker.
Calendar allows to select date using pointer device or with keyboard. When user focus is on the field one can change date by one day by using UP and DOWN arrows.
To maximise compatibility it automatically turn input field to a type="date" on mobile resolutions.
| Example | Code |
|---|---|
<as-date-picker>[text input]</as-date-picker> |
|
<as-date-picker reverse locale="da-DK">[text input]</as-date-picker> |
|
<as-date-picker disabled reverse locale="da-DK">[text input]</as-date-picker> |
| Property name | Description | Type |
|---|---|---|
| yearspan | Optional: When present allow to define number of years that will be available within calendar year select that stretch into past and future plus current year. Defaults to 20. | number |
| breakpoint |
Optional:
Allows to define viewport breakpoint in pixels below which date picker component will turn off calendar and calendar buton and make text input a type="date" to allow system date pickers to work. Above breakpoint date picker returns to default behaviour. You can "hack" displaying one or the other by setting up breakpoint to 0 to always show component's calendar or to be high value (e.g. 20000) to make sure date picker fall back to system default. Defaults to 800 |
number |
| locale | Optional: When present allow to overwrite page lang attribute settings. This is used to generate month names in calendar month select and day names. If date picker locale attribute is not present or no lang attribute is present it defaults to 'en'. | string |
| placeholder | Optional: This is placeholder of the input field. Can be passed within input field attributes, or in this case within component attributes. If non of these are present it defaults to current date. | string |
| reverse | Optional: Internally date picker component operates on date in ISO format (YYYY-DD-MMT00:00) but if for some reason date display is needed in DD-MM-YYYY format then reverse attribute can be used to make it so. | param |
| disabled | Optional: when present disables date picker from user input entirely. | param |
| Event name | Description | Example value |
|---|---|---|
| as-date-picker:created | Fires when date picker component is created. Has detail object. | {id: "9a42cd92-e064-4f3d-986f-4166f3708559"} |
| as-date-picker:breakpoint | Fires when date picker checks breakpoint value to modify component behaviour. Has detail object. | {id: "9a42cd92-e064-4f3d-986f-4166f3708559", breakpoint: "desktop"}</br></br>{id: "9a42cd92-e064-4f3d-986f-4166f3708559", breakpoint: "mobile"} |
| as-date-picker:open | Fires when calendar popout is shown. Has detail object. | {id: "9a42cd92-e064-4f3d-986f-4166f3708559"} |
| as-date-picker:closed | Fires when calendar popout is closed. Has detail object. | {id: "9a42cd92-e064-4f3d-986f-4166f3708559"} |
| as-date-picker:changed | Fires when user picks another date. Has detail object. | {id: "9a42cd92-e064-4f3d-986f-4166f3708559", date: "2025-11-01", changed: ["day"]}</br></br>{id: "9a42cd92-e064-4f3d-986f-4166f3708559", date: "2025-11-01", changed: ["month"]}</br></br>{id: "9a42cd92-e064-4f3d-986f-4166f3708559", date: "2025-11-01", changed: ["year"]} |