5

My jquery datepicker fields set a min and max date for the start and end fields, and that seems to throw off my attempts to write a script to calculate the number of days between the selected dates. I know others have asked this question, but every fix I've tried here on stackoverflow has failed to work, I suspect because of the customizations I have in my code. Can anyone please help me figure out how to take the code below and make it provide me a value in an input field called #totaldays? Thanks

// Calendar Dates
/* create an array of days which need to be disabled */
var disabledDays = ["11-13-2012","11-14-2012","11-15-2012","11-29-2012","11-30-2012"];

/* utility functions */
function nationalDays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
  for (i = 0; i < disabledDays.length; i++) {
    if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
      return [false];
    }
  }
  return [true];
}


//Block the Weekends
function noWeekendsOrHolidays(date) {
   var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
} 

$(document).ready(function () {
$.datepicker.setDefaults({dateFormat: 'mm/dd/yy',minDate: +1,changeMonth: true,changeYear: true,numberOfMonths: 2,constrainInput:true,beforeShowDay:nationalDays,});
        var selector = function (dateStr) {
            var d1 = $('#datepicker_start').datepicker('getDate');
            var d2 = $('#datepicker_end').datepicker('getDate');
            var diff = 0;
            if (d1 && d2) {
                diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
            }
            $('#totaldays').val(diff);
        }
$('#datepicker_start').datepicker({onSelect: function(selectedDate) {
    var minDate = $(this).datepicker('getDate');
    if (minDate) {minDate.setDate(minDate.getDate() + 3);}//min days requires
    $('#datepicker_end').datepicker('option', 'minDate', minDate || 1); // Date + 1 or tomorrow by default
}});
$('#datepicker_end').datepicker({minDate: 1, onSelect: function(selectedDate) {
    var maxDate = $(this).datepicker('getDate');    
    if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);}
    $('#datepicker_start').datepicker('option', 'maxDate', maxDate); // Date - 1    
}});
    $('#datepicker_start,#datepicker_end').change(selector)
});

Thanks!

1 Answer 1

11

I've created this function that I usually run in the onSelect function of the datepickers to calculate the days between them :

function days() {
    var a = $("#datepicker_start").datepicker('getDate').getTime(),
        b = $("#datepicker_end").datepicker('getDate').getTime(),
        c = 24*60*60*1000,
        diffDays = Math.round(Math.abs((a - b)/(c)));
    console.log(diffDays); //show difference
}

FIDDLE

4
  • Very cool, but check out moment.js ... It's an awesome library for anything date/time related.
    – Derrick
    Commented Jan 19, 2013 at 23:13
  • 1
    This will not work if the Start date and End date is in Different Year. Eg: in: Dec 20 2014 and Out: jan 10 2015. Any fix for that also? Commented Dec 8, 2014 at 12:07
  • @SurjithSM - I'm running into the same problem. Did you find a way to calculate difference in days between different years?
    – Patricia
    Commented Jan 13, 2017 at 23:48
  • This works perfectly fine for me across years? After all, it uses milliseconds for both the difference and the calculation of days, and has no notion of what year it is at all.
    – adeneo
    Commented Jan 14, 2017 at 3:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.