Time Picker

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Subcomponente Modular

O br-time-picker é o subcomponente seletor de horários (horas e minutos). É orquestrado automaticamente pelo componente principal <br-datetime-picker>, mas também pode ser utilizado avulso quando for necessária apenas a seleção de horários.

Visão Geral

Controles de hora e minuto usados pelo br-datetime-picker. Em um intervalo, o componente cria um controle para o início e outro para o fim.

Para um campo de horário em formulário, use <br-datetime-picker mode="time">. Usado sozinho, ele não participa de formulário: leia o horário em value e trate a validação na aplicação.

Exemplo(s)

Propriedades

disabled

Atributo	disabled
Descrição	Indica se os controles do seletor estão desabilitados.
Tipo	boolean
Valor padrão	false

referenceDate

Atributo	---
Descrição	Data de referência usada para exibir e ajustar hora e minuto.
Tipo	Date
Valor padrão	new Date()

value

Atributo	---
Descrição	Valor selecionado pelo usuário.
Tipo	Date
Valor padrão	null

Eventos

Evento	Descrição	Depreciação	Propagação
dateStateChange	Evento emitido sempre que referenceDate ou value são atualizados. O detail segue a forma de DatetimePickerDateState e contém o estado compartilhado entre subcomponentes de data e horário. Payload (detail):	---	true

CSS Shadow Parts

Nome	Descrição
"container"	Container base do seletor de horários.
"field"	Campo de tempo com botões de ajuste.
"input"	Campo de entrada textual interno do tempo.
"separator"	Separador visual entre hora e minuto.
"timer"	Grupo que contém os campos de hora e minuto.

Dependências

Componente pai

• br-datetime-picker

Usado por

• br-datetime-picker

Depende de

• br-button
• br-icon

Gráfico

Migração

O br-datetime-picker não existia na 1.x. Se a aplicação usava um campo de texto com máscara própria para datas:

1. Troque o campo por <br-datetime-picker mode="date"> (ou time, datetime).
2. Remova a máscara e a conversão de texto para data: o componente já faz isso.
3. Mantenha name para o valor seguir no formulário.
4. Ouça change para saber quando o valor mudou.

<br-datetime-picker mode="date" name="agendamento" required></br-datetime-picker>