InputDate
Input de data do EletroDS (MeInputDate) — digitação, calendário, intervalo e dias desabilitados; props, variantes e estados.
InputDate, usado no código como <MeInputDate>. Estende o InputDate do Nuxt UI e trabalha com @internationalized/date (CalendarDate). Não recrie um seletor de data à mão.Uso em tela
Um único campo de data: digita-se a data (dd/mm/aaaa) ou, com datepicker, escolhe-se num calendário. O valor é controlado por v-model. Vive dentro de um FormField (rótulo, ajuda, erro) como qualquer campo.
Variantes
Escolha pelo cenário:
| Quero… | Use |
|---|---|
| Só digitar a data | padrão (sem datepicker) |
| Escolher num calendário | datepicker |
| Selecionar um período (de–até) | datepicker + range |
| Bloquear dias úteis / fins de semana | disabledWeekdays / disabledWeekends |
| Ajustar aparência | color · size · variant · highlight |
Estados
| Estado | Comportamento |
|---|---|
| Default | Editável por digitação; abre o calendário quando datepicker. |
disabled | Impede edição e abertura do calendário. |
highlight | Realça o campo com a cor atual (semelhante ao foco) — útil para erro/validação. |
| Erro (via FormField) | A mensagem e o required vêm do FormField que o envolve. |
Múltiplas datas — MeInputDateMultiple
Quando o campo precisa de várias datas (não uma só), use o componente irmão MeInputDateMultiple. Cada data escolhida vira uma tag no campo; o v-model é um array de CalendarDate.
| Quero… | Use |
|---|---|
| Várias datas soltas | padrão (v-model = array de CalendarDate) |
| Escolher no calendário | datepicker |
| Vários intervalos (início–fim) | range → v-model vira array de { start, end } |
| Bloquear dias úteis / fins de semana | disabledWeekdays / disabledWeekends |
| Manter em 1 linha (tags que sobram viram contador) | counter (sem ele, cresce até 2 linhas + scroll) |
| Aparência | color · size · variant · highlight |
Emite addTag / removeTag (ao adicionar/remover uma data) e invalid (data inválida), além de focus/blur. Funciona dentro de um FormField como o MeInputDate. É também o valor de um critério de filtro com data múltipla — ver CriterionInput › Valor múltiplo.
No código
<MeInputDate> é um componente EletroDS que estende o InputDate do Nuxt UI: aceita todas as props dele mais datepicker, range, disabledWeekdays e disabledWeekends. Emite update:modelValue, update:placeholder, change, blur e focus. Ficha técnica em eletro.design/components/inputdate; a base, em ui.nuxt.com/docs/components/input-date. A variante múltipla é o MeInputDateMultiple (eletro.design/components/inputdatemultiple).
Acessibilidade
Navegação por teclado no calendário (setas + Enter); o campo aceita digitação além do clique. O formato esperado (dd/mm/aaaa) deve estar na ajuda do FormField, não só implícito. O estado disabled precisa ser percebido além da cor.