1つのページに異なる日付ピッカーを持つjQueryの問題

Question

私はいくつかの異なる場所でdatepicker機能を使用するプランナーを構築しています。カレンダーを制御する一般的な日付ピッカーがあり、別のダイアログでは、フィールドの日付（イベントの開始日）を選択するためだけに、日付ピッカーを開くためのボタンが必要です。

一般的な日付ピッカーはdivに結び付けられています（つまり、インラインの日付ピッカーです）が、他は入力に関連付けられています。私はdivに1つのdatepickerを結びつけているのが良い理由があります：私はドラッグアンドドロップ可能なアイテムをドラッグすることができなければなりません。これは、ポップアップの日付ピッカーを使って不可能であることが判明しました。

ExpertsExchangeのpostで、一度一度datepickerインスタンスを初期化すると、そのインスタンスのオプションは後で指定する場合を除き、自動的に他のインスタンスに適用されます。しかし、私の場合はすべてが絡み合っているようです：1つのアイテムに指定されたイベントが他のイベントで発生し、ポップアップの日付ピッカーなどを閉じた後にインラインの日付ピッカーが表示されます。

実際のコードはまだありません多くの場合、私は最初に、「Datepickerでは1つのオプションが異なるインスタンスに対して異なる値を持つことを許可していないため...」または「インラインとポップアップを混用しない」のような一般的な原則がないかどうかを知りたいと思いますなぜなら、日常のピックアップだからです。 codespeakで

しかし、私の一般的な考え方は次のとおりです。任意のヘルプ

$('div#mainDatePicker').datepicker({ 
    //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers 
}) 

$('input#selectStartDate').datepicker({ 
    //specific options for this datepicker, where different from the main one 
}) 

ありがとう！

ワイツ

Answer 1

この問題は（日付形式の場合）1回発生しました。私は、同じページに複数datepickersといくつかの仕事をしたと私はそれぞれの日付ピッカーは、一意のIDを持っている必要があることを実現するまで、予期しない結果を持っていた

$('div#mainDatePicker').click(function(){ 
    $(this).datepicker({ 
     //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers 
    }) 
}) 

$('input#selectStartDate').click(function(){ 
    $(this).datepicker({ 
     //specific options for this datepicker, where different from the main one datepickers 
    }) 
}) 

Answer 2

：たぶん、あなたは次のようにクリックでそれをバインドすることができます。

たとえば、日付ピッカーを2つの同様の入力ボタンにバインドするとします。以下は、問題が発生します：あなたが第二日付ピッカーを使用して日付を設定した場合、たとえば、

<input type="text" class="myCustomDatePicker"> 
<input type="text" class="myCustomDatePicker"> 

を、選択した日付は、最初の入力ボックスの入力欄に表示されます。

代わりに、idを設定すると、それぞれ独立しDatePickerの機能を確保します。このことができますが、ちょうど何か同じページに複数のdatepickersを使用しているとき、私は推測チェックする

Answer 3

jQueryの場合

<input type="text" class="myCustomDatePicker" id="dp1"> 
<input type="text" class="myCustomDatePicker" id="dp2"> 

は知ってはいけませんUI Datepickerウィジェットは、添付する html属性のIDを参照します。したがって、複数の日付ピッカーを使用するには、 のIDの日付ピッカーのIDが異なることを確認する必要があります。

So you want to end up with the following HTML: 

<input id="form-date-1" type="text" /> 
<input id="form-date-2" type="text" /> 
<script type="text/javascript"> 
    $("#form-date-1").datepicker(); 
    $("#form-date-2").datepicker(); 
</script> 

チェックこの記事：あなたが$('.someclass).datepicker();を使用して$('.anotherclass).datepicker()場合http://mike-abner.posterous.com/multiple-jquery-ui-datepickers-on-the-same-pa

Answer 4

それが動作します。

あなたが使用している場合：

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

、これは動作しません。

アレックスPが言ったことが起こります。

問題を解決するには、idを使用する必要があります。 他の方法はありません。

どのIDを使用しても問題ありません。ランダムに生成された一意のIDを使用できます。 以下は例です：

$('.someclass').each(function() { 
    $('#' + $(this).attr('id')).datepicker(); 
});