Date Picker
A date selection component with calendar popup and optional text input, powered by vanilla-calendar-pro.
Requires JS
This component requires the date_picker stimulus controller.
API Reference
DatePicker
| Name | Type | Default |
|---|---|---|
name: | string | nil |
| Form field name for the date picker. Used to identify the selected date value when forms are submitted. | ||
id: | string | nil |
HTML ID for the input element. When select_only is true, the ID is applied to the button trigger instead of a text input. | ||
value: | DateTime/String | nil |
| Initial date value. Accepts DateTime objects or ISO date strings. Automatically converts to UTC for consistent handling. | ||
format: | string | "DD/MM/YYYY" |
| Display format for the selected date. Uses dayjs format tokens for customization. | ||
select_only: | boolean | false |
| When true, disables text input and only allows date selection via calendar popup. Useful for preventing manual date entry. | ||
placeholder: | string | nil |
| Placeholder text displayed in the input field when no date is selected. Provides guidance to users about expected date format. | ||
disabled: | boolean | false |
| Whether the date picker is disabled and non-interactive. When true, prevents user interaction and form submission. | ||
options: | hash | {} |
| Configuration options passed to vanilla-calendar-pro. Allows customization of calendar behavior, appearance, and date constraints. | ||
mask: | boolean | true |
| Whether to apply input masking to the text field for guided date entry. Helps users enter dates in the correct format automatically. | ||
attributes | keyword arguments | |
Keyboard Interactions
| Key | Description |
|---|---|
| Space | Opens/closes the popover when focus is on calendar button. |
| Enter | Opens/closes the popover when focus is on calendar button. |
| Tab | Moves focus to the next focusable element. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Esc | Closes the popver. |
Examples
On This Page