Input Date
Campo de data com calendário dropdown. Duas variantes: data única (1 mês) e período (2 meses independentes). Botões cancelar e aplicar no footer. Dark mode automático via tokens semânticos.
Data
Clique no campo para abrir o calendário. Selecione um dia e clique em Aplicar.
Carregando exemplo...
Período
Dois meses com navegação independente. Selecione a data inicial e final, depois clique em Aplicar.
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o input date.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.date-group | classe | — | Wrapper flex column do componente. |
.date-label | classe | — | Label do campo (14px medium). |
.date-container | classe | — | Container relativo para posicionar o calendário. |
.date-trigger | classe | — | Campo trigger (40px, ícone calendário à direita). |
.date-placeholder | classe | — | Placeholder (00/00/0000). |
.date-value | classe | — | Valor selecionado. |
.date-icon | classe | — | Ícone calendário (18x18). |
.date-calendar | classe | — | Dropdown calendário. |
.date-calendar-month | classe | — | Painel de um mês (300px). Período usa dois. |
.date-calendar-btn--cancel | classe | — | Botão cancelar no footer. |
.date-calendar-btn--apply | classe | — | Botão aplicar no footer. |
.date-helper | classe | — | Texto de apoio / erro. |
.is-open | classe | — | Abre o calendário. |
.has-error | classe | — | Estado de erro. |
.is-disabled | classe | — | Desabilita o campo. |
Código
Snippets prontos para copiar e usar.
Data única
html
<div class="date-group">
<label class="date-label">Label</label>
<div class="date-container">
<div class="date-trigger">
<span class="date-placeholder">00/00/0000</span>
<span class="date-icon"><!-- SVG calendar --></span>
</div>
<div class="date-calendar">
<div class="date-calendar-body">
<div class="date-calendar-month"></div>
</div>
<div class="date-calendar-footer">
<button class="date-calendar-btn date-calendar-btn--cancel">Cancelar</button>
<button class="date-calendar-btn date-calendar-btn--apply">Aplicar</button>
</div>
</div>
</div>
</div>Período (2 meses)
html
<div class="date-group">
<label class="date-label">Label</label>
<div class="date-container">
<div class="date-trigger">
<span class="date-placeholder">00/00/0000 - 00/00/0000</span>
<span class="date-icon"><!-- SVG calendar --></span>
</div>
<div class="date-calendar">
<div class="date-calendar-body">
<div class="date-calendar-month"></div>
<div class="date-calendar-month"></div>
</div>
<div class="date-calendar-footer">
<button class="date-calendar-btn date-calendar-btn--cancel">Cancelar</button>
<button class="date-calendar-btn date-calendar-btn--apply">Aplicar</button>
</div>
</div>
</div>
</div>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-container-default | Background do campo |
--surface-overlay-neutral-container-default | Background do calendário |
--surface-overlay-neutral-container-hover | Hover nos dias / range between |
--border-base-neutral-default | Borda do campo |
--border-base-neutral-strong | Borda no foco |
--border-overlay-neutral-default | Borda do calendário |
--accent-300 | Dia selecionado / botão aplicar |
--text-overlay-neutral-default | Texto do calendário |
--text-overlay-neutral-subtle | Dias de outro mês |
--text-base-neutral-white | Texto no dia selecionado |
--radius-default | Border-radius (6px) |
--spacing-3 | Padding interno (12px) |