Sistema de Calendário e Seleção de Datas

O que Sistema de Calendário e Seleção de Datas faz?

Propósito

O Sistema de Calendário e Seleção de Datas fornece uma metodologia para projetar interfaces que permitem aos usuários selecionar datas únicas, intervalos de datas ou horários específicos. Selecionar datas é uma tarefa de alta fricção que envolve modelos mentais complexos (por exemplo, "próxima terça-feira", "último fim de semana do mês"). Este sistema garante que os seletores de data sejam visualmente claros, fáceis de navegar via teclado e toque, e forneçam feedback imediato sobre validade e disponibilidade.

Casos de Uso

• Reservas & Agendamentos: Seleção de datas de check-in/check-out para hotéis ou voos.
• Agendamento: Escolha de um horário para reuniões, consultas ou entregas.
• Analytics & Relatórios: Definição de um intervalo de datas personalizado (Data Inicial a Data Final) para filtragem de dados.
• Entrada de Data de Nascimento: Captura da data de nascimento para verificação de idade ou configuração de perfil.
• Planejamento de Eventos: Gerenciamento de prazos ou marcos em uma ferramenta de gerenciamento de projetos.

Quando NÃO Usar

• Datas Simples: Se você precisa apenas de uma data única e conhecida (como "Hoje" ou "Ontem"), use um botão ou link simples.
• Datas Memoráveis: Para datas que os usuários sabem de cor (como aniversários ou validade de cartão de crédito), use campos de texto padrão com type="number" ou type="tel" em vez de uma grade de calendário, pois digitá-las é mais rápido do que navegar em uma grade.
• Tempo Relativo: Se o usuário precisa apenas selecionar "Últimos 7 dias" ou "Este mês", use um menu suspenso ou grupo de botões em vez de um calendário completo.

Entradas

1. Modo de Seleção: Data Única, Intervalo de Datas ou Horário.
2. Restrições: Datas Mínimas/Máximas, datas desabilitadas (ex.: datas passadas, slots totalmente reservados).
3. Contexto: É um elemento de página independente ou um acionador de popover/modal?
4. Localização: Formatos de data regionais (MM/DD/AAAA vs DD/MM/AAAA) e primeiro dia da semana (Domingo vs Segunda-feira).

Saídas

1. Especificação da Anatomia da Grade: Definição visual do cabeçalho do mês, rótulos dos dias da semana e células de dia.
2. Matriz de Estados: Tratamentos visuais para Hoje, Selecionado, Início do Intervalo, Fim do Intervalo, Dentro do Intervalo, Hover e Desabilitado.
3. Especificação da Conexão de Entrada: Como o calendário se relaciona com o campo de entrada de texto (ícone de acionamento, formatação e suporte a entrada manual).
4. Plano de Acessibilidade: Atalhos de teclado (Setas, Enter, Escape) e regiões ARIA live para atualizações de status.

Fluxo de Trabalho

1. Selecionar o Padrão de Entrada

Escolha como o usuário insere a data:

• Entrada Direta: Campo de texto mascarado. Melhor para entrada rápida de datas conhecidas.
• Acionador de Seletor: Um campo de entrada com um ícone de calendário que abre uma sobreposição. Padrão para a maioria dos casos de uso.
• Embutido/Persistente: O calendário está sempre visível na página. Melhor para tarefas com muitos agendamentos.

2. Projetar a Grade do Calendário

Estabeleça um ritmo espacial consistente para a visualização do mês:

• Cabeçalho: Mês e Ano com botões de navegação "Anterior" e "Próximo".
• Linha dos Dias da Semana: Rótulos de uma letra ou abreviados (D, S, T...) para orientação rápida.
• Grade de 7 Colunas: Garanta que cada célula de dia tenha espaço suficiente para a data e possíveis indicadores de status (ex.: um ponto para um evento).

3. Definir a Lógica de Intervalo (Se Aplicável)

Ao selecionar um intervalo, a interface deve monitorar três estados:

