Find difference between two dates picked from jQuery datepicker

Question

I have two text boxes that pick dates via jQuery datepickers. I want to access them in JavaScript and find the difference between them in terms of days.

I am accessing the dates via clientID of the text boxes and simply taking the difference, but it is not working for me. Is there some specific way of accessing date values from textboxes filled via datepicker and any special method of finding the difference in terms of days?

My date fields:

<td style="width: 15%">
    <asp:TextBox ID="txtStartDt" runat="server" Enabled="true" Width="80%" ValidationGroup="Save"></asp:TextBox>
    <img alt="Select Date" src="../Images/show-calendar.gif" border="0" style="width: 17px; height: 16px;"  onclick="javascript:calendarPicker('ContentPlaceHolder1_txtStartDt')" id="IMG1" />
</td>
<td style="width: 9%">
    <asp:Label ID="Label3" runat="server" CssClass="label">End Date:</asp:Label>
</td>
<td style="width: 248px">
    <asp:TextBox ID="txtEndDt" runat="server" Enabled="true" Width="126px"></asp:TextBox>
    <img alt="Select Date" src="../Images/show-calendar.gif" border="0" style="width: 17px; height: 16px;" onclick="javascript:calendarPicker('ContentPlaceHolder1_txtEndDt')" id="IMG2" />
</td>

My JavaScript:

function CheckDuration() {
    var toDate1 = document.getElementById('<% =txtStartDt.ClientID%>');
    var toDate2 = new Date(toDate1.value.replace('-', ' '));

    var toDate = toDate2.setDate(toDate2.getDate());

    var toDate4 = document.getElementById('<% =txtEndDt.ClientID%>');
    var toDate5 = new Date(toDate1.value.replace('-', ' '));

    var toDate6 = toDate2.setDate(toDate2.getDate());

    if ((toDate6 - toDate) > 30)
        confirm("Selected time period is of more than 1 month duration");
}

Answer 1

There are built in methods to get a date from an input that has a datepicker, and that date will be a javascript date object, on which you can use functions like getTime() to get milliseconds from epoch, and then just subtract one from the other:

var from_date = $("#from_input").datepicker('getDate'),
    to_date   = $("#to_input").datepicker('getDate');

var diff_in_milliseconds = to_date.getTime() - from_date.getTime();

Now you'll have to figure out how many milliseconds there are in a day?

EDIT:

I'll add an example to this

FIDDLE

Answer 2

using the following Java script you would find the difference between date. Suppose there are two box with the name dtpEventDate = '06/12/2012' and dtpEndDate = '08/12/2012'

var fa = dtpEventDate.split('/')
var ta = dtpEndDate.split('/')

//  var a = new Date(fa[1]-1,fa[0],fa[2]);          
//  var d = new Date(ta[1]-1,ta[0],ta[2]); for MM-dd-yyyy

    var a = new Date(fa[2],fa[1]-1,fa[0]);
    var d = new Date(ta[2],ta[1]-1,ta[0]); // for dd-MM-yyyy

using var a and d we can find the difference between date

Answer 3

function CheckDuration() {
                //                alert("");

                var toDate1 = document.getElementById('<% =txtStartDt.ClientID%>');
                var toDate2 = new Date(toDate1.value.replace('-', ' '));

                var toDate = toDate2.setDate(toDate2.getDate());

                var toDate4 = document.getElementById('<% =txtEndDt.ClientID%>');
                var toDate5 = new Date(toDate4.value.replace('-', ' '));

                var toDate6 = toDate5.setDate(toDate5.getDate());

                if (toDate && toDate6) {
                       diff = ((toDate6 - toDate) / 86400000);

      //                        alert(diff);
                        if(diff>30)
                        return confirm("Selected time period is of more than 1 month duration");
                }