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