Well, my question is the following, I have a form with 2 inputs , or people put 2 dates in each. If followed I have a javascript that calculates the difference between the 2 dates.
I would like to know how I would do it so that without the person giving submit on the form, as soon as I finished filling out the form an alert saying that the difference dates were 'x'.
In real time, without having to click submit , let javascript give me the value of the difference variable with an alert .
The input has an event called onkeyup, which is when the user "releases" the key. Then you will check to see if he has finished typing. For example, if the date is in the format "dd / mm / yyyy", it checks whether the value of the input x already has size 10.
Using jquery:
$("#target").keyup(function() {
var valor = $(this).val().length;
if (valor === 10){
// ...
}
});
Speak brother,
I think jQuery would help you a lot in this case:
If you would like the submit to be activated when the focus is removed from your field:
$("#seuCampo").blur(function(){
alert(Sua função com o retorno do valor);
});
Now, if you want the function to be called when you finish writing the date, thinking that your date is mm / dd / yyyy try this:
$('#seuCampo').change(function(){
if($('#seuCampo').val().length === 10){
alert(Sua função com o retorno do valor);
}
});
You may need to validate to see if both fields have been filled in.
I hope I have helped.
Hugs
Based on in this response of @Bacco, you can use the onchange attribute of the field to do this verification .
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 : I am not an adept at using Jquery when there is no need for it ...
You can use the date field with no problem, and only change type='text' to type='date' .
It does not matter where you call the code JavaScript , always remembering that you must abide by the HTML writing standards.
An example of the complete code for you to get an idea of how you can mount:
<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>
You no longer need to watch events, let Angular.js take care of this.
To handle dates, use Moment.js; you can do without, but to lose your hair so young, right?
See an example that works: link