Time Picker
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
Subcomponente de seleção de horários do GovBR-DS, desenvolvido para permitir a escolha intuitiva de horas e minutos.
Papel na composição
- Apresenta colunas ou controles de incremento/decremento para seleção de horas e minutos com validação de limites.
- Sincroniza o horário escolhido com o campo textual associado.
Regra de uso e relacionamento
Coordenado pelo componente pai br-datetime-picker no modo de horário ou composto. Pode ser utilizado avulso quando a aplicação demandar exclusivamente a captura de hora sem necessidade de calendário de datas.
Para a documentação completa de design, consulte o Design System do GovBR.
Exemplo(s)
Propriedades
disabled
| Atributo | disabled |
|---|---|
| Descrição | Desabilita todos os controles de navegação e edição de hora/minuto. |
| Tipo | boolean |
| Valor padrão | false |
referenceDate
| Atributo | --- |
|---|---|
| Descrição | Data usada como referência para a navegação de hora e minuto, sem representar necessariamente a seleção. Recebe uma instância de Date por property binding; valores inválidos usam a data atual. |
| Exemplo de uso | |
| Tipo | Date |
| Valor padrão | new Date() |
value
| Atributo | --- |
|---|---|
| Descrição | Data que contém a hora e o minuto efetivamente selecionados, ou null quando vazio.Recebe uma instância de Date por property binding; datas inválidas usam null. |
| Exemplo de uso | |
| Tipo | Date |
| Valor padrão | null |
Eventos
| Evento | Descrição | Depreciação | Propagação |
|---|---|---|---|
dateStateChange | Evento emitido quando a data de referência ou o valor selecionado mudam. | --- | true |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Parte para o container base do seletor de horários. |
"field" | Campo individual de entrada de tempo (com botões de ajuste). |
"input" | Campo de entrada textual interno do tempo. |
"separator" | Separador visual de hora e minuto. |
"timer" | Container para o grupo de hora e minuto. |
Dependências
Componente pai
Usado por
Depende de
Gráfico
Migração para <br-time-picker>
O br-time-picker não existia na linha 1.x. Na 2.x, ele é o seletor de horas e minutos usado por br-datetime-picker.
Para um campo de horário completo e associado a formulário, use o componente pai:
<br-datetime-picker mode="time" name="horario" placeholder="Selecione o horário"></br-datetime-picker>
Use br-time-picker diretamente apenas quando a aplicação coordenar a composição. referenceDate define o horário exibido, value representa a seleção atual, disabled bloqueia a interação e dateStateChange comunica as alterações ao controlador.
Como os valores são objetos Date, atribua-os por propriedade JavaScript. O subcomponente não substitui sozinho o contrato de formulário, validação e eventos nativos oferecido por br-datetime-picker.
