12

現在、コンテンツとして2つの入力があるダイアログボックスがあります（2つの入力はを使用してい.datepicker()ます）。ダイアログボックスを開くと、最初の入力がフォーカスになり、最初の日付ピッカーが自動的に表示されます。divを非表示にして入力をぼかしてみましたが、日付ピッカーがフォーカスされなくなります。

理想的には、次のことができるようにしたいと思います。

  • ダイアログボックスを開きます（日付ピッカーは表示されません）。
  • 最初の入力をクリックして、日付ピッカーを表示します。

これが私の現在のコードです：

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/

私は解決策をオンラインで検索し、同様の質問を見つけましたが、役に立たないようです。誰か助けてもらえますか？

編集：

私が使用しているブラウザはChromeです。

4

4 に答える 4

15

datepickerを含む入力のtabindex属性を-1に設定してみてください。

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

編集：

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

デモ：http： //jsfiddle.net/ARnee/32/

于 2013-06-21T07:53:59.717 に答える
7

高さのないダイアログにダミー入力を貼り付けることができるため、表示されません。日付ピッカーフィールドの前に配置します

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

デモ：http：//jsfiddle.net/ARnee/20/

于 2013-01-04T23:36:16.683 に答える
1

次のように、ダイアログを開いたときに日付ピッカーを作成できます。

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

</ p>

于 2013-01-04T23:32:31.063 に答える
0 
$(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");
    });

});
​
于 2013-01-04T23:50:45.413 に答える