MonthAndYearPicker
MonthAndYearPickers permitem que o usuário selecione um mês e ano através de um campo de texto e um seletor interativo.
Quando usar:
- O usuário precisar selecionar apenas o mês e ano, sem especificar o dia
Quando não usar:
- O usuário precisar selecionar uma data específica com dia, mês e ano (use DateInput).
- O usuário precisar selecionar um intervalo de datas (use DateInput com a propriedade range).
- For necessário selecionar apenas o ano, sem o mês.
⚠️ Observações:
- O
v-modelrecebe e retorna uma string no formato ('yyyy-MM'). - Por padrão, o componente exibe o mês e ano atual ao abrir, a menos que um valor seja fornecido.
- O componente aplica automaticamente restrições de navegação baseadas nas propriedades minDate e maxDate.
Com Limites de Data
O MonthAndYearPicker permite definir datas mínimas e máximas para restringir a seleção.
Funcionamento:
- As props minDate e maxDate limitam o período disponível para seleção.
- A navegação entre anos é automaticamente limitada com base nesses valores.
- Meses fora do intervalo permitido são desabilitados e não podem ser selecionados.
- Os valores de
minDatee demaxDatedevem ser fornecidos no formato ISO ('yyyy-MM-dd').
supportingText
Floating Label
Controla o estilo visual do input, ativando o comportamento de "label flutuante".
supportingText
Base
Este é o modo de operação padrão do MonthAndYearPicker que permite ao usuário selecionar um mês e ano no seletor.
Funcionamento:
- O v-model recebe e retorna uma string no formato ('yyyy-MM').
- Ao clicar no input, um seletor de meses é exibido organizado em grade, com o ano atual no cabeçalho.
- O usuário pode navegar entre anos usando os botões de seta no cabeçalho.
- Ao selecionar um mês, o seletor fecha automaticamente e atualiza o valor.
Preview
supportingText
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. |