6

Apesar de serem 3 perguntas creio que todas valem para o mesmo caso sobre o "range/intervalo"

  • É possível limitar o "intervalo" entre duas datas no <input type="month">?

  • Se sim, existe algum padrão de formato obrigatório que devemos seguir ao passar os valores que limitam?

  • Este "limite" é suportado por quais navegadores e dispositivos mobile?

2 Respostas 2

6

É possível limitar o "intervalo" entre duas datas no <input type="month">?

Você pode utilizar os atributos min e max.

Assim:

 <input id="aniversario" type="month" name="aniversario"
     min="1900-01" max="1999-12">

Se sim, existe algum padrão de formato obrigatório que devemos seguir ao passar os valores que limitam?

No caso do [type=month], O formato precisa ser YYYY-MM (onde YYYY é ano com 4 dígitos e MM é o mês com dois dígitos).

Este "limite" é suportado por quais navegadores e dispositivos mobile?

De acordo com a tabela de compatibilidade do MDN, o suporte ainda não é completo.

No meu Firefox, por exemplo, não funcionou. E existe um bug que foi informado a respeito desse input.

Além disso, o Internet Explorer e o Safari também não têm suporte ainda.

No Android, parece que o Firefox também não tem suporte.

Tabela de compatibilidade do input type month

Validação

Além disso, a MDN alerta a respeito da validação de entrada de dados:

Por padrão, input[type="month"] não aplica nenhuma validação aos valores inseridos. As implementações da interface do usuário geralmente não permitem inserir algo que não seja uma data, o que é útil, mas você ainda pode enviar o formulário com a entrada vazia ou inserir uma data inválida (por exemplo, no dia 32 de abril).

Polyfill

Eu encontrei um Polyfill para o input[type=month], mas parece-me que o mesmo depende de jQuery (coisa que não me agrada muito).

6

É possível limitar o "intervalo" entre duas datas no <input type="month">?

Sim, é possível limitar o "intervalo" entre duas datas. Para isso você pode usar o atributo min e max. Veja um exemplo:

<input type="month" value="2018-09" min="2018-01" max="2018-12"> 

No exemplo anterior estamos limitando a pergunta para que o usuário só possa escolher o mês no ano de 2018, entre Janeiro e Dezembro.

Se sim, existe algum padrão de formato obrigatório que devemos seguir ao passar os valores que limitam?

O padrão de formato obrigatório que devemos seguir ao usar o atributo min, max ou até mesmo o value é o seguinte: YYYY-MM.

Onde Y é o ano, no caso 2018, e M é o mês, nesse caso 09. Logo, ficaria: 2018-09.

Este "limite" é suportado por quais navegadores e dispositivos mobile?

No Desktop apenas Chrome/Opera e Edge suportam.

inserir a descrição da imagem aqui

No celular a maioria dos navegadores modernos suportam.

Obs.: onde está marcado em vermelho significa que não há suporte, já o verde simboliza que o navegador suporta a tag.

inserir a descrição da imagem aqui

De acordo com o caniuse atualmente 86.66% dos navegadores suportam (parcialmente ou totalmente) o atributo, entre desktop e mobile.

Referências:

MDN

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .