DateInput
DateInputs permitem que o usuário selecione uma data ou um intervalo de datas através de um calendário interativo.
Quando usar:
- O usuário precisar selecionar uma data específica (ex: data de nascimento, data de agendamento, data de referência).
- O usuário precisar selecionar um período (data de início e fim), habilitando a propriedade range.
Quando não usar:
- O usuário precisar selecionar um horário junto com a data (este componente lida apenas com datas).
- O usuário precisar selecionar múltiplas datas que não formam um intervalo contínuo.
- For preciso selecionar a penas mês ou ano, sem especificar o dia.
- For preciso digitar a data;
⚠️ Observações:
- O
v-modelpara data única recebe e retorna uma string no formato ISO ('yyyy-MM-dd'). - Quando a propriedade range for true, o v-model recebe e retorna um objeto com as chaves start e end, ambas strings no formato ISO ('yyyy-MM-dd').
- O componente expõe métodos úteis como clearSelection(), getDMYFormat(), toISO(), toJSDate(), etc., que podem ser acessados via ref.
- Importante: no modo de seleção única, por padrão o ano mínimo disponível para seleção é o ano atual - 120 anos e o ano máximo é o ano atual + 50 anos.
Data única (Padrão)
Este é o modo de operação padrão do DateInput quando a prop range é false (ou não fornecida). Ele permite ao usuário selecionar um único dia no calendário.
Funcionamento:
- Nesse modo o
v-modelrecebe e retorna uma string no formato ('yyyy-MM-dd'). - Com a seleção de data única é possível selecionar pela UI o mês e ano.
Insira uma data...
Range
A prop range permite habilitar a seleção de um intervalo de datas (início e fim).
Funcionamento:
- Nesse modo o
v-modelrecebe e retorna um objeto com as chaves start e end, ambas strings no formato ('yyyy-MM-dd'). - O primeiro clique no calendário define a data de início.
- O segundo clique define a data de fim. O calendário é fechado após a seleção da data de fim.
- Os seletores de mês e ano no cabeçalho do calendário são desabilitados no modo range.
Insira uma data...
MaxDate e MinDate
A prop range permite habilitar a seleção de um intervalo de datas (início e fim).
Funcionamento:
- As props minDate e maxDate limitam o período disponível para seleção.
- Os valores de
minDatee demaxDatedevem ser fornecidos no formato ISO ('yyyy-MM-dd'). - Meses fora do intervalo permitido são desabilitados e não podem ser selecionados.
- Anos fora do intervalo permitido são desabilitados e não podem ser selecionados.
Insira uma data...
Mobile
Controla o estilo visual do input, ativando o comportamento de "label flutuante". (Substitui a prop mobile depreciada).
supportingText
Digitação
O modo de digitação é ativado passando-se o valor typing para a prop mode. Nesse deixa de ser possível selecionar a data pelo picker.
supportingText
Uso
js
<CdsDateInput
variant="green"
size="md"
text="Lorem Ipsum"
@click="dateInputClick = true"
/>Preview
Digite algo...
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
label | string | 'Label' | -- | Especifica a label do input. |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
state | string | 'default' | default valid loading invalid | Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'. |
mode | string | 'picking' | typing picking | Define o modo de interação com o DateInput. Quando definido como 'typing', o componente permite apenas digitação. No modo 'picking', a data deve ser selecionada através do date picker, desabilitando a digitação direta. |
range | boolean | false | -- | Quando true, o usuário poderá selecionar um intervalo de datas. |
required | boolean | false | -- | Exibe asterisco de obrigatório (obs.: não faz a validação) |
disabled | boolean | false | -- | Desabilita o input. |
fluid | boolean | false | -- | Especifica se a largura do DateInput deve ser fluida. |
mobile Deprecated | boolean | false | -- | Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile |
floatingLabel | boolean | false | -- | Define o tipo do input, se true será um input adaptado para o mobile |
showTodayDot Deprecated | boolean | false | -- | Essa prop vai ser renomeada para prop `highlightToday` na v4. Controla a marcação do dia atual no calendário. |
highlightToday | boolean | false | -- | Controla a marcação do dia atual no calendário. |
placeholder | string | 'Selecione uma data' | -- | Texto placeholder para o DateInput. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro, que será exibida caso o estado seja inválido |
minDate | string | '' | -- | A data mínima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`. |
maxDate | string | '' | -- | A data máxima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`. |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
supportingText | string|array | '' | -- | Especifica mensagem de auxílio. |
supportLink | string | null | -- | Controla a exibição e o conteúdo do link de suporte exibido ao lado da label. |
supportLinkUrl | string|null | null | -- | Define a url a ser acessada no clique do link de suporte. |