Calculate difference between two dates in jquery using asp.net / Difference between two dates in asp.net using jquery

Introduction :

This article helps to calculate difference between two dates in jquery Using asp.net.

First select from date and to date then we calculate no days in between two days. Here i calculate inside the ContentPlaceHolderID(Using Master Page)

Desiging page(Source Code):

    <script type="text/javascript">

        function DateDifference() {

           $('#<%= txtDays.ClientID %>').val('');

           var mySplitStartDate = $('#<%= txtFirstDate.ClientID %>').val().split('-');

           var mySplitEndDate = $('#<%= txtSecondDate.ClientID %>').val().split('-');

var startDate = new Date(mySplitStartDate[2] + "/" + mySplitStartDate[1] + "/" + mySplitStartDate[0]);

var endDate = new Date(mySplitEndDate[2] + "/" + mySplitEndDate[1] + "/" + mySplitEndDate[0]);

           if (!isNaN(endDate)) {

                var timeDiff = endDate - startDate

                var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

                $('#<%= txtDays.ClientID %>').val(daysDiff);

           }

        }

// Page load event call using asp.net

        $(document).ready(function () {

            DateDifference()

        });

// After Page postback call the event using asp.net

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {

            if (args.get_error() == undefined) {

                DateDifference()

            }

        }

   </script>

 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

          <asp:Label ID="lblFirstDate" runat="server" Text="First Date"></asp:Label>

        <asp:TextBox ID="txtFirstDate" TabIndex="-1" runat="server" SkinID="Date_Skin" onchange="javascript:DateDifference();"></asp:TextBox>

        <asp:ImageButton ID="imgbtnCalender" TabIndex="-1" runat="server" SkinID="Calender_Skin" />

        <asp:CalendarExtender ID="ceDate" TargetControlID="txtFirstDate" Format="dd-MMM-yyyy"

            PopupButtonID="imgbtnCalender" runat="server">

        </asp:CalendarExtender>

          <asp:Label ID="lblSecondDate" runat="server" Text="Second Date"></asp:Label>

        <asp:TextBox ID="txtSecondDate" TabIndex="-1" runat="server" SkinID="Date_Skin" onchange="javascript:DateDifference();"></asp:TextBox>

        <asp:ImageButton ID="imgSecondCalender" TabIndex="-1" runat="server" SkinID="Calender_Skin" />

        <asp:CalendarExtender ID="ceSecondDate" TargetControlID="txtSecondDate" Format="dd-MMM-yyyy" PopupButtonID="imgSecondCalender" runat="server">

        </asp:CalendarExtender>

           <asp:Label ID="lblDays" runat="server" Text="No of Days"></asp:Label>

        <asp:TextBox ID="txtDays" runat="server" Width="100px" Enabled="false"></asp:TextBox>

        <asp:FilteredTextBoxExtender ID="FeDays" runat="server" FilterMode="ValidChars" FilterType="Custom" TargetControlID="txtDays" ValidChars=".0987654321">

        </asp:FilteredTextBoxExtender>

    

</asp:Content>

Demo :