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
O br-time-picker é o subcomponente de ajuste de horas e minutos do br-datetime-picker.
Papel na composição
Oferece campos textuais e botões de incremento e decremento para hora e minuto. Usa uma data de referência e comunica alterações por dateStateChange; não coordena diretamente o calendário nem o campo textual principal.
Regra de uso e relacionamento
O br-datetime-picker instancia e sincroniza este seletor nos modos time e datetime. Na seleção de intervalo, o pai cria dois seletores, um para o início e outro para o fim, e consolida os respectivos valores. Não forneça seletores de horário em slots do pai.
Prefira o orquestrador para um controle completo de horário com campo textual e formulário. Use diretamente apenas quando precisar dos controles de hora e minuto em uma composição personalizada e assumir a sincronização de estado, a validação e a integração com formulários. O uso isolado não herda a associação nativa ao formulário do pai.
Consulte também as diretrizes de design do GovBR.
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 canônico 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
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.
