jQuery Datepicker day count

Question

I've got two jQuery UI datepickers and when they've both had dates chosen, I'd like the difference between these dates to be displayed in a separate input[type="text"] as soon as the second date is selected.

Also, I'd ideally like my count to subtract any weekend days and just count days from Monday - Friday.

My (relevant) code is as follows:

JS:

$('#firstday, #lastday').datepicker({
  dateFormat: 'dd/mm/yy'
});

XHTML:

<label for="firstday">First Day of Leave</label>
<input type="text" name="firstday" id="firstday" />

<label for="lastday">Last Day of Leave</label>
<input type="text" name="lastday" id="lastday" />

<label for="totaldays">Total Days</label>
<input type="text" name="totaldays" id="totaldays" />

Lots of searching has led me to lots of different solutions, none of which I can get to work as I'd like so any ideas would be appreciated.

Do you have access to any back-end code such as PHP or .NET? It might be easier to post the values back to the server and return the date difference. Also, have you seen this Stack Overflow question? http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-jquery — White Elephant, Jan 31 '11 at 16:12
Yes, I have access to PHP. I'd never consider going down the JavaScript route for this usually but as I know that the only machines that will ever need to use this page cannot turn JS off I thought I'd be safe to use it. Thanks for the link, I'll take a look through that. — , Jan 31 '11 at 16:22

Krule · Accepted Answer · 2011-01-31T22:01:18.573

Something like this should work:

$("#firstday, #lastday").datepicker({
  onSelect: function (){

    // Date will give time difference in miliseconds, that is why we divide with 1000*60*60*24

    var firstday = new Date($("#firstday").val().split("/").reverse().join(","));
    var lastday = new Date($("#lastday").val().split("/").reverse().join(",");
    $("#totaldays").val((lastday - firstday) / 86400000);        
  }
});

In node console it gives:

> x = new Date("18/5/2010".split("/").reverse().join(","))
Mon, 17 May 2010 22:00:00 GMT
> y = new Date("18/5/2015".split("/").reverse().join(","))
Sun, 17 May 2015 22:00:00 GMT
> x-y
-157766400000
> y-x
157766400000
> (y-x)/86400000
1826

-- EDIT --

When you have starting date and ending date number of days that are weekend is easily calculated using getDay() which returns from 0 for Sunday, 1 for Monday ... 6 for Saturday.

Yo could use .getMonth() and .getDate() combined with few else{} conditions for holidays as well.

var weekend_count = 0;
for (i = firstday.valueOf(); i <= lastday.valueOf(); i+= 86400000){
 var temp = new Date(i);
 if (temp.getDay() == 0 || temp.getDay() == 6) {
   weekend_count++;
 }
}

and in the end you just do

$("#totaldays").val( (lastday - firstday) / 86400000 - weekend_count);

Just to make a note at the end. You should probably extrapolate this code (as much of it as you can) in a separate function in order to keep your code easier to maintain and in case you need that same function on some other place.

Good luck.

Hi, thanks for the answer. I've combined your code with my dateFormat but it's throwing up the good old 'NaN' problem. I'll have a play about... — , Jan 31 '11 at 16:25
I have made few corrections. Just to add, you could use Math.abs(x-y) to disregard negative value. — Krule, Jan 31 '11 at 16:35
Yeah that's looking good, cheers. I've added a '+1' in there to make the dates inclusive but that's great. Any idea how to discount weekends?! — , Jan 31 '11 at 16:48

jQuery Datepicker day count

1 Answers1

Linked