JQueryUI Dialog/Datepicker Auto-Opens

В настоящее время у меня есть диалоговое окно с двумя входами в качестве его содержимого (с двумя входами с использованием .datepicker()). Когда я открываю диалоговое окно, первый вход становится фокусом, и автоматически появляется первый datepicker. Я попытался скрыть div и размыть вход, но это приводит к тому, что datepicker больше не отображается в фокусе.

В идеале я хочу иметь возможность:

Откройте диалоговое окно (без отображения даты).
Нажмите на первый вход и покажите дату.

Вот мой текущий код:

JAVASCRIPT:

$("#to").datepicker({
      onClose: function (selectedDate) {
         $("#from").datepicker("option", "minDate", selectedDate);
      }
    });

    $("#from").datepicker({
     onClose: function (selectedDate) {                            
         $("#to").datepicker("option", "maxDate", selectedDate);
    }
});


$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $(this).dialog("close");
     }
});

Я также сделал демонстрацию jsfiddle: http://jsfiddle.net/ARnee/19/

Я искал в Интернете решение, и нашел аналогичный questions, но никто, похоже, не помогает. Может ли кто-нибудь помочь мне?!

EDIT:

Браузер, который я использую, - это Chrome.

Ответ 1

Можно вставить фиктивный вход в диалоговом окне, который не имеет высоты, поэтому не будет видно. Поместите его перед полями datepicker.

<input style="height:0px; border:none"/>

DEMO: http://jsfiddle.net/ARnee/20/

Ответ 2

Попробуйте установить атрибут tabindex на входах, содержащих параметр datepicker, на -1.

<input type="text" id="to" tabindex="-1" />

EDIT:

<input id="to" type="text" tabindex="-1" />
<input id="from" type="text" tabindex="-1" />

DEMO: http://jsfiddle.net/ARnee/32/

Ответ 3

Вы можете создать datepickers после открытия диалога, например:

$("#settingsDialog").dialog({
    autoOpen: false,
    open: function (event, ui) {
                     //if ($(".ui-datepicker").is(":visible"))
                     //    $(".ui-datepicker").hide();

                     $("#to").blur();
                 },
     close: function () {
         $("#to").datepicker("destroy");
         $("#from").datepicker("destroy");
         $(this).dialog("close");
     }
});



$("#b1").click(function(){
      $("#settingsDialog").dialog("open");
      $("#to").datepicker({
         onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
         }
      });

      $("#from").datepicker({
         onClose: function (selectedDate) { 
            $("#to").datepicker("option", "maxDate", selectedDate);
         }
      });
});

Ответ 4

$(document).ready(function(){



$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
        $("#to").datepicker({
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#from").datepicker({
        onClose: function (selectedDate) {                            $("#to").datepicker("option", "maxDate", selectedDate);
    }
});
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $("#to").datepicker( "destroy" );
         $("#from").datepicker( "destroy" );
         $(this).dialog("close");
     }
});



    $("#b1").click(function(){
       $("#settingsDialog").dialog("open");
    });

});