asp.net - pasadas - jquery datepicker hora

¿Por qué mi jQuery UI datepicker no funciona para las devoluciones de datos cuando funciona bien en las cargas iniciales de la página?

Question

He intentado integrar jQuery UI Datepicker en nuestra aplicación ASP.NET WebForms. La aplicación utiliza páginas maestras para proporcionar un aspecto común a todas las páginas, y todas las páginas de contenido se crean dentro de ContentTemplate de un UpdatePanel. Creé un control de usuario para ajustar la funcionalidad del selector de fecha y permitir la configuración de minDate, maxDate, validators, etc. para cada fecha desde el código subyacente en tiempo de ejecución. También necesito tratar con la forma en que ASP.NET genera ID de elementos de cliente.

Durante la última semana, he buscado alto y bajo, y encontré muchos consejos para que funcione. Aquí hay una versión un tanto simplificada de dónde estoy ahora.

<asp:TextBox ID="txtTB" runat="server"
    MaxLength="10"
    CssClass="dateBox" />

<script type="text/javascript">

    // This function enables the datepicker behavior for this textbox by its ClientID.
    function <%=txtTB.ClientID %>() {
        $("#<%=txtTB.ClientID %>").datepicker({
            changeMonth: true, changeYear: true,
            showOn: ''button'',
            buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
            buttonImageOnly: true, buttonText: '''', duration: '''',
            onSelect: function() { }
        });
    };

    // Register the above function to execute on initial page load...
    $(document).ready(function(){ <%=txtTB.ClientID %>(); }) ;

    // ...and also after any update panel it''s on has been refreshed. 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%=txtTB.ClientID %>);

</script>

He omitido los validadores y algunas otras marcas que no creo que estén relacionadas con el problema, pero esa es la esencia del control del usuario: un cuadro de texto y el guión jQuery que habilita la funcionalidad del selector de fecha. La idea básica es aprovechar los ID de cliente de ASP.NET para:

1. Proporcione un nombre de función único para la función de JavaScript para este control específico
2. Registre esa función con jQuery para habilitar el selector de fecha después de la carga de la página inicial
3. Registre esa misma función con PageRequestManager de ASP.NET para mantener habilitados los marcadores de fecha después de las devoluciones de datos

Los artículos 1 y 2 funcionan de maravilla. Sin embargo, después de una devolución de datos, la funcionalidad datepicker se pierde y me queda solo un cuadro de texto.

¡Pero espera! Eso no es todo. Una página determinada consta de múltiples paneles, de los cuales solo uno es visible a la vez. Estos se seleccionan teniendo solo la propiedad Visible verdadera para el panel actual. La propiedad Visible para todos los demás paneles está configurada en falso.

Ahora consiga esto: los datapickers en el primer panel, el que se muestra en la carga de la página inicial, funcionan como se esperaba. Los del segundo panel simplemente no aparecen. Volviendo a la primera página, los marcadores de fecha aparecen de nuevo.

¿Alguien tiene alguna idea de dónde me estoy equivocando?

Answer 1

Creo que una forma más limpia de hacerlo es usar ClientScriptManager.RegisterStartupScript .

Javascript:

