Me baseando nessa resposta do @Bacco, pode usar o atributo onchange
do campo pra fazer essa verificação.
function funcao(data){
var dtInicio = document.getElementById('data1');
var dtFim = document.getElementById('data2');
if(dtInicio.value.length > 0 && dtFim.value.length > 0){
dtInicio = dtInicio.value.split("/");
dtFim = dtFim.value.split("/")
data1 = new Date(dtInicio[2] + "/" + dtInicio[1] + "/" + dtInicio[0]);
data2 = new Date(dtFim[2] + "/" + dtFim[1] + "/" + dtFim[0]);
var total = dateDiferencaEmDias(data1, data2);
if(isNaN(total)){
alert("Data inserida invalida!");
}else{
alert("total de: " + total + " dias");
}
}
}
function dateDiferencaEmDias(a, b) {
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / ( 1000 * 60 * 60 * 24) );
}
Digite uma data de inicio: <input type='text' id='data1' onchange='funcao(this.value)'><br/>
Digite outra data final: <input type='text' id='data2' onchange='funcao(this.value)'>
Obs: não sou um adepto do uso do Jquery
quando não ha a necessidade do mesmo...
Update respondendo a duvida do autor da pergunta
Você pode usar o campo date sem nenhum problema, e só trocar o type='text'
por type='date'
.
Não importa onde você chama o código JavaScript
, lembrando sempre que você deve respeitar os padrões de escrita HTML
.
Um exemplo do código completo pra você ter uma ideia de como você pode montar:
<html>
<head>
<script>
function funcao(data){
var dtInicio = document.getElementById('data1');
var dtFim = document.getElementById('data2');
if(dtInicio.value.length > 0 && dtFim.value.length > 0){
dtInicio = dtInicio.value.split("/");
dtFim = dtFim.value.split("/")
data1 = new Date(dtInicio[2] + "/" + dtInicio[1] + "/" + dtInicio[0]);
data2 = new Date(dtFim[2] + "/" + dtFim[1] + "/" + dtFim[0]);
var total = dateDiferencaEmDias(data1, data2);
if(isNaN(total)){
alert("Data inserida invalida!");
}else{
alert("total de: " + total + " dias");
}
}
}
function dateDiferencaEmDias(a, b) {
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / ( 1000 * 60 * 60 * 24) );
}
</script>
</head>
<body>
<form>
Digite uma data de inicio: <input type='date' id='data1' onchange='funcao(this.value)'><br/>
Digite outra data final: <input type='date' id='data2' onchange='funcao(this.value)'>
</form>
</body>
</html>