日期选择器不适用于更新面板答案

【问题标题】：Date picker is not working with update panel日期选择器不适用于更新面板
【发布时间】：2013-01-11 14:00:19
【问题描述】：

我的应用程序在 asp.net 3.5 中，我从更新面板内的日期选择器中选择日期。选择日期并单击提交按钮页面后回发。回发后，当我再次尝试选择日期时，我看不到那里的日期选择器。

//aspx页面上的代码

 <%@ Page Title="" Language="C#" MasterPageFile="~/Sample/MasterPage.master" AutoEventWireup="true" CodeFile="UpdateProblem.aspx.cs" Inherits="Sample_UpdateProblem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="jscolor/jscolor.js"></script>  // Script for date 
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="panel1" runat="server">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="textbox" CssClass="color" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

提前致谢

【问题讨论】：

您必须在某处为您的日期选择器设置一些初始化脚本，因此在回发后它不会被执行（因为它在更新面板中）。您需要手动执行它或更改设置日期选择器的方式。您能否发布您实际使用的代码？
@ppetrov 谢谢回复，我已添加代码，请检查
我在您发布的代码中没有看到任何日期选择器，也许您在 js 文件的某个地方定义了它？（顺便说一句，我认为@Aghilas Yakoub 的答案就是您要寻找的；））

标签： c# asp.net scriptmanager

【解决方案1】：

在您的 UpdatePanel 中，在您的测试框上添加 css 类

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
           <asp:TextBox ID="TextBox1" runat="server" CssClass="classTarget"></asp:TextBox>
           ..... 
        </ContentTemplate>
</asp:UpdatePanel>

在您的脚本中添加此代码

   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
   </script>
   <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $('.classTarget).datepicker({ dateFormat: 'dd-mm-yy' });
            }

        });
    </script>

【讨论】：

添加这个脚本
并检查您的 css 类，如果您使用颜色 css 类，请在您的脚本中替换
它工作得很好，但你能解释一下代码它到底在做什么
为什么这条线停止了 Response.write 的工作请回答

【解决方案2】：

$(function () {
   bindDatePickers(); // bind date picker on first page load
   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDatePickers); // bind date picker on every UpdatePanel refresh
});

function bindDatePickers() {
   $('#<%= txtInvoiceDateFrom.ClientID%>').datepicker({
      uiLibrary: 'bootstrap4'
   });
   $('#<%= txtInvoiceDateTo.ClientID%>').datepicker({
      uiLibrary: 'bootstrap4'
   });
 }

【讨论】：