Datetime Input

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-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

Campo de texto com máscara usado pelo br-datetime-picker. Interpreta a data ou a hora digitada e abre o calendário pelo botão do campo.

É criado pelo br-datetime-picker; não é preciso declará-lo. Para um campo de data em formulário, use o br-datetime-picker.

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

• br-datetime-picker

Usado por

• br-datetime-picker

Depende de

• br-input
• 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>