HTML Impedir que o usuário coloque uma data futura

[AlefSilva96]

Eu vi que existe um input em HTML que é do tipo date, e exibe um date picker para escolher a data

 

Eu gostaria de saber como eu faço para impedir que o usuário coloque uma data que ainda não estamos

 

Exemplo: hoje é dia 01/10/2020, então ele não consegue colocar uma data 02/10/2020

 

Quero que ele consiga colocar somente a data atual ou anterior

[DiF]

@aleffelipe96 Olá, o input date no html5 é novo. Não tem como limitar direto nele... porém você pode  manipular com javascript.

 

HTML:

<input type="date" id="calendario" />

 

Javascript:

calendario.max = new Date().toISOString().split("T")[0];

 

Veja o exemplo funcionando: https://jsfiddle.net/dife/y9b65xwm/1/

 

@aleffelipe96 Só deve lembrar que isso só vale para o "datepicker" do elemento. Se a pessoa escrever ou usar as "setinhas cima e baixo" ainda vai poder colocar uma data a frente.

Nesse caso, você pode retirar as arrows do datepicker com CSS:

input[type="date"]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

E quanto ao escrever a data direto,  você pode manipular com javascript.colocando direto no elemento desta forma:

 

<input type="date" id="calendario" onkeydown="return false" />

Desta forma, você não vai permitir que o usuário escreva no campo, mas vai permitir que escolha a data com o datepicker!