Datepicker in jquery mobile è duplicato quando viene aggiunto in una seconda pagina

Ho bisogno di aiuto con l'applicazione datepicker nell'app mobile.Datepicker in jquery mobile è duplicato quando viene aggiunto in una seconda pagina

Sto usando l'interfaccia utente jQuery con datepicker nella mia app. Ma il DatePicker è mostrato due volte (duplicato) quando lo metto nella seconda pagina. Comunque quando inserisco il datepicker nella prima pagina, viene mostrato ok.

Questo è un esempio, se lo si esegue si può vedere che il datepicker è duplicato nella seconda pagina.

<!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>

Grazie per avermi aiutato in anticipo.

fonte

2011-02-09 Yaz

Onestamente jQuery Mobile è progetto molto sperimentale e hanno ancora molti bug –

Questa non è una risposta, ma dovrebbe aiutare - tutto quello che fate che funzionerà meglio se si mantiene ONE 'page' div in ogni file html. I widget hanno problemi con questo e i file html multipagina sono gestiti in modo diverso tra JQM alpha2 e alpha3 - ha rotto anche i miei widget personalizzati. – naugtur

Inoltre ho trovato una lib di jQuery nascosta: http://jquerymobile.com/test/js/ che è il widget dell'interfaccia utente di jQuery. Non so se questo aiuta –

Finalmente abbiamo ottenuto una soluzione da uno dei miei project manager. Dobbiamo fare un lavoro in jquery.ui.datepicker.mobile.js.

Sostituire il seguente metodo utilizzando il codice riportato di seguito.

$(".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 funzione di cui sopra pagecreate chiamerà ogni volta il caricamento della pagina. La stessa creazione di selezione data in esecuzione verrà eseguita durante la navigazione nella pagina successiva. Quindi abbiamo aggiunto una condizione per eseguire questa riga una sola volta durante il caricamento della pagina. Ora sta funzionando bene.

fonte

2011-02-10 13:56:36 ramkumar

Grazie Ramkumar! – Yaz

Grazie a questo problema risolto il problema del layout multi-datepicker, ma voglio comunque nasconderlo/mostrarlo a fuoco: http://stackoverflow.com/questions/5005565/multiple-calendars-displayed-or-value-selected-not-displaying-correctly –

abbiamo ottenuto questo lavoro, ma ci sono voluti un po 'di cazzeggio:

nei nuovi js DatePicker mobili, spostare la funzione updateDatepicker() al di fuori del campo di applicazione della funzione di fn.datepicker sovresposta in modo che possa essere chiamato ovunque e modificarlo per rimuovere scoping all 'dp' in questo modo:

funzione 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()); 
     }); 
};

nell'annuncio jquery.ui.datepicker.js d una chiamata a updateDatepicker(); alla fine della funzione _updateDatepicker
nel cp di datepicker mobile, cambiare la classe di ui-datepicker in modo che assomigli: .ui-datepicker {overflow: visible; margine: 0; larghezza massima: 500 px; larghezza minima: 300 px; larghezza: 50%; }
modificare la funzione DatePicker si legano a questo aspetto:

// si legano alla pagecreate per migliorare automaticamente ingressi data
$ (".ui-page") .Live ("pagecreate", la funzione () {
$ ("input [type = 'date'], input [data-type = 'date']") .each (function() { $ (this) .datepicker ({altField: "#" + $ (this) .attr ("id"), showOtherMonths: true}); }); });

fonte

2011-02-23 11:36:47

Vecchio post, ma ancora rilevante apparentemente.

Mi trovavo di fronte allo stesso problema. Ecco cosa ho fatto. La soluzione era nascondere la classe hasDatepicker e mostrare lo specifico ID datapicker che voglio.

in HTML, avvolgo il selettore data in un div con un ID:

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

In js, in primo luogo ho nascondere la classe hadDatepicker, quindi mostrare quello che mi interessa.

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

Un'altra soluzione potenziale è nascondere solo il secondo istante di .hasDatepicker. Non ho usato questo metodo, dal momento che la tempistica è più di un problema.

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

fonte

2015-07-18 21:32:50

Datepicker in jquery mobile è duplicato quando viene aggiunto in una seconda pagina

risposta

Problemi correlati