How to use datepicker in update panel

Question

I am trying to use datepicker in updatepanel but is not working.

I searched it in stackoverflow, find some similar questions and their answers but that answers are not working with my updatepanel.

Please help me.

My datepicker code with update panel is below-

$(document).ready(function () {
    ApplyDatePicker();
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyDatePicker);

});

function ApplyDatePicker() {
    $('input.datepicker').datepicker({ 'datepicker'});
}

<asp:UpdatePanel ID="panelHolidays" runat="server">
<ContentTemplate>
    <asp:HiddenField ID="hdnValue" runat="server" />
    <asp:Label ID="lblMsg" runat="server" Text="" ForeColor="Brown" Font-Bold="true"></asp:Label>
    <asp:Panel ID="panelAddHoliday" runat="server" GroupingText="Add Holidays" Visible="false">

            <table style="width: 100%;">
                <tr>
                    <td>
                        <asp:Label ID="lblHolidayName" runat="server" Text="Name"></asp:Label><font color="red">*</font>
                        </td>
                    <td>
                        <asp:TextBox ID="txtHolidayName" runat="server" CssClass="autosuggest"></asp:TextBox>
                        <asp:RequiredFieldValidator SetFocusOnError="true" ID="rfHolidayName" runat="server" ControlToValidate="txtHolidayName"
                            ErrorMessage="Name is required." ToolTip="Field is required." ValidationGroup="Save"><font color="red">*</font></asp:RequiredFieldValidator>

                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID= "lblHolidayDate" runat="server" Text="Date"></asp:Label><font color="red"">*</font>
                    </td>
                    <td>
                        <asp:TextBox ID="txtHolidayDate" runat="server" CssClass="datepicker"></asp:TextBox>
                        <asp:RequiredFieldValidator SetFocusOnError="true" ID="rfHolidayDate" runat="server" ControlToValidate="txtHolidayDate"
                            ErrorMessage="Date is required." ToolTip="Field is required." ValidationGroup="Save"><font color="red">*</font></asp:RequiredFieldValidator>

                        <asp:RegularExpressionValidator ID="reHolidayDate" runat="server" 
                            SetFocusOnError="true" ControlToValidate="txtHolidayDate"
                              ErrorMessage="Date in MM/dd/yyyy Format." ValidationGroup="Save" 
                            ValidationExpression="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" ForeColor="Red"></asp:RegularExpressionValidator>

                    </td>
                </tr>
       </table>
</asp:Panel>
    <asp:Panel ID="panelEditHoliday" runat="server" CssClass="Panel" GroupingText="Edit Holiday" Visible="false">
        <table style="width: 100%;">

            <tr>
                <td>
                    <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label><font color="red">*</font>
                    <asp:HiddenField ID= "hfLength" runat="server" />
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator SetFocusOnError="true" ID="saveReq" runat="server" ControlToValidate="txtName"
                        ErrorMessage="Field is required." ToolTip="Field is required." ValidationGroup="Update"><font color="red">*</font></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                    <td>
                        <asp:Label ID= "lblDate" runat="server" Text="Date"></asp:Label><font color="red"">*</font>
                    </td>
                    <td>
                        <asp:TextBox ID="txtDate" runat="server" CssClass="datepicker"></asp:TextBox>
                        <asp:RequiredFieldValidator SetFocusOnError="true" ID="rfDate" runat="server" ControlToValidate="txtDate"
                            ErrorMessage="Date is required." ToolTip="Field is required." ValidationGroup="Update"><font color="red">*</font></asp:RequiredFieldValidator>

                        <asp:RegularExpressionValidator ID="reDate" runat="server" 
                            SetFocusOnError="true" ControlToValidate="txtDate"
                              ErrorMessage="Date must be in MM/DD/YYYY Format" ValidationGroup="Update" 
                            ValidationExpression="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" ForeColor="Red"></asp:RegularExpressionValidator>

                    </td>
           </tr>
      </table>
 </asp:Panel>


</ContentTemplate>

Using these script-

<script src="../JS/jquery-1.10.2.js"></script>
<script src="../JS/jquery-ui-1.10.4.custom.min.js"></script>

Answer 1

Change your script.

It should be like this-

$(document).ready(function () {
    ApplyDatePicker();
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyDatePicker);

});

function ApplyDatePicker() {
    $('input.datepicker').datepicker();
}