jQuery UI Datepicker - Number of Days Between Dates

Question

I am using jQuery UI Datepicker. I have two date fields. I would like to find the number of days difference between the two dates.

Once I have the number of days, I’d like to put said number of dasy into a textfield.

Any help with this issue would be much appreciated.

Cheers.

Answer 1

You can use onselect event to get dates.

$('#date1').datepicker({
   onSelect: function(dateText, inst) { 
       var d1=new Date(dateText);
       // get date from other text field
       var d2=new Date($('#date2').val());
       // d2 -d1 gives result in milliseconds
       // calculate number of days by Math.abs((d2-d1)/86400000, as 24*3600*1000 = 86400000
       // and populate it to some text field #textfield
       $('#textfield').val((Math.abs((d2-d1)/86400000)));
   }
}); 

Answer 2

I solved it with the dateRange Datepicker instead of using 2 different Datepickers then i calculate the number of days in the range and reply it into a textfield as you needed. I hope it helps.

HTML

<form>
    <label>From</label>
    <input id="from" readonly="readonly" name="from" type="text" value="">
    <label>To</label>
    <input id="to" readonly="readonly" name="to" type="text" value="">
    <label>Days</label>
    <input id="days" readonly="readonly" name="days" type="text" value="">
</form>

jQuery UI

<script>
var from = new Date();
var to = new Date();
var dayDiff = 1;

$(function() {
var dates = $( "#from, #to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );

            if (this.id == "from"){
                from = $(this).datepicker('getDate');
                if (!(to == "")){
                    update_days()
                }
            }
            if (this.id == "to"){
                to = $(this).datepicker('getDate');
                update_days()
            }
        }
    });
});

function update_days(){
    dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
    $("#days").empty()
    $("#days").append(dayDiff)
}
</script>

Answer 3

You need to understand the basic formula for getting days between dates, check here

Googling "number of days between two dates javascript" produces this great snippet (actually all the top results are relevant to your question):

var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2008,01,12);
var secondDate = new Date(2008,01,22);

var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));

> (This is taken from stackoverflow answer, to see in detail, please check here)

Use below code for getting the no of dates between days

function showDays() {
    var start = $('#arr_date').datepicker('getDate');
    var end = $('#dep_date').datepicker('getDate');
    if (!start || !end) return;
    var days = (end - start) / 1000 / 60 / 60 / 24;
    $('#num_nights').val(dayss);
}

$("#arr_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,
     onClose: function( selectedDate ) {
         var dParts = selectedDate.split('-');
         var in30Days = new Date(dParts[2] + '/' +
                        dParts[1] + '/' +
                        (+dParts[0] + 30)
               );

    $( "#dep_date" ).datepicker( "option", "minDate", in30Days );
    }
});
$("#dep_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,

});

Here is MYFIDDLE