Pular para o conte√ļdo principal

Calendar

Vis√£o geral#

O componente calendar é usado para selecionar datas próximas ao tempo presente. Por padrão, os seletores de data em calendário apresentam os dados do mês atual e apenas um mês é apresentado por vez. Em alguns contextos podem apresentar uma data pré estabelecida para o usuário.

Normalmente mostram os dias da semana na parte superior e combinam com a met√°fora de calend√°rios de mesa ou de parede.

Componentes relacionados

Boas pr√°ticas#

O componente foi estruturado com base em padr√Ķes de usabilidade para contribuir com uma boa experi√™ncia. Por isso, ao aplicar esse componente, √© muito importante que sejam levados em considera√ß√£o alguns crit√©rios e pr√°ticas:

  • O calendar √© recomendado para casos de datas n√£o muito distantes para que o usu√°rio n√£o precise navegar tanto. Nesses casos √© melhor dar a op√ß√£o para ele digitar uma data espec√≠fica.
  • Impedir que os usu√°rios selecionem datas il√≥gicas.¬†Por exemplo, datas com mais de 130 anos ser√£o improv√°veis para datas de nascimento, mas bastante aceit√°veis para datas de documentos.¬†Os usu√°rios devem ser impedidos de inserir uma data de retorno anterior √† data de partida ou que j√° tenha passado.¬†Torne as escolhas claras desativando e escurecendo as op√ß√Ķes que n√£o est√£o dispon√≠veis ou s√£o pares il√≥gicos.
  • Em toda p√°gina do calend√°rio √© recomendado visualizar qual m√™s e ano o usu√°rio est√°
  • Para datas que n√£o podem ser selecionadas devido algum contexto espec√≠fico, por exemplo uma empresa que n√£o atende no feriado, manter as datas inativas por meio de opacidade e desabilitar a op√ß√£o de clique.
  • Em casos de erro costumam acompanhar outro componente que √© o seletor de dia que acompanha e habilita o calend√°rio. Nele √© comum apresentar erros na sele√ß√£o. Al√©m de casos como duas datas que n√£o fazem sentido no contexto serem selecionadas.
  • N√£o use o seletor do componente Calendar para solicitar datas no passado ou futuro distante, como uma data de nascimento.¬†Nesses casos, use um campo de texto. (A pessoa usu√°ria pode dar muitos cliques para chegar em uma data com mais de 40 anos, por exemplo)

Interação por teclado#

TeclaFunção
Up ArrowMove o foco para o mesmo dia da semana anterior.
Down ArrowMove o foco para o mesmo dia da próxima semana.
Right ArrowMuda o foco para o dia seguinte.
Left ArrowMove o foco para o dia anterior.
HomeMove o foco para o primeiro dia da semana atual.
EndMove o foco para o √ļltimo dia da semana atual.
Page UpAltera para o mês anterior. Define o foco no mesmo dia da mesma semana. Se esse dia não existir, o foco será movido para o mesmo dia da semana anterior ou seguinte.
Shift + Page UpAltera para o ano anterior. Define o foco no mesmo dia da mesma semana. Se esse dia n√£o existir, o foco ser√° movido para o mesmo dia da semana anterior ou seguinte.
Page DownMuda a grade de datas para o próximo mês. Define o foco no mesmo dia da mesma semana. Se esse dia não existir, o foco será movido para o mesmo dia da semana anterior ou seguinte.
Shift + Page DownMuda a grade de datas para o próximo ano. Define o foco no mesmo dia da mesma semana. Se esse dia não existir, o foco será movido para o mesmo dia da semana anterior ou seguinte.
TabNavega entre as partes interativas, até fechar o componente.