Datepicker w jquery mobile jest duplikatem, gdy jest dodawany na drugiej stronie.

Potrzebuję pomocy w korzystaniu z datepicker w aplikacji mobilnej.Datepicker w jquery mobile jest duplikatem, gdy jest dodawany na drugiej stronie.

Używam datepicker jQuery UI w mojej aplikacji. Ale datepicker jest pokazywany dwa razy (duplikat), kiedy umieszczam go na drugiej stronie. Jednak kiedy umieściłem datepicker na pierwszej stronie, pokazuje się ok.

Jest to przykład, jeśli go uruchomisz, zobaczysz, że datepicker jest duplikatem na drugiej stronie.

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

Dzięki za pomoc mnie z góry.

Źródło

2011-02-09 Yaz

Szczerze jQuery mobile to projekt bardzo eksperymentalny i jeszcze wiele błędów –

To nie jest odpowiedź, ale powinno pomóc - cokolwiek to będzie działać lepiej, jeśli trzymać ONE 'page' div w każdym pliku html. Widgety mają z tym problemy i wielostronicowe pliki html są obsługiwane w różny sposób między JQM alpha2 i alpha3 - to także łamało moje niestandardowe widżety. – naugtur

Znalazłem także ukrytą bibliotekę jQuery: http://jquerymobile.com/test/js/, która jest widgetem JQuery UI. Nie wiem, czy to pomaga –

Wreszcie otrzymaliśmy rozwiązanie od jednego z moich kierowników projektów. Musimy wykonać jedną pracę w jquery.ui.datepicker.mobile.js.

Wymień następującą metodę, używając poniższego kodu.

$(".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"); 
     } 
    }); 
});

Powyższa funkcja pagecreate wywoła za każdym razem ładowanie strony. Ta sama funkcja tworzenia wyboru daty zostanie wykonana podczas przechodzenia do następnej strony. Dlatego dodaliśmy warunek uruchomienia tej linii tylko jeden raz podczas ładowania strony. Teraz działa dobrze.

Źródło

2011-02-10 13:56:36 ramkumar

Dzięki Ramkumar! – Yaz

Dzięki temu poprawiono problem z układem wielu danych, ale nadal chcesz ukryć/pokazać ostrość: http://stackoverflow.com/questions/5005565/multiple-calendars-displayed-lub-value-selected-not-displaying-corly –

Dostaliśmy to działa, ale minęło trochę faffing:

w nowych datepicker js mobilnych, przesuń updateDatepicker() funkcji poza zakres funkcji fn.datepicker nadpisane tak to można nazwać dowolnym i zmodyfikować go w celu usunięcia wszystkich scopingu 'DP' tak:

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

w reklamie jquery.ui.datepicker.js d wywołanie funkcji updateDatepicker(); Na koniec funkcja _updateDatepicker
w ruchomej datepicker css zmiana klasy ui datepicker wyglądał: .ui-datepicker {przepełnienia Widoczne; margin: 0; maksymalna szerokość: 500 pikseli; min-szerokość: 300px; szerokość: 50%; }
zmienić funkcję datepicker wiążą się wyglądać następująco:

// wiążą się pagecreate automatycznego zwiększenia nakładów date
$ (".ui-page") .live ("pagecreate", function () {
$ ("input [type = 'date'], input [data-type = 'date']") .each (function() { $ (this) .datepicker ({altField: "#" + $ (this) .attr ("id"), showOtherMonths: true}); }); });

Źródło

2011-02-23 11:36:47

Stary post, ale nadal istotne.

Miałem do czynienia z tym samym problemem. Oto co zrobiłem. Rozwiązaniem było ukrycie klasy hasDatepicker i wyświetlenie określonego identyfikatora datepaktera, który chcę.

w HTML, ja owinąć wyboru daty w div z id:

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

w JS, najpierw ukryć klasę hadDatepicker, a następnie pokazać jedno mnie obchodzi.

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

Kolejnym możliwym rozwiązaniem jest ukrycie tylko drugiej chwili .hasDatepicker. Nie używałem tej metody, ponieważ czas jest większym problemem.

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

Źródło

2015-07-18 21:32:50

Datepicker w jquery mobile jest duplikatem, gdy jest dodawany na drugiej stronie.

Odpowiedz

Powiązane problemy