jqueryの-UI DatePickerの：複数の入力ボックスIは、入力ボックスの2セット持って

Question

をミラーリング：

1） "を開始日I" と

2） "私は、終了日" "日付IIを起動" と "終了日II」

それはここで見ることができるように：私は必要なものhttp://jsfiddle.net/YXzpj/

は、ユーザーが片側の開始日と終了日を設定したときに、選択された値は、他の側にコピーする必要があるということです。

例： ユーザーは「開始日I」と「終了日I」を設定し、スクリプトは自動的に両方の値を「開始日II」と「終了日II」にコピーする必要があります。ユーザーが4つのフィールドのいずれかを変更すると、フォームはそれに従って自動的に更新されます。言い換えれば、これら2組の入力ボックスは互いに鏡像関係にあるはずです。

ここに私の現在のコードです：

$(function() { 

    var currentTime = new Date(); 


    $('#report2from1').attr('readonly','readonly'); 
    $('#report2to1').attr('readonly','readonly');  
    var dates1 = $("#report2from1, #report2to1").datepicker({ 
     showButtonPanel: true,    
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     minDate: new Date(2010, 1 -1, 1), 
     maxDate: new Date(currentTime.getFullYear(), 11, 31), 
     dateFormat: "yy/mm/dd", 
     onSelect: function(selectedDate) { 
      var option = this.id == "report2from1" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates1.not(this).datepicker("option", option, date); 
      if (this.id == "report2from1"){ 
       dates1.not(this).datepicker("setDate", date); 
      } 
     } 
    });  

    $('#report2from2').attr('readonly','readonly'); 
    $('#report2to2').attr('readonly','readonly'); 
    var dates2 = $("#report2from2, #report2to2").datepicker({ 
     showButtonPanel: true,  
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     minDate: new Date(2010, 1 -1, 1), 
     maxDate: new Date(currentTime.getFullYear(), 11, 31), 
     dateFormat: "yy/mm/dd", 
     onSelect: function(selectedDate) { 
      var option = this.id == "report2from2" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates2.not(this).datepicker("option", option, date); 
      if (this.id == "report2from2"){ 
       dates2.not(this).datepicker("setDate", date); 
      }     
     } 
    }); 


}); 

Answer 1

日付ピッカーのプラグインは、あなたが探しているものを自動的に行うためのオプションがあります：altField

altField
セレクタ、jQueryの、ElementDefaultは： ''
更新される別のフィールドのjQueryセレクタ日付ピッカーから選択した日付。 altFormat設定を使用して、このフィールド内の日付の書式を変更します。代わりのフィールドがない場合は空白のままにします。

は、ここで私はあなたのコードを最適化する方法をです：それは働いた

$(function() { 

    var currentTime = new Date(), 
     // cache your selection already 
     $dateFields = $('#report2from1, #report2to1, #report2from2, #report2to2'); 

    // set all fields to readonly 
    $dateFields.attr('readonly', 'readonly'); 

    // the options are the same for all instances 
    var options = { 
     showButtonPanel: true, 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     minDate: new Date(2010, 1 - 1, 1), 
     maxDate: new Date(currentTime.getFullYear(), 11, 31), 
     dateFormat: "yy/mm/dd", 
     // set the date on open so the populated date is selected in the widget 
     beforeShow: function(input, instance) { 
      $(input).datepicker('setDate', $(input).val()); 
     } 
    }; 

    // instanciate datepicker with the options for all the fields 
    $dateFields.datepicker(options); 

    // apply separately the option 'altField' accordingly 
    $('#report2from1').datepicker('option', 'altField', '#report2from2'); 
    $('#report2from2').datepicker('option', 'altField', '#report2from1'); 
    $('#report2to1').datepicker('option', 'altField', '#report2to2'); 
    $('#report2to2').datepicker('option', 'altField', '#report2to1'); 

});​ 

DEMO