如何在更新面板中使用日期选择器

Question

我正在尝试在更新面板中使用日期选择器，但无法正常工作。

我在 stackoverflow 中搜索了它，找到了一些类似的问题及其答案，但这些答案不适用于我的更新面板。

请帮帮我。

我的带有更新面板的日期选择器代码如下-

$(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>

使用这些脚本-

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

Answer 1

改变你的脚本。

应该是这样的-

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

});

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