Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Propriedades
disabled
| |
|---|
| Atributo | disabled |
| Descrição | Desabilita toda a interação do componente.
Quando true, impede abrir o picker, alterar valores e navegar entre datas/horários. |
| Tipo | boolean |
| Valor padrão | false |
disabledDates
| |
|---|
| Atributo | disabled-dates |
| Descrição | Define um conjunto de datas indisponíveis para seleção.
Aceita uma lista de Date e/ou strings parseáveis, ou uma string com datas
separadas por espaço em branco. Datas inválidas são ignoradas com warning.
A comparação considera apenas o dia (ano/mês/dia), ignorando hora. |
| Tipo | DatetimePickerDisabledDate[] | string |
| Valor padrão | null |
fixedRowCount
| |
|---|
| Atributo | fixed-row-count |
| Descrição | Define se o calendário deve manter um número fixo de linhas (6 semanas = 42 dias)
ou variar conforme o mês.
Quando true, o calendário sempre exibe 6 semanas completas.
Quando false, o calendário adapta-se ao mês, exibindo apenas as semanas necessárias. |
| Tipo | boolean |
| Valor padrão | false |
initialMoment
| |
|---|
| Atributo | initial-moment |
| Descrição | Define a seleção inicial do componente.
Aceita:
- 'now': seleciona o momento atual.
- Date ou string: seleciona uma data arbitrária.
- null: inicia sem seleção.
Reativo em runtime: mudanças na prop atualizam estado e subcomponentes. |
| Tipo | Date | string |
| Valor padrão | null |
locale
| |
|---|
| Atributo | locale |
| Descrição | Define o locale usado pelos subcomponentes para formatar datas e rótulos. |
| Tipo | string |
| Valor padrão | 'pt-BR' |
mode
| |
|---|
| Atributo | mode |
| Descrição | Define o modo de seleção exibido pelo componente: data, horário ou ambos.
Valores aceitos: date, time ou datetime.
Valores inválidos são corrigidos automaticamente para o valor padrão,
mantendo o atributo refletido sempre consistente com o modo exibido. |
| Tipo | "date" | "datetime" | "time" |
| Valor padrão | 'datetime' |
name
| |
|---|
| Atributo | name |
| Descrição | Nome do campo para submissão em formulários nativos. |
| Tipo | string |
| Valor padrão | '' |
placeholder
| |
|---|
| Atributo | placeholder |
| Descrição | Define o placeholder exibido no campo de entrada do datetime picker. |
| Tipo | string |
| Valor padrão | '' |
required
| |
|---|
| Atributo | required |
| Descrição | Indica se o campo deve ter valor antes do envio do formulário. |
| Tipo | boolean |
| Valor padrão | false |
selectionMode
| |
|---|
| Atributo | selection-mode |
| Descrição | Define o tipo de seleção de datas para o calendário: única ou intervalo.
range só funciona em conjunto com mode="date".
Se selectionMode="range" for informado, o componente ajusta automaticamente
mode para date. Se mode mudar para time ou datetime, o componente
normaliza selectionMode para single quando necessário. |
| Tipo | "range" | "single" |
| Valor padrão | 'single' |
weekStartsOn
| |
|---|
| Atributo | week-starts-on |
| Descrição | Define o dia inicial da semana exibida no calendário.
Valores suportados: 0 (domingo) a 6 (sábado). |
| Tipo | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
| Valor padrão | 0 |
Eventos
| Evento | Descrição | Propagação |
|---|
dateStateChange | Evento público emitido quando a data de referência ou a seleção mudam. | true |
Métodos
checkValidity
| |
|---|
| Assinatura | checkValidity() => Promise<boolean> |
| Descrição | Permite que consumidores acionem validação nativa do formulário via host. |
| Parâmetros | --- |
clear
| |
|---|
| Assinatura | clear() => Promise<void> |
| Descrição | Limpa valor e intervalo selecionados. |
| Parâmetros | --- |
close
| |
|---|
| Assinatura | close() => Promise<void> |
| Descrição | Fecha o picker. |
| Parâmetros | --- |
| |
|---|
| Assinatura | focusInput() => Promise<void> |
| Descrição | Move o foco para o input nativo interno. |
| Parâmetros | --- |
getRange
| |
|---|
| Assinatura | getRange() => Promise<{ start: Date | null; end: Date | null; } | null> |
| Descrição | Retorna o intervalo de datas selecionado quando em modo selectionMode="range". |
| Parâmetros | --- |
getValue
| |
|---|
| Assinatura | getValue() => Promise<Date | null> |
| Descrição | Retorna uma cópia do valor selecionado atualmente. |
| Parâmetros | --- |
isOpen
| |
|---|
| Assinatura | isOpen() => Promise<boolean> |
| Descrição | Consulta se o picker está atualmente aberto. |
| Parâmetros | --- |
open
| |
|---|
| Assinatura | open() => Promise<void> |
| Descrição | Abre o picker quando o componente estiver habilitado. |
| Parâmetros | --- |
reportValidity
| |
|---|
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Permite exibir mensagens nativas de validação no host. |
| Parâmetros | --- |
resetToInitial
| |
|---|
| Assinatura | resetToInitial() => Promise<void> |
| Descrição | Restaura o estado inicial atualmente registrado para reset. |
| Parâmetros | --- |
setDisabledDates
| |
|---|
| Assinatura | setDisabledDates(dates: DatetimePickerDisabledDate[] | null) => Promise<void> |
| Descrição | Define programaticamente as datas desabilitadas por meio de array.
Útil quando o componente é usado via HTML e o consumidor precisa enviar
uma lista tipada em runtime. |
| Parâmetros | dates: - Lista de datas (Date|string) a bloquear. |
setRange
| |
|---|
| Assinatura | setRange(start: Date | string | null, end: Date | string | null) => Promise<void> |
| Descrição | Define intervalo de datas de forma imperativa, forçando modo date e selectionMode range. |
| Parâmetros | start:
end: |
setValue
| |
|---|
| Assinatura | setValue(value: Date | string | null) => Promise<void> |
| Descrição | Define o valor atual de forma imperativa aceitando Date, string serializada ou null. |
| Parâmetros | value: |
toggle
| |
|---|
| Assinatura | toggle() => Promise<void> |
| Descrição | Alterna o estado de abertura do picker. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|
"container" | Parte para o container base do seletor. |
"input-container" | Container base do campo de entrada interno. |
"input-field" | Campo textual interno. |
"input-icon" | Ícone de ação (calendário/relógio). |
"panel" | Parte para o painel em forma de card que engloba o seletor. |
Dependências
Subcomponentes
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novas propriedades
| Propriedade | Descrição | Tipo | Padrão |
|---|
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novos eventos
Slots
🟦 Slots renomeados
| Slot Vue | Slot Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Slots criados
