Ir para o conteúdo principal

DatePicker

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​

Atributodisabled
DescriçãoDesabilita a interação do calendário quando ativo.
Tipoboolean
Valor padrãofalse

disabledDates​

Atributo---
DescriçãoLista de datas indisponíveis para seleção no calendário.
TipoDate[]
Valor padrão[]

fixedRowCount​

Atributofixed-row-count
DescriçãoDefine 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.
Tipoboolean
Valor padrãofalse

locale​

Atributolocale
DescriçãoLocale usado para gerar nomes de meses e dias da semana.
Tipostring
Valor padrão'pt-BR'

rangeEnd​

Atributo---
DescriçãoData final selecionada quando o calendário opera no modo de intervalo.
TipoDate
Valor padrãonull

rangeStart​

Atributo---
DescriçãoData inicial selecionada quando o calendário opera no modo de intervalo.
TipoDate
Valor padrãonull

referenceDate​

Atributo---
DescriçãoData usada como base visual para o mês atualmente exibido.
TipoDate
Valor padrãonew Date()

selectionMode​

Atributoselection-mode
DescriçãoDefine se a seleção ocorre por data única ou por intervalo.
Tipo"range" | "single"
Valor padrão'single'

value​

Atributo---
DescriçãoData atualmente selecionada pelo usuário, ou null quando não há seleção.
TipoDate
Valor padrãonull

weekStartsOn​

Atributoweek-starts-on
DescriçãoDefine o índice do dia em que a semana começa na interface do calendário.
Tipo0 | 1 | 2 | 3 | 4 | 5 | 6
Valor padrão0

Eventos​

EventoDescriçãoPropagação
dateStateChangeEvento emitido quando a data de referência ou a seleção mudam.true

CSS Shadow Parts​

NomeDescrição
"calendar"Grade geral do calendário.
"container"Parte para o container base do calendário.
"day"Célula individual do dia no calendário.
"grid"Grade de dias do mês.
"header"Cabeçalho do calendário (contendo navegação e seleção de mês/ano).
"month-select"Elemento de seleção do mês.
"weekday"Rótulo individual do dia da semana.
"weekdays"Container para os rótulos dos dias da semana.
"year-input"Elemento de entrada do ano.

Dependências​

Componente pai​

Usado por​

Depende de​

Gráfico​

Migração: Vue 1.x → Stencil 2.x​

Propriedades​

🟦 Propriedades renomeadas​

Propriedade VuePropriedade StencilDescriçãoTipoPadrão

🟥 Propriedades removidas​

PropriedadeDescriçãoTipoPadrão

🟩 Novas propriedades​

PropriedadeDescriçãoTipoPadrão

Eventos​

🟦 Eventos renomeados​

Evento VueEvento StencilDescrição

🟥 Eventos removidos​

PropriedadeDescriçãoTipoPadrão

🟩 Novos eventos​

EventoDescrição

Slots​

🟦 Slots renomeados​

Slot VueSlot StencilDescrição

🟥 Eventos removidos​

PropriedadeDescriçãoTipoPadrão

🟩 Slots criados​

SlotDescrição