• Início da Seleção: A primeira data clicada.
• O "Intervalo": A conexão visual entre o início e a posição atual do cursor.
• Fim da Seleção: A segunda data clicada, finalizando o intervalo.
• Feedback Visual: Use um preenchimento de fundo sutil para as datas "Dentro do Intervalo", com formas distintas ou maior contraste para os limites "Início" e "Fim".

4. Projetar para Acessibilidade

• Navegação por Teclado: Os usuários devem poder navegar entre os dias usando as teclas de seta, alternar meses com PageUp/PageDown e selecionar com Enter.
• Gerenciamento de Foco: Quando o seletor abrir, o foco deve ir para a data atualmente selecionada ou para "Hoje".
• Funções ARIA: Use role="grid" para o calendário, role="columnheader" para os dias da semana e role="gridcell" para os dias. Use aria-selected="true" para a seleção ativa.

5. Planejar Adaptações Responsivas

• Visualização em Dispositivos Móveis: Em telas pequenas, a visualização de um único mês geralmente é a melhor. Para seleção de intervalo, considere empilhar dois meses verticalmente ou usar uma sobreposição em tela cheia.
• Alvos de Toque: Garanta que cada célula de dia tenha pelo menos 44x44px ou forneça espaçamento adequado para evitar cliques acidentais.

Regras de Decisão

• Regra do "Digite Primeiro": Sempre permita que os usuários digitem a data manualmente no campo de entrada. Não os force a usar o calendário.
• Limites de Mês: Se estiver selecionando uma data muito no passado ou futuro (por exemplo, 5+ anos), forneça um seletor de Ano/Mês suspenso em vez de forçar o usuário a clicar em "Próximo" dezenas de vezes.
• Feedback Imediato: Se um usuário selecionar uma data inválida (por exemplo, um domingo para uma entrega apenas em dias úteis), mostre uma mensagem de erro contextual imediatamente, em vez de esperar pelo envio do formulário.
• Início da Semana: Padrão para a localidade do usuário (geralmente domingo nos EUA, segunda-feira no Reino Unido/UE).

Restrições

• Acessibilidade: Deve atender ao contraste WCAG AA (4.5:1) para todos os estados de data. As datas selecionadas devem ser distinguíveis por mais do que apenas cor (por exemplo, um fundo sólido vs. sem fundo).
• Responsividade: Os calendários nunca devem ultrapassar a viewport. Os seletores de popover devem usar lógica de "flip" para permanecer visíveis se não houver espaço abaixo do campo de entrada.
• Localização: Suportar diferentes formatos de data e traduções para nomes de meses e dias da semana.

Padrões Comuns de Falha

• O "Clicador Infinito": Fazer os usuários clicarem em 12 meses para encontrar uma data, em vez de fornecer um seletor de ano.
• Entrada Oculta: Impedir que os usuários digitem a data, o que frustra usuários avançados e usuários com deficiências motoras.
• Alvos Minúsculos: Projetar uma grade com células de 20px que é impossível de usar em um dispositivo móvel.
• Falta de Contexto de "Hoje": Deixar de destacar a data atual, dificultando a orientação dos usuários.
• Intervalos Confusos: Não distinguir claramente entre o "Início" e "Fim" de um intervalo, ou não mostrar o intervalo "Dentro do Intervalo".

Critérios de Validação

• Os usuários podem navegar pelo calendário e selecionar uma data usando apenas o teclado.
• A entrada manual de texto é suportada e validada no campo de entrada.
• A data de hoje é visualmente distinta, mas não compete com a seleção.
• As seleções de intervalo têm um tratamento visual claro de "Início", "Fim" e "Intervalo".
• Os alvos de toque para as células de dia atendem à recomendação de 44x44px (ou mínimo de 24x24px com espaçamento).
• As taxas de contraste para todos os estados (Hover, Selecionado, Desabilitado) atendem ao WCAG AA.
• O calendário adapta seu layout (ou muda para tela cheia) em dispositivos móveis.