DatetimePicker
Visão Geral
Para uma descrição detalhada, consulte a documentação do GovBR-DS.
Exemplos
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Data
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Hora
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
autoSelectToday
| Atributo | auto-select-today |
| Descrição | Define se a data atual deve ser selecionada automaticamente ao abrir o datetime-picker. O padrão é false |
| Tipo | boolean |
| Valor padrão | false |
disabled
| Atributo | disabled |
| Descrição | Define se o datetime-picker está desabilitado. |
| Tipo | boolean |
| Valor padrão | false |
mode
| Atributo | mode |
| Descrição | Define o modo do datetime-picker. Os valores possíveis são: - "date": Permite selecionar apenas a data. - "time": Permite selecionar apenas o horário. - "datetime": Permite selecionar tanto a data quanto o horário. |
| Tipo | "date" | "datetime" | "time" |
| Valor padrão | 'datetime' |
name
| Atributo | name |
| Descrição | Define o nome do campo do datetime-picker. Este nome será utilizado ao submeter o formulário que contém o datetime-picker. |
| Tipo | string |
| Valor padrão | --- |
placeholder
| Atributo | placeholder |
| Descrição | Define o placeholder do campo de entrada do datetime-picker. |
| Tipo | string |
| Valor padrão | --- |
value
| Atributo | --- |
| Descrição | Define o valor inicial do datetime-picker. Pode ser uma instância de Date ou null. Se não for fornecido, o valor padrão será null. |
| Tipo | Date |
| Valor padrão | --- |
weekStartsOn
| Atributo | week-starts-on |
| Descrição | Define o dia da semana em que a semana começa. Os valores possíveis são: 0 - Domingo 1 - Segunda-feira 2 - Terça-feira 3 - Quarta-feira 4 - Quinta-feira 5 - Sexta-feira 6 - Sábado |
| Tipo | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
| Valor padrão | 0 |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDateTimeChange | Evento disparado quando a data selecionada é alterada, tanto por interação do usuário quanto por métodos programáticos. | true |
Métodos
close
| Assinatura | close() => Promise<void> |
| Descrição | Fecha o dropdown do calendário. |
| Parâmetros | --- |
getValue
| Assinatura | getValue() => Promise<Date | null> |
| Descrição | Retorna a data atualmente selecionada no datetime-picker. |
| Parâmetros | --- |
open
| Assinatura | open() => Promise<void> |
| Descrição | Abre o dropdown do calendário. |
| Parâmetros | --- |
reset
| Assinatura | reset() => Promise<void> |
| Descrição | Reseta o estado interno do componente para os valores iniciais. |
| Parâmetros | --- |
setValue
| Assinatura | setValue(value: Date | null) => Promise<void> |
| Descrição | Define a data selecionada no datetime-picker. |
| Parâmetros | value: Data a ser definida ou null para resetar o valor |
toggle
| Assinatura | toggle() => Promise<void> |
| Descrição | Alterna o estado do dropdown do calendário entre aberto e fechado. |
| Parâmetros | --- |