Pular para o conte√ļdo principal

Timepicker

Vis√£o geral#

O componente timepicker (selecionador de tempo) ajuda a pessoa usuária a selecionar ou definir um horário específico.

Permite que a pessoa usuária insira um valor de tempo específico ou faça uma escolha entre um horário ou espaço de tempo pré-determinado e pode ser usado para uma ampla variedade de cenários.

Casos de uso comuns incluem:

  • Agendamentos diversos
  • Configurando um alarme

Na maioria das vezes, se apresenta como uma interface de calend√°rio, tornando mais f√°cil para os usu√°rios selecionar datas e horas.

Quando usar#

Use seletores de hora quando solicitar ao usuário uma hora ou para agendamento de tarefas. Use ao pedir ao usuário para inserir um horário específico.

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 boas pr√°ticas:

  • Se usar o formato de 12 horas, deve ser acompanhado por uma sele√ß√£o AM / PM;
  • Use letras mai√ļsculas e nenhum ponto para as abrevia√ß√Ķes AM e PM;
  • Permita a digita√ß√£o do hor√°rio desejado;
  • Formatos de hora devem sempre seguir, preferencialmente o formato hh:mm (hora, minuto);
  • Sempre ser√£o necess√°rios dois d√≠gitos para horas, minutos e segundos. (Exemplo: 04:30);
  • Pode-se adotar o intervalo de tempo para minutos, contanto que seja mantida uma divis√£o uniformemente em 60 (Exemplo: 00, 15, 30 e 45).

Faça#

  • Mantenha o campo vazio ou com pr√≥ximo hor√°rio dispon√≠vel;
  • Hor√°rios espec√≠ficos devem especificar um fuso hor√°rio.
  • Durante a digita√ß√£o do valor de hora, ao se colocar um n√ļmero entre 1 e 9, o ideal √© que automaticamente seja adicionado um 0 antes (apenas no campo hora). Por exemplo: usu√°rio digitou 9, deve-se ajustar para 09;

Não faça#

  • N√£o disponibilize somente valores de minutos.
  • N√£o use o timepicker para dura√ß√Ķes, como para um cron√īmetro.