jQuery Mobile -> Переопределить jQuery UI Datepicker -> Макет поврежден

Question

Я использую jQuery Mobile в своем веб-приложении.Существует средство выбора даты, которое переопределяет стандартное средство выбора даты jQuery UI.

Вот источник: https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker

Файл JavaScript, который переопределяет его, находится здесь: https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js

У меня есть эта строка кода:

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

В этом случае я получаю средство выбора даты, которое всегда видно.Чтобы иметь видимость только в том случае, если пользователь щелкает текстовое поле даты, средство выбора даты должно быть подключено к полю ввода, что здесь не так.Поэтому я должен удалить .after("<div />").Но затем дизайн DatePicker полностью нарушен, кажется, что перезапись DatePicker не вступает в силу, потому что стили CSS не применяются.

Итак, что здесь не так?

Заранее спасибо и наилучшими пожеланиями.

Answer 1

Это было мое решение

$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
    }); 
    $('.hasDatepicker').hide();
    $( "input[type='date'], input:jqmData(type='date')" ).click(function(){
        $(this).next('.hasDatepicker').show();
        })
    $( '.ui-datepicker-calendar a' ).live('click', function() {
       $( '.hasDatepicker' ).hide('slow');
      });
});

Answer 2

Чтобы решить проблему с календарем, вам просто нужно изменить селектор в коде Squish

 $( '.ui-datepicker-calendar a' ).live('click', function() {
   $( '.hasDatepicker' ).hide('slow');
  });

Пример здесь

Создать это в диалоге тоже просто, просто поместите его в другой html и назовите так:

<a href="foo.html" data-rel="dialog">Open dialog</a> 

Диалоговая документация

Answer 3

У меня была та же проблема с двумя датчиками на одной странице.Это было мое решение:

HTML-код:

<div data-role="fieldcontain">
   <div id="startPicker">
      <input type="date" name="startDate" id="startDate" value=""/>
   </div>
   <div id="endPicker">
     <input type="date" name="endDate" id="endDate" value=""/>
   </div>    

</div>

1. Это было проверено в браузере Safari.
2. Проверьте элемент ввода даты.
3. Посмотрите, что внутри <div data-role="fieldcontain" ...>.есть новый DIV, который был создан динамически и имеет этот идентификатор = "dp1298574069963".Я записал его в переменную (var idDivStart = $("#startPicker div").attr("id");) и использую ее, чтобы указать, что все элементы внутри этого Div, который имеет класс ui-datepicker, будут показаны ($("#"+idDivStart+" .ui-datepicker").show();).

JS-код:

$(function() {
        $(".ui-datepicker").hide();

        // startDate datepicker
        var idDivStart = $("#startPicker div").attr("id");

        $("#startDate").focus(function() {
            $("#"+idDivStart+" .ui-datepicker").show();
        });

        // endDate datepicker
        var idDivEnd = $("#endPicker div").attr("id");

        $("#endDate").focus(function() {
            $("#"+idDivEnd+" .ui-datepicker").show();
        });

        //
        $(".ui-datepicker-calendar a").live("click", function() {
            $(".ui-datepicker").hide();
        });

        //
        $(".inputsText").focus(function() {
            $(".ui-datepicker").hide();
        });
        //
        $("div").attr("tabindex",-1).focus(function() {
            $(".ui-datepicker").hide();
        });
});

Я надеюсь вам помочь.

Answer 4

Вы были правы, я прошу прощения за неправильную реализацию в первый раз.

Это должно исправить вашу проблему:

Он будет скрывать ваш календарь при загрузке, показывать его, когда ввод находится в фокусе (нажатие или вкладка), и скрывать его снова, как только будет выбрана дата (но не будет мешать переключению месяцев).

$(function()
{
    $( '.hasDatepicker' ).hide();

    $( '#date' ).focus(function() {
        $( '.hasDatepicker' ).show('slow');
    });

    $( '.ui-body-c a' ).live('click', function() {  // .live() event important
                                                    //or else clicks stop functioning
                                                    //after first selection
        $( '.hasDatepicker' ).hide('slow');
    });
});

Вот пример живой

Answer 5

У меня была похожая проблема при работе с двумя датами, и это сработало:

Разметка (C # MVC3):

    <div data-role="fieldcontain" id="fooDate1Div">
        <%: Html.LabelFor(model => model.fooDate1) %>
        <%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate1"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate1)%>
    </div>

    <div data-role="fieldcontain" id="fooDate2Div">
        <%: Html.LabelFor(model => model.fooDate2) %>
        <%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate2"}})%>
        <%: Html.ValidationMessageFor(model => model.fooDate2) %>
    </div>

Сценарий:

<script>
    $(function () {
        $(".ui-datepicker").hide();

        // fooDate1 datepicker
        var idDivStart = $("#fooDate1Div div").attr("id");
        $("#fooDate1").focus(function () {
            $("#" + idDivStart + " .ui-datepicker").show('fast');
        });

        // followUp datepicker
        var idDivEnd = $("#fooDate2Div div").attr("id");
        $("#fooDate2").focus(function () {
            $("#" + idDivEnd + " .ui-datepicker").show();
        });

        $(".ui-datepicker-calendar a").live("click", function () {
            $(".ui-datepicker").hide();
        });
    });    
</script>

Answer 6

Автор мобильного средства выбора даты имеет пример работы на своей странице git.

Он скрывает средство выбора даты и отображает поле ввода, как и предполагалось.В чем конкретно разница между вашей реализацией и стандартом?Можете ли вы дать рабочий фрагмент того, что вы делаете?Вы можете пометить его на JSBin , если чувствуете, что это будет проще.