Datepicker trong điện thoại di động jquery là trùng lặp khi được thêm vào trong một trang thứ hai

Tôi cần một số trợ giúp với việc sử dụng datepicker trong ứng dụng di động.Datepicker trong điện thoại di động jquery là trùng lặp khi được thêm vào trong một trang thứ hai

Tôi đang sử dụng trình chỉnh sửa ngày tháng trong giao diện người dùng jQuery trong ứng dụng của mình. Nhưng datepicker được hiển thị hai lần (trùng lặp) khi tôi đặt nó trong trang thứ hai. Tuy nhiên khi tôi đặt datepicker trong trang đầu tiên, được hiển thị ok.

Đây là một ví dụ, nếu bạn chạy nó, bạn có thể thấy rằng datepicker là trùng lặp trong trang thứ hai.

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

Cảm ơn bạn đã trợ giúp tôi trước.

Nguồn

2011-02-09 Yaz

Thành thực mà nói jQuery thoại di động là dự án rất thực nghiệm và vẫn có nhiều lỗi –

Đây không phải là một câu trả lời, nhưng sẽ giúp - bất cứ điều gì bạn làm điều đó sẽ làm việc tốt hơn nếu bạn giữ ONE 'page' div trong mỗi tập tin html. Widgets có vấn đề với điều đó và các tệp html nhiều trang được xử lý khác nhau giữa JQM alpha2 và alpha3 - nó cũng đã phá vỡ các tiện ích tùy chỉnh của tôi. – naugtur

Ngoài ra tôi tìm thấy một lib jQuery ẩn: http://jquerymobile.com/test/js/ đó là jQuery UI Widget. Không biết nếu điều này giúp –

Cuối cùng, chúng tôi đã nhận được giải pháp từ một trong những người quản lý dự án của tôi. Chúng ta phải làm một công việc xung quanh trong jquery.ui.datepicker.mobile.js.

Thay thế phương thức sau bằng cách sử dụng mã bên dưới.

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

Hàm trên sẽ tạo ra mọi lần tải trang. Cùng một công cụ tạo bộ chọn ngày sẽ thực thi trong khi điều hướng đến trang tiếp theo. Vì vậy, chúng tôi đã thêm điều kiện để thực thi dòng này chỉ một lần trong khi tải trang. Bây giờ nó đang làm việc tốt.

Nguồn

2011-02-10 13:56:36 ramkumar

Cảm ơn Ramkumar! – Yaz

Cảm ơn việc này đã khắc phục sự cố bố cục multi-datepicker, nhưng vẫn muốn ẩn/hiện trên tiêu điểm: http://stackoverflow.com/questions/5005565/multiple-calendars-displayed-or-value-selected-not-displaying-correctly –

Chúng tôi đã làm việc này nhưng phải mất ít nhất faffing:

trong js datepicker di động mới, di chuyển chức năng updateDatepicker() nằm ngoài phạm vi của hàm fn.datepicker overriden để nó có thể được gọi là bất cứ nơi nào và sửa đổi nó để loại bỏ tất cả Phạm vi 'dp' như vậy:

chức năng 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()); 
     }); 
};

trong quảng cáo jquery.ui.datepicker.js d một cuộc gọi để cập nhậtDatepicker(); ở cuối hàm _updateDatepicker
trong css datepicker di động, thay đổi lớp ui-datepicker thành như sau: .ui-datepicker {overflow: visible; lề: 0; chiều rộng tối đa: 500px; chiều rộng tối thiểu: 300px; chiều rộng: 50%; }
thay đổi chức năng datepicker ràng buộc để trông như thế này:

// ràng buộc để pagecreate để tự động tăng cường đầu vào ngày
$ (".ui-page") .live ("pagecreate", function () {
$ ("đầu vào [loại = 'ngày'], nhập [data-type = 'date']") .each (function() { $ (this) .datepicker ({altField: "#" + $ (this) .attr ("id"), showOtherMonths: true}); }); });

Nguồn

2011-02-23 11:36:47

Bài đăng cũ, nhưng vẫn có liên quan rõ ràng.

Tôi đã phải đối mặt với cùng một vấn đề. Đây là những gì tôi đã làm. Giải pháp là ẩn lớp hasDatepicker và hiển thị ID datepicker cụ thể mà tôi muốn.

Trong html, tôi quấn chọn ngày trong một div với một Id:

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

Trong js, lần đầu tiên tôi giấu lớp hadDatepicker, sau đó hiển thị người tôi quan tâm.

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

Một giải pháp tiềm năng khác là chỉ ẩn khoảnh khắc thứ hai của .hasDatepicker. Tôi đã không sử dụng phương pháp này, vì thời gian là một vấn đề.

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

Nguồn

2015-07-18 21:32:50

Datepicker trong điện thoại di động jquery là trùng lặp khi được thêm vào trong một trang thứ hai

Trả lời

Các vấn đề liên quan