0

Então pessoal, to quebrando a cabeça aqui. tenho um input do type=date e quero q invés dele mostrar DD/MM/AAAA eu queria que só mostrasse MM/AAAA para o usuário. e também que o ano mínimo seja o atual.

<input required="required" type="date" id="date" placeholder="&zwnj;" />

eu procurei aqui no fórum e não achei nada que resolva esse problema meu somente em outras linguagens.

OBS: consegui fazer com o 'select' mas não achei legal pq ficou mts linhas de codigo e tive q colocar 1 por 1. e acredito q vai ser dificil de mexer com esses dados no sql.

<div>
                    <select name="mes" required>
                        <option value="Janeiro">01</option>
                        <option value="Fevereiro">02</option>
                        <option value="marco">03</option>
                        <option value="abril">04</option>
                        <option value="maio">05</option>
                        <option value="junho">06</option>
                        <option value="julho">07</option>
                        <option value="agosto">08</option>
                        <option value="setembro">09</option>
                        <option value="outubro">10</option>
                        <option value="novembro">11</option>
                        <option value="dezembro">12</option>
                    </select>

                    <select name="ano" required>
                        <option value="2021">21</option>
                        <option value="2022">22</option>
                        <option value="2023">23</option>
                        <option value="2024">24</option>
                        <option value="2025">25</option>
                        <option value="2026">26</option>
                        <option value="2027">27</option>
                        <option value="2028">28</option>
                        <option value="2029">29</option>
                        <option value="2030">30</option>
                        <option value="2031">31</option>
                        <option value="2032">32</option>
                        <option value="2033">33</option>
                        <option value="2034">34</option>
                        <option value="2035">35</option>

                    </select>

                </div>

gostaria da melhor solução pro meu problema, não precisa ser como eu to falando.

2

2 Respostas 2

5

Não é possível no type=date, no entanto existe o <input type="month">, só que o problema dele é que que apenas alguns navegadores o suportam e navegadores antigos (acaso precise de retrocompatibilidade) não irão suportar:

Confira o suporte no caniuse, resumo dos navegadores com e sem suporte até o momento:

Chrome Edge Firefox Opera Safari WebView Android Chrome Android Firefox Android Opera Android Safari iOS Samsung Internet
20 12 não * 11 não * sim sim 18 sim sim sim

Então no Firefox e Safari (dois navegadores muito usados), isso não vai funcionar.

Exemplo de uso:

<input type="month">

O type="month" também suporta min="" e max="", para definir a data mínima e máxima e para definir isso basta setar manualmente usando um valor vindo de um back-end ou via JavaScript, usando Element.setAttribute('') e use Element.value="" para setar o valor inicial ou o <input ... value="">, colocando entre as aspas o valor vindo do back-end.

Em JavaScript bastaria:

<input type="month" id="meucampo" max="2030-12">
<script>
var dataLocal = new Date;
var mes = dataLocal.getMonth() + 1;

//Se o mês for menor que 10 adiciona o 0 a frente
if (mes < 10) mes = "0" + mes;

var dataMinima = dataLocal.getFullYear() + "-" + ;
var meucampo = document.getElementById('meucampo');

meucampo.value = dataMinima;

// Data minima
meucampo.setAttribute("min", dataMinima);
</script>

Vela lembrar que isso é só exemplo.

7
  • a parte de aparecer só mês e ano deu certo. Mas e para que o ano mínimo for o atual? por exemplo, ta aparecendo pra selecionar ano infinito. e queria que o menor ano a aparecer seja 2022 ou mais precisamente o ano q o usuario está acessando o site. 29/01/2022 às 3:04
  • @G'DogTrampos atualizei a resposta, demorei pq o site tinha ficado fora do ar.
    – Syzoth
    29/01/2022 às 4:00
  • qual seria a solução para que seja aceito em todos os navegadores? 29/01/2022 às 16:10
  • @G'DogTrampos você pode fazer dois selects dinamicos ou usar uma biblioteca javascript que simule isso. Mas solução nativa não tem por enquanto, se tivesse pode ter certeza que eu teria postado :)
    – Syzoth
    29/01/2022 às 22:22
  • @G'DogTrampos Na documentação tem um exemplo pra funcionar em qualquer browser (basicamente é o que já foi sugerido acima: dois selects, um pro mês, outro pro ano)
    – hkotsubo
    30/01/2022 às 0:13
-2

HTML:

<input type="month">

JavaScript:

const anoAtual = new Date().getFullYear();
const mesAtual = new Date().getMonth();

const input = document.querySelector("input");

if(mesAtual <= 9) {
  input.setAttribute("min", `${anoAtual}-0${mesAtual + 1}`);
  input.setAttribute("value", `${anoAtual}-0${mesAtual + 1}`);
} else {
  input.setAttribute("min", `${anoAtual}-${mesAtual + 1}`);
  input.setAttribute("value", `${anoAtual}-${mesAtual + 1}`);
}

Estou adicionando o valor de 1 no mesAtual pois no JavaScript os meses são contados a partir do index 0. Criei um if e else para adicionar um 0 antes das unidades, pois esse é o padrão requerido pelo HTML, da para encurtar mais esse código porém dessa forma fica mais simples de ser entendido

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