Skip to main content

Input Date Picker

O componente Input Date Picker permite o usuário selecionar datas passadas, presentes ou futuras.

Quando usar?​

  • Solicitar ao usuário uma data ou período de dias.

Como usar?​

  • Existem três tamanhos de altura de entrada de texto: Small, Medium e Large. O suporte a três tamanhos oferece mais flexibilidade na estruturação de layouts;
  • O componente deve se alinhar verticalmente com outros componentes em uma página.

Anatomia​

alt text

Tamanhos e dimensões​

alt text

Altura fixa para os tamanhos:

  • Large: 48px / 3rem
  • Medium: 40px / 2.5rem
  • Small: 32px / 2rem
  • Largura: sempre será de 100%

Estados​

  • Default ou enabled: estado padrão. Quando ativo, mas o usuário não está interagindo.
  • Active: quando o usuário ativa/clica o componente.
  • Focus: o usuário clica ou utilizar o teclado (TAB), indica que navegou com sucesso.
  • Hover: quando o usuário passa o mouse sobre o componente, mostra que é possível interagir com o elemento.
  • Disabled: o usuário não tem permissão para interagir. O estado desativado remove completamente a função interativa de um componente.

Variações​

  • Single: o usuário digita ou seleciona uma data. O calendário é alinhado à esquerda do input de data;

alt text

  • Range: o usuário seleciona um período. O calendário é alinhado à esquerda do input de data.

alt text