Datepicker en jquery mobile está duplicado cuando se agrega en una segunda página

Necesito ayuda con el uso del datepicker en la aplicación móvil.Datepicker en jquery mobile está duplicado cuando se agrega en una segunda página

Estoy usando el jQuery UI datepicker en mi aplicación. Pero el marcador de fecha se muestra dos veces (duplicado) cuando lo coloco en la segunda página. Sin embargo, cuando pongo el marcador de fecha en la primera página, se muestra bien.

Este es un ejemplo, si lo ejecuta puede ver que el marcador de fecha está duplicado en la segunda página.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Datepicker Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/> 
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" /> 
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script> 
    <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head> 
<body> 

<!-- Start of first page --> 
<div data-role="page" id="firstPage"> 
    <div data-role="header"> 
     <h1>First page</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p><a href="#secondPage">Next page with a Datepicker</a></p>  

    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 

</div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="secondPage"> 
    <div data-role="header"> 
     <h1>Second page</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <label for="date">Date Input:</label> 
     <input type="date" name="date" id="date" value="" /> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 

</body> 
</html>

Gracias por ayudarme con anticipación.

Fuente

2011-02-09 Yaz

Honestamente jQuery Mobile es un proyecto muy experimental y todavía tiene muchos errores –

Esto no es una respuesta, pero debería ayudar - lo que lo hace va a funcionar mejor si se mantiene una 'div page' en todos los archivos html. Los widgets tienen problemas con eso y los archivos html de varias páginas se manejan de forma diferente entre JQM alpha2 y alpha3; también rompió mis widgets personalizados. – naugtur

También encontré una jQuery lib oculta: http://jquerymobile.com/test/js/ que es el widget jQuery UI. No sé si esto ayuda –

Finalmente obtuvimos una solución de uno de mis administradores de proyectos. Tenemos que hacer un trabajo en jquery.ui.datepicker.mobile.js.

Reemplace el siguiente método usando el código siguiente.

$(".ui-page").live("pagecreate", function(){  
    $("input[type='date'], input[data-type='date']").each(function(){ 
     if ($(this).hasClass("hasDatepicker") == false) { 
      $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true })); 
      $(this).addClass("hasDatepicker"); 
     } 
    }); 
});

La función anterior pagecreate llamará cada vez que se cargue la página. La misma creación de selector de fecha se ejecutará mientras navega hacia la página siguiente. Por lo tanto, hemos agregado una condición para ejecutar esta línea solo una vez durante la carga de la página. Ahora está funcionando bien.

Fuente

2011-02-10 13:56:36 ramkumar

Gracias Ramkumar! – Yaz

Gracias a esto solucionado el problema del diseño de multi-datepicker, pero aún quiero ocultar/mostrar en foco: http://stackoverflow.com/questions/5005565/multiple-calendars-displayed-or-value-selected-not-displaying-correctly –

Obtuvimos esta trabajando pero nos tomó un faffing:

en los nuevos js datepicker móviles, mover la función updateDatepicker() fuera del ámbito de la función fn.datepicker overriden por lo que se puede llamar en cualquier parte y modificarlo para eliminar toda alcance 'dp', así:

función updateDatepicker() {

$(".ui-datepicker-header"/* , dp */).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); 
    $(".ui-datepicker-prev, .ui-datepicker-next"/* , dp */).attr("href", "#"); 
    $(".ui-datepicker-prev"/* , dp */).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); 
    $(".ui-datepicker-next"/* , dp */).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); 
    $(".ui-datepicker-calendar th"/* , dp */).addClass("ui-bar-c"); 
    $(".ui-datepicker-calendar td"/* , dp */).addClass("ui-body-c"); 
    $(".ui-datepicker-calendar a"/* , dp */).buttonMarkup({corners: false, shadow: false}); 
    $(".ui-datepicker-calendar a.ui-state-active"/* , dp */).addClass("ui-btn-active"); // selected date 
    $(".ui-datepicker-calendar a.ui-state-highlight"/* , dp */).addClass("ui-btn-up-e"); // today"s date 
     $(".ui-datepicker-calendar .ui-btn"/* , dp */).each(function(){ 
     var el = $(this); 
     // remove extra button markup - necessary for date value to be interpreted correctly 
     el.html(el.find(".ui-btn-text").text()); 
     }); 
};

en el jquery.ui.datepicker.js anuncio d una llamada a updateDatepicker(); al final de la función _updateDatepicker
en el móvil datepicker css, cambie la clase ui-datepicker para que se vea como: .ui-datepicker {overflow: visible; margen: 0; ancho máximo: 500px; min-width: 300px; ancho: 50%; }
cambio de la función de planificador de evento se unen a tener este aspecto:

// unen a pagecreate para mejorar automáticamente las entradas de fecha
$ (".ui páginas") .live ("pagecreate", la función () {
$ ("input [type = 'date'], input [data-type = 'date']") .each (function() { $ (this) .datepicker ({altField: "#" + $ (this) .attr ("id"), showOtherMonths: true}); }); });

Fuente

2011-02-23 11:36:47

Publicación anterior, pero sigue siendo relevante al parecer.

Me encontré con el mismo problema. Esto es lo que hice. La solución fue ocultar la clase hasDatepicker y mostrar el ID de datepicker específico que deseo.

en HTML, envuelvo el selector de fechas en un div con un id:

<div id="pick"><input data-role="date"></div>

En js, por primera vez ocultar la clase hadDatepicker, a continuación, mostrar la que me importa.

$(document).on("pageinit", "#mypage", function() { 
    $(".hasDatepicker").hide(); 
    $("#pick").datepicker({}); 
    $("#pick").show(); 
});

Otra posible solución es ocultar solo el segundo instante de .hasDatepicker. No usé este método, ya que el tiempo es más un problema.

$(".hasDatepicker:eq(1)").hide();

Fuente

2015-07-18 21:32:50

Datepicker en jquery mobile está duplicado cuando se agrega en una segunda página

Respuesta

Cuestiones relacionadas