web-dev-qa-db-ja.com

同じページ上の2つのjquery datepickerとの競合

セットアップは次のとおりです。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を使用しています。

これについて何か考えはありますか？警告として、雇用主の制限により実際のコードを投稿することはできませんが、説明が必要な場合はほとんどの質問に答えることができます。すべての助けをいただければ幸いです!!

javascriptjqueryhtmljquery-uidatepicker
22
musicmunky

UPDATE：ここで説明する動作は、別のstackoverflowの質問で対処されたようです。
jQuery UIダイアログがフォーカスを最初のテキストボックスに設定するのを防ぐ

「重複」の質問に対する謝罪-これが問題であることがわかっていた場合、すぐにそれを理解できただろう!!!

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

まあ、解像度は非常に簡単です、そしておそらく誰かが私が現時点で少し無知であるので、なぜそれがこのように機能するかについて私に啓発することができます。

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

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

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

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

とにかく、私は声をかけたすべての人からの入力に感謝します-これは奇妙な問題でしたが、今それを修正する方法を決して忘れません。皆さん、助けてくれてありがとう!!

9
musicmunky

この友人を試してください：あなたの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">

あなたの入力で

開始日：入力type = "text" id = "from" name = "from"

終了日：入力type = "text" id = "to" name = "to"

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

macElie M.

4
McElie

このようにjavascriptを妨害する別のコードがあると思います： http://jsfiddle.net/fMD62/

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

たぶんしよう

$(function() {
    $("#datepicker1,#datepicker2").datepicker();
});
3
Stanislas Nichini

事例1：
@ antonyのコメント（質問の下のjsfiddleリンクを含む）は、
バージョン_jquery-1.9.1_および_1.9.2/jquery-ui.js_

事例2：
datepicker1はうまく機能するが、datepicker2を選択するとdatepicker1が開くOPの場合
バージョン：_jQuery v1.9.0_および_jQueryui v1.10.0_

ケース3：
datepicker1を選択してもうまくいきますが、datepicker2を選択しても効果はありません。
バージョン：_jquery-3.1.1.min.js_および_jQueryui v1.12.1_

ケース3のソリューション：
date1を最初に初期化$('date1').datepicker() date1は機能します
date2の場合、まずdate1を破棄してからdate2を初期化します

_$('date1').datepicker('destroy');
$('date2').datepicker();
_

ここで、date1について、date2を破棄し、date1を初期化します。

1
vusan

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

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

それはおそらく他の人が言ったことであり、あなたはあなたのコードに何らかの形の干渉に遭遇していますが、それは簡単なショットの価値があります。

1
Tom Yeldham

あなたの例では、両方の日付ピッカーは異なるIDと名前を持っていますが、あなたが説明する問題は、両方に同じ名前を使用した場合に起こることです。

実際のコードでは、両方の日付ピッカーに異なるIDと名前を使用していますか？

1
Bardo

はじめに、私はバックエンドのデータベースプログラマであるため、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 );
      }
    });     
  });
0
DonP

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

\---/\---/\---/_______________
/                            /
\  ####IFRAME######          \
\  #              #          \
/  #DATEPICKER1   #          /
\  #              #          \
/  #DATEPICKER2   #          /
\  #              #          \
/  ################          /
\                            \
/____________________________/
0
Robert Bolton

問題の説明

私は同じ問題を抱えており、非常に残念です。私は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()関数がトリガーされます。

問題は、_$.datepicker_が本文の最後にdivを作成するため、_.ui-dialog_の外側にあるということです。

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

可能な解決策の1つ

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

ダイアログコンテンツの最初の最初の入力としてこのHTMLコードを使用します。そうしないと、datepicker入力が最初の場所になります。

_<span class="ui-helper-hidden-accessible"><input type="text" /></span>
_
0
Gh61