A primeira coisa é entender que o valor de um campo datetime-local
é uma string no formato ISO 8601. Exemplo:
function validar(evt) {
let dataHoraInicio = document.querySelector('#formInsere').dataHoraInicio.value;
console.log(dataHoraInicio);
console.log(typeof dataHoraInicio); // string
evt.preventDefault();
}
document.querySelector('#formInsere').addEventListener('submit', validar);
<form id="formInsere" name="formInsere" method="POST" >
<input type="datetime-local" name="dataHoraInicio">
<input type="submit">
</form>
Colocando a data de "15 de março de 2019, às 10:30", a variável dataHoraInicio
terá o valor igual a 2019-03-15T10:30
. Qualquer data que você colocar terá o seu value
nesse formato ("aaaa-mm-ddThh:mm").
Felizmente a classe Date
do JavaScript reconhece esse formato, então basta você passar este valor para o construtor, e em seguida verificar se o dia, mês e ano são os mesmos.
Pelo que entendi, o formulário não deve ser submetido se a data (dia, mês e ano) for igual, independente dos horários escolhidos. Sendo assim, basta comparar o dia, mês e ano:
let formulario = document.querySelector('#formInsere');
function validar(evt) {
let dataHoraInicio = formulario.dataHoraInicio.value;
let dataHoraFim = formulario.dataHoraFim.value;
if (dataHoraInicio == "") {
alert('Preencha o campo data hora entrada!');
formulario.dataHoraInicio.focus();
evt.preventDefault();
} else if (dataHoraFim == "") {
alert('Preencha o campo data hora saida!');
formulario.dataHoraInicio.focus();
evt.preventDefault();
} else {
// cria as datas
let dtInicio = new Date(dataHoraInicio);
let dtFim = new Date(dataHoraFim);
// verifica se o dia, mês e ano são iguais
if (dtInicio.getDate() === dtFim.getDate()
&& dtInicio.getMonth() === dtFim.getMonth()
&& dtInicio.getFullYear() === dtFim.getFullYear()) {
alert('As datas não podem estar no mesmo dia');
evt.preventDefault();
}
}
}
formulario.addEventListener('submit', validar);
<form id="formInsere" name="formInsere" method="POST">
<label> Data horário entrada</label>
<input type="datetime-local" name="dataHoraInicio"><br>
<label> Data horário saída</label>
<input type="datetime-local" name="dataHoraFim"><br>
<input type="submit">
</form>
A comparação acima considera apenas o dia (getDate()
), mês (getMonth()
) e ano (getFullYear()
). Atenção para não usar erroneamente os métodos getDay()
(que retorna o dia da semana, e não o dia do mês) e getYear()
(que além de estar deprecated, retorna o ano indexado em 1900 - ou seja, 2019 é retornado como 119).
Se quiser comparar tanto a data quanto a hora, basta trocar o if
por:
if (dtInicio.getTime() === dtFim.getTime()) {
// datas são iguais (tanto o dia/mês/ano quanto o horário)
}
getTime()
retorna o valor do timestamp (o número de milissegundos desde o Unix Epoch), e é o modo mais direto de verificar se as datas correspondem exatamente ao mesmo instante.
Lembrando que alguns browsers não suportam o input type=datetime-local
, mas a documentação descreve meios de contornar esta limitação.