23

セットアップは次のとおりです。jqueryタブ内、jqueryモーダルダイアログウィンドウ内に2つのjquery datepickerがあります。

\---/\---/\---/_______________
/                            /
\                            \
/  DATEPICKER1               /
\                            \
/  DATEPICKER2               /
\                            \
/                            /
\                            \
/____________________________/

最初の日付ピッカーは正常に機能しますが、2 番目の日付ピッカーで日付をクリックしようとすると、最初の日付ピッカーがアクティブになります。それに従いましたか？:)

つまり、datepicker2 の日付をクリックすると、datepicker1 がアクティブになります。

なぜこれが起こっているのかわかりません.以下に概説するように、それらは異なるIDと名前を持っています.

私が使用している日付ピッカーを作成するには：

$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
});

フィールドは次のとおりです。

<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />

jQuery v1.9.0 と jQueryui v1.10.0 を使用しています。

これについて何か考えはありますか？注意点として、雇用主の制限により実際のコードを投稿することはできませんが、明確化が必要な場合はほとんどの質問に答えることができます. どんな助けでも大歓迎です!!

4

10 に答える 10

9

更新: 以下で説明する動作は、別のスタックオーバーフローの質問で対処されたようです:
Prevent jQuery UI dialog from setting focus to first textbox

「重複した」質問に対する謝罪-これが問題であることを知っていれば、すぐに理解できたはずです!!!

#################################################### ###############################

まあ、解決策は非常に単純です。おそらく、私は現時点では少し無知なので、なぜこのように機能するのかについて誰かが教えてくれるでしょう.

私がしたことは次のとおりです:
別の 2 つのテキスト入力フィールドをフォームに追加し (それらは必要でした)、レイアウトを並べ替えて、これらの新しい入力フィールドの 1 つが「最初の」要素 (左上隅) になるようにしました。

\---/\---/\---/_______________
/                            /
\                            \
/  TEXTFIELD1   DATEPICKER1  /
\                            \
/  TEXTFIELD2   DATEPICKER2  /
\                            \
/                            /
\                            \
/____________________________/

突然、問題が消えました！ただし、興味深い動作に気付き
ました。どちらかの日付ピッカーで日付を選択すると、カーソルがすぐに最初のテキスト フィールドに戻ります。したがって、テキスト フィールドのない日付ピッカーがあるときにこれが発生した場合、その動作は、カーソルがすぐに最初の日付ピッカーに戻り、問題を引き起こす可能性があることを意味します。

さて、なぜこのように機能するのか、私にはわかりません。さまざまなテキストフィールド/日付ピッカーのタブインデックスパラメーターを設定しようとしましたが、動作は変わりませんでした。

とにかく、協力してくれたすべての人からの情報に感謝します。これは奇妙な問題でしたが、今では修正方法を忘れることはありません。助けてくれてありがとう！

于 2013-05-02T12:12:54.623 に答える
4

この友達を試してみてください: あなたの JS で

 $(function() {   
       $( "#from" ).datepicker({   
      defaultDate: "+1w",  
      changeMonth: true,   
      numberOfMonths: 1,  
      onClose: function( selectedDate ) {  
        $( "#to" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });  
  });  
  
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Start date: <input type="text" id="from" name="from"> 
End date: <input type="text" id="to" name = "to">

あなたの入力で

開始日: input type="text" id="from" name="from"

終了日: input type="text" id="to" name = "to"

これは私のために働いた:)

マケリー M.

于 2014-10-31T07:30:09.477 に答える
2

これは暗闇での完全なショットですが、それぞれを個別に初期化しようとしましたか? 次のようなもの

$(function() {
    $('.datepicker').each(function(){
        $(this).datepicker();
    });
});

それはおそらく他の人が言及したことであり、コードに何らかの形で干渉が発生していますが、簡単に試す価値があります.

于 2013-04-25T14:20:03.013 に答える
2

次のようにJavaScriptに干渉する別のコードがあると思います：http://jsfiddle.net/fMD62/

完全に動作します (jquery 1.9.1 および jqueryui 1.9.2 で)

たぶん試してみてください

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});
于 2013-04-23T12:54:58.777 に答える
0

JQuery UI ダイアログの内容を IFrame に入れてみてください。それはあなたの問題のいくつかを回避するのに役立つかもしれません.

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/
于 2013-04-24T01:53:36.600 に答える
0

前置きとして、私はバックエンド データベース プログラマーなので、JavaScript についてほとんど知らないので、まったく同じ質問でこの投稿を見つけようとしました。上記で読んだ内容を収集し、既存のコードと比較して、JavaScript が機能するように変更し、それを共有しようと考えました。

唯一の注意点は、単一の日付セレクターを使用した既存のフォームが機能しなくなったため、それらを処理するために少し追加する必要があり、現在はすべて問題ないようです。この場合、データベース フィールドは実際には Unix タイムスタンプであるため、必要に応じて変換された 2 つのフィールドで送信されたときにフォームが処理されますが、わかりやすくするために、ここではそのコードを含めませんでした。

$(document).ready(function(){ 
       $( "#StartDate" ).datepicker({   
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {  
        $( "#StartDate" ).datepicker( "option", "minDate", selectedDate );  
      }  
    });  
    $( "#EndDate" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
      }
    }); 
        $( "#datepicker" ).datepicker({
                                altField: '#datepicker',
                                altFormat: 'yy-mm-dd',
                                dateFormat: 'D M d, yy', 
                                firstDay: 1,
      onClose: function( selectedDate ) {
        $( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
      }
    });     
  });
于 2019-01-05T23:24:36.410 に答える
0

問題の説明

私は同じ問題を抱えており、非常に残念です。jquery のソース コードを検索したところ、次のようなものが見つかりました。

if ( $.ui.dialog.overlayInstances ) {
    this._on( this.document, {
        focusin: function( event ) {
            if ( !$( event.target ).closest(".ui-dialog").length ) {
                event.preventDefault();
                $(".ui-dialog:visible:last .ui-dialog-content")
                    .data("ui-dialog")._focusTabbable();
            }
        }
    });
}

そのため、内にない要素にフォーカスを設定すると、ダイアログの最初の入力にフォーカスを設定する関数.ui-dialogがトリガーされます。_focusTabbable()

問題は、$.datepickerbody の最後に div を作成することです。.ui-dialog

_focusTabbable()日付ピッカーがそれを処理できるので、フォーカスを与える別の入力がある場合。ただし、この入力にバインドされた日付ピッカーがある場合、前の日付ピッカーが閉じられ、最初の入力で別の日付ピッカーが開かれ、前の日付ピッカーの選択は起動されません。

可能な解決策の1つ

この場合の解決策は、ダイアログで最初のフォーカスを取得し、日付ピッカーを持たない入力を行うことです。

この HTML コードを、ダイアログ コンテンツの開始時に最初の入力として使用するだけです。それ以外の場合は、datepicker の入力が最初になります。

<span class="ui-helper-hidden-accessible"><input type="text" /></span>
于 2017-03-31T08:40:45.800 に答える