jquery-ui datepicker: зеркальное отображение нескольких полей ввода

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

Плагин Datepicker имеет возможность автоматически делать то, что вы ищете: 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