DatePicker
Introduction
An interactive form control that combines a text input field with a popup calendar overlay. It supports single-date pickers, date range selections, multi-select toggles, customized calendar boundaries, localised weekday headers, and keyboard navigation.
The DatePicker is fully integrated as a datePicker block in the Page Builder, enabling content managers and developers to define text labels, placeholder formatting, selection modes, and accent color themes directly inside Sveltia CMS page templates.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Single Date Selector (Uncontrolled / Standard)
Our standard date picker layout allowing users to select a single, specific date from the calendar dropdown. Useful for forms, registrations, or scheduled bookings.
{
"type": "datePicker",
"label": "Choose Date",
"selectionMode": "single",
"placeholder": "YYYY-MM-DD",
"colorPalette": "blue",
"interactive": true
}
2. Travel Range Selector (Bounded Calendar)
Restricts selectable calendar limits between specific dates. Excellent for flight selections, hotel bookings, or accounting windows. Setting selectionMode to "range" renders start and end inputs.
{
"type": "datePicker",
"label": "Travel Dates",
"selectionMode": "range",
"min": "2026-01-01",
"max": "2026-12-31",
"colorPalette": "purple",
"interactive": true
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Label Text (label) | string | - | Form descriptive label text rendered adjacent to the text input field. |
Placeholder (placeholder) | string | "YYYY-MM-DD" | Guide format text shown inside the text input when empty. |
Selection Mode (selectionMode) | select | "single" | Defines how dates are collected. • "single" — Resolves a single date. • "range" — Resolves a spanning block (creates double inputs). • "multiple" — Toggles multiple independent days. |
Minimum Date (min) | string | - | The earliest selectable date in YYYY-MM-DD ISO format. Preceding cells are disabled. |
Maximum Date (max) | string | - | The latest selectable date in YYYY-MM-DD ISO format. |
Show Week Numbers (showWeekNumbers) | boolean | false | When true, renders an ISO-8601 week-number column along the left edge of the day grid. |
Color Theme (colorPalette) | select | "blue" | Visual theme applied to selected days, today highlights, and active bounds. • Options: blue, green, red, purple, orange, amber, cyan, slate. |
Enable Hydration (interactive) | boolean | true | When true, hydrates the component as an island to handle calendar popups and outside clicks. |
Keyboard & Accessibility Support
When the calendar panel overlay is open and focus is directed inside, users can fully operate selections via standard keyboard keys:
- ← / → — Move focus to the previous or next day cell.
- ↑ / ↓ — Move focus by ±1 week (7 days) vertically.
- PageUp / PageDown — Advance or rewind the calendar view by a full month.
- Shift+PageUp / Shift+PageDown — Advance or rewind by a full year.
- Enter / Space — Select the active focused day cell and commit.
- Esc — Immediately close the popup overlay and return focus back onto the trigger input.
Under the hood, the day grid utilises roving tabIndex focus stops to prevent tabbing through every single calendar day. All cell grids announce correct semantic screen-reader descriptions (role="grid", aria-multiselectable, aria-current="date").