Segundo a documentação, um input type="datetime-local"
possui o atributo min
, que indica o valor mínimo a ser aceito. Ou seja, datas anteriores ao valor indicado no atributo min
não serão aceitas.
Então a princípio bastaria setá-lo com o valor desejado. A documentação diz que a data e hora devem estar no formato "YYYY-MM-DDThh:mm" (que é o formato definido pela norma ISO 8601). Mas como você quer que o valor mínimo seja a data atual, o jeito seria alterá-la usando JavaScript. E é aí que começam os problemas...
A princípio, bastaria fazer new Date().toISOString().slice(0, 16)
para obter a data e hora atual no formato que o atributo min
espera. Mas há alguns poréns.
O método toISOString
retorna os valores de data e hora em UTC. Mas campos input
do tipo datetime-local
(e também seus atributos, como o min
) usam o timezone do browser (que não necessariamente será o mesmo que UTC), e isso pode causar alguns problemas meio chatos.
Por exemplo, meu browser está configurado com o Horário de Brasília. Ao rodar o código abaixo, se eu preencher a data e hora atual, não será aceito:
// ATENÇÃO: toISOString() não é a melhor opção, veja explicação abaixo
var hoje = new Date().toISOString().slice(0, 16);
// DOMContentLoaded: assim que carregar a página
document.addEventListener('DOMContentLoaded', function() {
var campo = document.querySelector('#agend');
// seta a data mínima para o campo
campo.min = hoje;
// mostra mensagem de erro customizada (caso não queira a mensagem padrão do browser)
campo.addEventListener('invalid', function(e) {
e.target.setCustomValidity(`A data não pode ser anterior a ${hoje}`);
});
campo.addEventListener('input', function(e) {
e.target.setCustomValidity('');
e.target.checkValidity();
});
});
<form>
<input type="datetime-local" id="agend" value="">
<input type="submit" value="Enviar">
</form>
Isso porque new Date().toISOString()
gera uma string levando-se em conta a data e hora em UTC. Por exemplo, testei o código hoje (29/08/2022), às 11h no Horário de Brasília. Porém, toISOString()
retorna 2022-08-29T14:00:00.000Z
(repare que a hora é 14h, pois 11h no Horário de Brasília corresponde a 14h em UTC). Ou seja, o resultado de new Date().toISOString().slice(0, 16)
é 2022-08-29T14:00
.
Mas como o campo datetime-local
(e também o atributo min
) trabalha no timezone do browser, ele acha que o menor valor aceito para o campo deve ser 29/08/2022, às 14h no Horário de Brasília. Então se eu selecionar a data de hoje, e um horário entre 11h e 13h59 (que em tese seriam válidos), ele não aceita.
Isso porque ao fazer o slice
na saída de toISOString
, eu deliberada e erroneamente eliminei a informação de que aquela data e hora estão em UTC (pois é isso que o "Z" no final indica). Como eu misturei valores em UTC (a saída de toISOString
) com valores no timezone do browser (o valor do atributo min
, além do próprio input
), ocorrem essas discrepâncias.
O mais garantido seria setar o valor do atributo min
nos valores que correspondam ao timezone do browser, em vez de UTC. Infelizmente não tem uma forma direta de, ao mesmo tempo, obter a data/hora no mesmo fuso do browser e no formato ISO 8601. O jeito é fazê-lo manualmente:
function pad(valor) {
return valor.toString().padStart(2, '0');
}
function formata(data) {
return data.getFullYear() + '-' + pad(data.getMonth() + 1) + '-' + pad(data.getDate())
+ 'T' + pad(data.getHours()) + ':' + pad(data.getMinutes());
}
var hoje = formata(new Date());
// DOMContentLoaded: assim que carregar a página
document.addEventListener('DOMContentLoaded', function() {
var campo = document.querySelector('#agend');
// seta a data mínima para o campo
campo.min = hoje;
// mostra mensagem de erro customizada (caso não queira a mensagem padrão do browser)
campo.addEventListener('invalid', function(e) {
e.target.setCustomValidity(`A data não pode ser anterior a ${hoje}`);
});
campo.addEventListener('input', function(e) {
e.target.setCustomValidity('');
e.target.checkValidity();
});
});
<form>
<input type="datetime-local" id="agend" value="">
<input type="submit" value="Enviar">
</form>