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.

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.

• javascript
• jquery
• jquery-ui
• datepicker

Share Improve this question Follow edited Jan 31, 2011 at 16:00 JasCav 34.7k2121 gold badges116116 silver badges174174 bronze badges asked Jan 31, 2011 at 15:56 user527892user527892 2

• 1 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? stackoverflow./questions/542938/… – White Elephant Commented Jan 31, 2011 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. – user527892 Commented Jan 31, 2011 at 16:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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() bined 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.