jQuery, HTML, how to get the number of days between two dates and post it

Question

For my datepicker I have jquery-1.10.2.js and jquery-ui-1.10.4.js, and I'm trying to simply put the amount of days between datepicker1 and datepicker2 in a box next to it.

on my page in wordpress I have:

<script type="text/javascript">
$(function() {
    $( "#datepicker1" ).datepicker({ minDate: 0, dateFormat: "MM d, yy" });
});
</script><script type="text/javascript">
$(function() {
    $( "#datepicker2" ).datepicker({ minDate: 0, dateFormat: "MM d, yy" });
});
</script>

and the user can just change the dates:

<strong>Date</strong> 
<input id="datepicker1" type="text" name="datepicker1" value="" /> - 
<input id="datepicker2" type="text" name="datepicker2" value="" /> 
<input id="calculated" type="text" name="calculated" value="" /> Day(s)

What do I do so when the user changes dates it shows the difference in "calculated"? Note I am a novice at javascript, and I've been searching around but nothing helps me.

Answer 1

you get the difference in days like so:

function dateDiffDays(d1, d2) {
    var t2 = d2.getTime();
    var t1 = d1.getTime();
    return parseInt((t2-t1)/(24*3600*1000));
}

var date1 = $("#datepicker1").datepicker("getDate");
var date2 = $("#datepicker2").datepicker("getDate");

var dateDiffInDays = dateDiffDays(date1, date2);

to put the value into the "calculated" input field:

$('#calculated').val(dateDiffInDays);

Answer 2

Use getDate to fetch Date objects from datepicker and then find out the difference like this:

JS:

 $(document).ready(function() {

    $( "#datepicker1" ).datepicker({ minDate: 0, dateFormat: "MM d, yy" });
    $( "#datepicker2" ).datepicker({ minDate: 0, dateFormat: "MM d, yy" });

    $('#datepicker2').on('keyup mouseup change', function(){
        var date1 = $('#datepicker1').datepicker( "getDate" );
        var date2 =  $('#datepicker2').datepicker( "getDate" );
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diff = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

         $('#calculated').val(diff);
    });
});

HTML:

<strong>Date</strong> 
<input id="datepicker1" type="text" name="datepicker1" value="" /> - 
<input id="datepicker2" type="text" name="datepicker2" value="" /> 

<br><br>

<input id="calculated" type="text" name="calculated" value="" /> Day(s)

DEMO

Answer 3

This is how I've done it, this is assumming DateTime is formatted DD/MM/YYYY

        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();

        var startDateSplit = startDate.split("/");
        var endDateSplit = endDate.split("/");

        var stDate = new Date(startDateSplit[2], (startDateSplit[0] - (1)), startDateSplit[1]);
        var enDate = new Date(endDateSplit[2], (endDateSplit[0] - (1)), endDateSplit[1]);

        var daysBetween = (enDate.getTime() - (stDate.getTime())) / (1000 * 60 * 60 * 24); // time in days