jQuery的UI日期選擇器：多輸入框鏡像

Question

我有2臺的輸入框：

1） 「開始日期I」 和 「結束日期I」

2） 「開始日期II」 和「結束日期II」

，因爲它可以在這裏看到：http://jsfiddle.net/YXzpj/

我需要的是，每當用戶設定一條邊的開始和結束日期，選擇的值應該被複制到另一側。

例如： 用戶設置「開始日期I」，然後選擇「結束日期I」，那麼腳本應自動將這兩個值都複製到「開始日期II」和「結束日期II」。如果用戶更改了這四個字段中的任何一個，表單應該相應地進行更新。換句話說，這兩組輸入框應該相互鏡像。

這裏是我當前的代碼：

$(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