InlineDateInput
InlineDateInput são componentes para escolha de datas e horas dentro de formulários.
Recomendamos o uso de InlineDateInput quando:
- Houver a necessidade de oferecer opções de datas dentro de um grupo de inputs de um formulário.
Não recomendamos o uso de InlineDateInput quando:
- For necessário exibir informações adicionais condicionais no calendário (ex.: datas que já estejam ocupadas).
- For necessário que o calendário seja exibido constantemente.
- For necessário alterar dinamicamente o estado da tela exibida, baseado na data escolhida. Para estes casos, recomenda-se o uso de Calendar.
Preview
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 Input. As opções são 'default', 'valid', 'loading' e 'invalid'. |
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 MonthAndYearPicker 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 |
placeholder | string | 'Selecione uma data' | -- | Texto placeholder para o MonthAndYearPicker. |
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 MonthAndYearPicker. Deve ser uma string no formato `yyyy-MM-dd`. |
maxDate | string | '' | -- | A data máxima selecionável no MonthAndYearPicker. 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 MonthAndYearPicker. |
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. |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento emitido quando uma data é selecionada. Utilizado para implementar o v-model. |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento emitido quando uma data é selecionada. Utilizado para implementar o v-model. |
Slots
Nome | Descrição |
|---|---|
#label | Slot para renderização customizada da label. |