Datepicker в jquery mobile дублируется при добавлении на вторую страницу - PullRequest
Новая
       15

Datepicker в jquery mobile дублируется при добавлении на вторую страницу

7 голосов
/ 09 февраля 2011

Мне нужна помощь с использованием средства выбора даты в мобильном приложении.

Я использую указатель даты jQuery UI в своем приложении. Но средство выбора даты показывается дважды (дублируется), когда я помещаю его на вторую страницу. Однако, когда я помещаю указатель даты на первой странице, отображается нормально.

Это пример, если вы запустите его, вы увидите, что указатель даты дублирован на второй странице. 

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

Спасибо за помощь, заранее.

Ответы [ 3 ]

14 голосов
/ 10 февраля 2011

Наконец-то мы получили решение от одного из моих менеджеров проектов.Мы должны сделать один обходной путь в jquery.ui.datepicker.mobile.js.

Замените следующий метод, используя приведенный ниже код. 

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

Приведенная выше функция pagecreate будет вызываться каждый раз, когда страницанагрузки.То же самое создание даты выбора будет выполняться при переходе на следующую страницу.Поэтому мы добавили условие для выполнения этой строки только один раз при загрузке страницы.Сейчас работает нормально.

0 голосов
/ 19 июля 2015

Старый пост, но все равно актуален видимо.

Я столкнулся с той же проблемой.Вот что я сделал.Решение состояло в том, чтобы скрыть класс hasDatepicker и показать нужный мне идентификатор DatePicker.

В html я оборачиваю средство выбора даты в div с Id: 

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

В jsЯ сначала скрываю класс hadDatepicker, а затем показываю тот, который мне нужен. 

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

Другое потенциальное решение - скрыть только второй момент .hasDatepicker.Я не использовал этот метод, так как выбор времени - большая проблема.

$(".hasDatepicker:eq(1)").hide();
0 голосов
/ 23 февраля 2011

Мы сработали, но потребовалось несколько ошибок:

  1. в новом мобильном датчике js, переместите функцию updateDatepicker () вне области переопределенной функции fn.datepicker, чтобы онаможно вызвать в любом месте и изменить его, чтобы удалить все области видимости dp следующим образом:

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

  2. в jquery.ui.datepicker.js добавить вызов updateDatepicker ();в конце функции _updateDatepicker

  3. в мобильном датчике css измените класс ui-datepicker, чтобы он выглядел следующим образом: .ui-datepicker {overflow: visible;поле: 0;максимальная ширина: 500 пикселей;минимальная ширина: 300 пикселей;ширина: 50%;}

  4. изменить функцию привязки datepicker, чтобы она выглядела следующим образом:

    // привязка к pagecreate для автоматического улучшения ввода даты
    $ (".ui-page") .live ("pagecreate", function () {
    $ ("input [type = 'date'], input [data-type = 'date']") .each (function () {$ (this).datepicker ({altField: "#" + $ (this) .attr ("id"), showOtherMonths: true});});});

...