function initCalendar(controlId) {
    $("#" + controlId).blahblah(....
}

En su código detrás ( OnPreRender tal vez):

Page.ClientScript.RegisterStartupScript(this.GetType(), "SomeName", string.Format("<script>initCalendar(''{0}'');</script>", txtBox.ClientID));

Answer 2

Cuando establece la propiedad Visible del control en false , no se procesa en absoluto.

Eso significa que el Javascript dentro de los paneles invisibles no existía cuando la página se cargó por primera vez.

Para solucionar esto, puede ocultar sus paneles utilizando CSS ( display: none ) en lugar de la propiedad Visible .

Answer 3

Mientras que $ (document) .ready () es ideal para rutinas de inicialización únicas, te deja en suspenso si tienes un código que debe volver a ejecutarse después de cada devolución de datos parcial. La funcionalidad de LiveQuery agregada en jQuery v1.3 + ayuda con esto, pero solo funciona para un conjunto limitado de funcionalidades.

Por ejemplo, ¿qué pasaría si quisiéramos agregar un jQueryUI datepicker al TextBox en el ejemplo anterior? Agregarlo en $ (document) .ready () funcionaría bien, hasta que se produzca una devolución de datos parcial. Entonces, el nuevo elemento TextBox del UpdatePanel ya no tendría el dato de fecha programado.

<script type="text/javascript">
  function pageLoad() {
    $(''#TextBox1'').unbind();
    $(''#TextBox1'').datepicker(); 
  }
</script>

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
  <ContentTemplate>
    <asp:Button runat="server" ID="Button1" />
    <asp:TextBox runat="server" ID="TextBox1" />
  </ContentTemplate>
</asp:UpdatePanel>

Esta respuesta anterior se toma del siguiente enlace. Lo he probado e implementado en uno de mis proyectos.

http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/

Answer 4

Pruebe esto dentro del panel de actualización

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function() {
            var customer = document.getElementById("<%=cmbCustomers.ClientID%>").value;

            /* Jquery Functions Here*/
            $(document).ready(function() {
               ...
            });


        });
        </script>

Answer 5

Bien,

Aquí está la solución de este problema. El siguiente enlace explica por qué el marcador de fecha no funciona después de la devolución de datos de Ajax y la solución para hacerlo funcionar dentro de ajax.

http://jquerybyexample.blogspot.com/2010/08/jquery-datepicker-does-not-work-after.html

Answer 6

Lo siento por la respuesta tardía.

Por qué no probar esto:

<script type="text/javascript">
function <%=txtTB.ClientID %>() {
    $("#<%=txtTB.ClientID %>").datepicker({
        changeMonth: true, changeYear: true,
        showOn: ''button'',
        buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
        buttonImageOnly: true, buttonText: '''', duration: '''',
        onSelect: function() { }
    });
};
$(document).ready(function(){ 
<%=txtTB.ClientID %>();
}) ;
</script>

a continuación, coloque el cuadro de texto en un panel de actualización con el siguiente desencadenador:

<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTB" runat="server" MaxLength="10" CssClass="dateBox" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="txtTB" />
</Triggers>
</asp:UpdatePanel>

Answer 7

Simplemente use el código de abajo en el código de Page_Load detrás de ..

string DOB = Request.Form[TextBoxDOB.UniqueID];

TextBoxDOB.Text = DOB;

Implementé esto y funciona como un encanto

Answer 8

Si está utilizando el panel de actualización, no se deje llevar por el pánico simplemente haga clic aquí y relájese. Respuesta elaborada

Answer 9

La solución me ayudó. Los valores de fecha y hora deben estar en la función pageLoad () para que el selector de fechas se muestre en las devoluciones. Aquí está mi código de trabajo

<script>
    var dateToday = new Date();
    var yrRange = "2000:" + (dateToday.getFullYear()); // the range is from 2003 :2016 etc etc

    //If this datepicker is not in page load , the datepicker will not show after a post back
    function pageLoad() {

        $("#<%= txtDateFrom.ClientID %>").datepicker({ showButtonPanel: true   //Use this to show the today,done and previous and next buttons on the calender
            , changeMonth: true,     //Use this to let the user select the month easily on the calender instead of using next and previous buttons
        changeYear: true
         , yearRange: yrRange
        /***********************************
         u8se these to show the max and min dates yoiu want tio show the user
         //,minDate: "-12Y"
        // , maxDate: "+1M +10D" 
        ******************************/

        // , numberOfMonths: 2                - Use this code to show more than 1 month on the calender

        /*********************
        Use the following code to show the Calender as a Icon next to the textbox.
         showOn: "button",
        buttonImage: "images/calendar.gif",
         buttonImageOnly: true,
        buttonText: "Select date"
        ******************************/                
        });

        $("#<%= txtDateTo.ClientID %>").datepicker({
            showButtonPanel: true   //Use this to show the today,done and previous and next buttons on the calender
            , changeMonth: true,     //Use this to let the user select the month easily on the calender instead of using next and previous buttons
            changeYear: true
             , yearRange: yrRange
            // minDate: -20
            // , maxDate: "+1M +10D" - u8se these to show the max and min dates yoiu want tio show the user
            //In our case
            //, maxDate: "+1Y"
            // , numberOfMonths: 2                - Use this code to show more than 1 month on the calender

            /*********************
           Use the following code to show the Calender as a Icon next to the textbox.
             ,showOn: "button",
             buttonImage: "images/icons/calendarIcon.png" ,
             buttonImageOnly: true,
            buttonText: "Select date"
           ******************************/
        });            
    }       
</script>