jQuery UIの日付ピッカー - 日付の選択時に別の日付ピッカーを更新する

Question

JqueryのUIを使用する2つの日付ピッカーがあります。ユーザーが日付ピッカー1から日付を選択した場合、どのようにして日付ピッカー2を同じ日付で自動的に更新することができますか？

これはかなり単純だと思いますが、私はいくつか試してみましたが、何も動作していないようです。

ありがとうございます。

Answer 1

日付ピッカーは、基本的にテキスト入力要素です。最初のinput要素でjquery changeハンドラを使用して内容が変更されたときにその内容を取得し、2番目の入力要素を選択してjquery valを使用して値を更新することができます。

http://api.jquery.com/change/ http://api.jquery.com/val/

何かのように：

$("#firstdatepicker").change( function() { 
    $("#seconddatepicker").val($(this).val()); 
}); 

Answer 2

onCloseイベントを使用して、2番目のテキストフィールドを更新します。

ここではthis fiddleを作成しました。何らかの理由で、通常、日付ピッカーにあるスタイリングは入っていません。

HTML：

<input type="text" name="date1" value="" /> 
<br> 
<input type="text" name="date2" value="" /> 

Javascriptを：

$("input[name=date1]").datepicker({ 
    onClose: function(dateText, inst) { 
     $("input[name=date2]").val(dateText); 
    } 
}); 
$("input[name=date2]").datepicker();