2012-06-09 41 views
5

Jquery Timepickerを使用しています。Jquery TimePicker:パラメータを動的に変更する方法

私は2つの入力フィールドを持っています。

<input id="startTime" size="30" type="text" /> 
<input id="endTime" size="30" type="text" /> 

は、私が最初にtimePickerが選択されている場合、第二のための「MINTIME」パラメータが変更されることを望んdocumentation

$('#startTime').timepicker({ 
    'minTime': '6:00am', 
    'maxTime': '11:30pm', 
    'onSelect': function() { 
     //change the 'minTime parameter of #endTime <--- how do I do this ? 
    } 
}); 
$('#endTime').timepicker({ 
    'minTime': '2:00pm', 
    'maxTime': '11:30pm', 
    'showDuration': true 
}); 

あたりとしてのjQuery UIのタイマーを使用しています。基本的には、特定のアクティビティの開始時刻と終了時刻を収集しようとしています。そして、2番目の入力ボックスに最初の入力フィールド(開始時刻)の値からのオプションを表示したいと思います。

+0

他のJQuery要素にも同じ質問が当てはまると思います。 –

+0

このページには、[source](http://jonthornton.github.com/jquery-timepicker/lib/datepair.js)とともにこの例題があります(最後のもの)。 – sachleen

答えて

6

あなたがここでやっているようなもの、

$('#startTime').timepicker({ 
       'minTime': '6:00am', 
       'maxTime': '11:30pm', 
        'onSelect': function() { 

        $('#endTime').timepicker('option', 'minTime', $(this).val());       
       } 
      }); 

を行うだろう#startTimeonSelect機能では、あなたが#startTime

参照の値にオプション#endTimeminTimeを設定することですこれはJS Fiddleです。

+0

恐ろしい!ありがとう 。これはうまくいった。乾杯! –

+3

それは私のためだけでなく、あなたのJSフィドルのために働いていません –

+1

このJSフィドルはminTimeの変化を示していません。それは常に2PMです – ivanacorovic

4

jQuery-UIウィジェットは、一般的に、既存のインスタンスのオプションを変更できるoptionsメソッドをサポートしています。ウィジェットの方法は、プラグインの呼び出しの最初の引数として文字列を供給することによって呼び出されます。

$(...).widget_name('method_name', arg...) 

ので、これはあなたのために働く必要があります。

$('#endTime').timepicker('option', 'minTime', new_min_time) 
+0

ありがとうございました!これは役に立ちました: –

+0

オプションは完全に動作します、これは正解とマークされるべきです! – ivanacorovic

6

あなたがのonchangeイベントのために行くことができます。

 $('#startTime').timepicker(); 

     $('#endTime').timepicker({ 
      'minTime': '12:00am', 
      'showDuration': true 
     }); 

     $('#startTime').on('changeTime', function() { 
      $('#endTime').timepicker('option', 'minTime', $(this).val()); 
     }); 

最初の返信で投稿されたコードを少し修正しました。ここではそれのために働いていますhttp://jsfiddle.net/NXVy2/215/

on( 'change' ...)も使用できます

$('#startTime').on('change', function() { 
     $('#endTime').timepicker('option', 'minTime', $(this).val()); 
    }); 
+0

受け入れられた答えは機能しません(それ以上ですか?)、しかしこれは私にとって完璧に機能しました。 – nematoth

+0

これは正解です!ありがとう – marknt15

関連する問題