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");
}

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");
}

• javascript
• jquery
• asp
• datepicker

• we cant help wihtout what you have for code and what have you tried. – echo_Me Commented Dec 6, 2012 at 18:38
• yes, a high-level view would be to convert the values of both textboxes to Date objects and use the Date API methods.. – Sajjan Sarkar Commented Dec 6, 2012 at 18:40
• The problem is I am at home..and do not have access to code..I thought the explanation could help..anyways I'll try updating in the morning. – Richa Commented Dec 6, 2012 at 19:03
• I would do it the easy way include date.js in your project and use that. I remend using date.js for any javascript date manipulation it works great. datejs. – Bill Blankenship Commented Dec 6, 2012 at 21:33

3 Answers 3

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

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

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");
                }