Subcomponente Modular
O br-datetime-input é o subcomponente do ecossistema Datetime-picker responsável pelo campo de entrada com máscara formatada. Na quase totalidade das aplicações, utilize diretamente o componente orquestrador <br-datetime-picker>, que gerencia automaticamente a digitação e a sincronização com os seletores visuais.
Visão Geral
O br-datetime-input é o subcomponente de edição textual do br-datetime-picker, com máscara, interpretação de datas e horários e validação local sobre um br-input interno.
Papel na composição
Exibe e permite editar a seleção única ou os limites de um intervalo nos modos date, time e datetime. Comunica alterações por dateStateChange, informa a validação local por inputValidationChange e solicita a abertura ou o fechamento do painel por togglePicker.
Regra de uso e relacionamento
O br-datetime-picker instancia este campo internamente e fornece valores e configurações por propriedades. O pai coordena a seleção com o calendário e os controles de horário; o campo não abre esses seletores por conta própria nem deve ser fornecido em slot.
Prefira o br-datetime-picker para o controle completo. Use o campo isoladamente apenas em composições personalizadas nas quais a aplicação assuma a sincronização de estado, o tratamento dos eventos e a integração com formulários. Este subcomponente não possui a associação nativa ao formulário do orquestrador.
Consulte também as diretrizes de design do GovBR.
Exemplo(s)
Propriedades
disabled
| Atributo | disabled |
|---|
| Descrição | Controla os estados de read-only ou bloqueio de formulário. |
| Tipo | boolean |
| Valor padrão | false |
mode
| Atributo | mode |
|---|
| Descrição | Modo de entrada que controla máscara, parser e formato exibido. |
| Tipo | "date" | "datetime" | "time" |
| Valor padrão | 'datetime' |
placeholder
| Atributo | placeholder |
|---|
| Descrição | Texto de placeholder exibido quando o campo estiver vazio. |
| Tipo | string |
| Valor padrão | '' |
rangeEnd
| Atributo | --- |
|---|
| Descrição | Fim do intervalo em selectionMode === 'range'. |
| Tipo | Date |
| Valor padrão | null |
rangeStart
| Atributo | --- |
|---|
| Descrição | Início do intervalo em selectionMode === 'range'. |
| Tipo | Date |
| Valor padrão | null |
rangeValue
| Atributo | --- |
|---|
| Descrição | Intervalo controlado no modo range como objeto { start, end }. |
| Tipo | { start: Date; end: Date; } |
| Valor padrão | --- |
referenceDate
| Atributo | --- |
|---|
| Descrição | Data de referência usada para navegação e preenchimento de valores parciais. |
| Tipo | Date |
| Valor padrão | new Date() |
selectionMode
| Atributo | selection-mode |
|---|
| Descrição | Define o modo de seleção: single (valor único) ou range (intervalo). |
| Tipo | "range" | "single" |
| Valor padrão | 'single' |
value
| Atributo | --- |
|---|
| Descrição | Valor atualmente selecionado pelo componente. |
| Tipo | Date |
| Valor padrão | null |
Eventos
| Evento | Descrição | Depreciação | Propagação |
|---|
dateStateChange | Evento emitido quando o estado de data/hora muda (após commit ou parsing). Payload (detail): | --- | true |
inputValidationChange | Emite validação do texto digitado sem alterar o valor selecionado. Payload (detail): | --- | true |
togglePicker | Emite uma solicitação ao componente pai para alternar a abertura do picker. Emite sem payload. | --- | true |
CSS Shadow Parts
| Nome | Descrição |
|---|
"container" | Container do campo. |
"icon" | Ícone de ação (calendário/relógio). |
"input" | Elemento de entrada textual interno. |
Dependências
Componente pai
Usado por
Depende de
Gráfico
O br-datetime-input não existia na linha 1.x. Na 2.x, ele é o campo de entrada usado internamente por br-datetime-picker.
Aplicações devem preferir o componente pai, que mantém valor, calendário, horário, formulário e validação sincronizados:
<br-datetime-picker mode="datetime" name="inicio" placeholder="Selecione data e hora"></br-datetime-picker>
Use br-datetime-input diretamente somente em uma composição que também controle seu estado. mode define o formato editado, value e rangeValue recebem os valores controlados, togglePicker solicita abertura ou fechamento e dateStateChange comunica uma edição válida.
Não combine os eventos desse subcomponente com os eventos públicos de br-datetime-picker; no componente completo, ouça input e change no host pai.
