DatePicker Seletor de Data
Introdução
Um controle de formulário interativo que combina um campo de entrada de texto com uma sobreposição de calendário pop-up. Ele suporta seletores de data única, seleções de intervalo de datas, alternâncias de multisseleção, limites de calendário personalizados, cabeçalhos de dias da semana localizados e navegação por teclado.
O DatePicker está totalmente integrado como um bloco datePicker no Page Builder, permitindo que gerentes de conteúdo e desenvolvedores definam rótulos de texto, formatação de espaço reservado, modos de seleção e temas de cor de acento diretamente nos modelos de página do Sveltia CMS.
Uso
Essas configurações representam exatamente como os itens de bloco do page-builder são construídos.
1. Seletor de data única (não controlado / padrão)
Nosso layout padrão de seletor de data que permite aos usuários selecionar uma data específica do menu suspenso do calendário. Útil para formulários, registros ou agendamentos marcados.
{
"type": "datePicker",
"label": "Choose Date",
"selectionMode": "single",
"placeholder": "YYYY-MM-DD",
"colorPalette": "blue",
"interactive": true
}
2. Seletor de intervalo de viagem (calendário delimitado)
Restringe os limites do calendário selecionável entre datas específicas. Excelente para seleções de voos, reservas de hotéis ou janelas contábeis. Definir selectionMode como "range" renderiza entradas de início e fim.
{
"type": "datePicker",
"label": "Travel Dates",
"selectionMode": "range",
"min": "2026-01-01",
"max": "2026-12-31",
"colorPalette": "purple",
"interactive": true
}
Propriedades
| Propriedade | Tipo de campo CMS | Padrão | Descrição / Opções suportadas |
|---|---|---|---|
Texto do rótulo (label) | string | - | Texto de rótulo descritivo do formulário renderizado adjacente ao campo de entrada de texto. |
Espaço reservado (placeholder) | string | "YYYY-MM-DD" | Texto de formato guia mostrado dentro do campo de entrada de texto quando vazio. |
Modo de seleção (selectionMode) | select | "single" | Define como as datas são coletadas. • "single" — Resolve uma única data. • "range" — Resolve um bloco abrangente (cria entradas duplas). • "multiple" — Alterna múltiplos dias independentes. |
Data mínima (min) | string | - | A data selecionável mais antiga no formato ISO YYYY-MM-DD. As células anteriores são desabilitadas. |
Data máxima (max) | string | - | A data selecionável mais recente no formato ISO YYYY-MM-DD. |
Mostrar números de semana (showWeekNumbers) | boolean | false | Quando true, renderiza uma coluna de número de semana ISO-8601 ao longo da borda esquerda da grade de dias. |
Tema de cor (colorPalette) | select | "blue" | Tema visual aplicado a dias selecionados, destaques de hoje e limites ativos. • Opções: blue, green, red, purple, orange, amber, cyan, slate. |
Habilitar hidratação (interactive) | boolean | true | Quando true, hidrata o componente como uma ilha para lidar com pop-ups de calendário e cliques externos. |
Suporte de teclado e acessibilidade
Quando o painel de sobreposição do calendário está aberto e o foco é direcionado para dentro, os usuários podem operar as seleções totalmente via teclas padrão do teclado:
- ← / → — Mover o foco para a célula do dia anterior ou seguinte.
- ↑ / ↓ — Mover o foco em ±1 semana (7 dias) verticalmente.
- PageUp / PageDown — Avançar ou retroceder a visualização do calendário em um mês completo.
- Shift+PageUp / Shift+PageDown — Avançar ou retroceder um ano completo.
- Enter / Space — Selecionar a célula de dia focada ativa e confirmar.
- Esc — Fechar imediatamente a sobreposição pop-up e retornar o foco para o campo de entrada do gatilho.
Nos bastidores, a grade de dias utiliza paradas de foco tabIndex móveis para evitar a navegação por Tab através de cada dia individual do calendário. Todas as grades de células anunciam descrições semânticas corretas para leitores de tela (role="grid", aria-multiselectable, aria-current="date").