jQuery Datepicker attached to two inputs, changes both when one is modified

Question

I have two inputs, and I have attached jQuery UI Datepickers to both of them. Problem is that when I change the date on the first one, it changes on the second one and vise-versa. Suggestions?

<label for="datestart">Start Date:</label>
<input id="datestart" name="datestart" type="text">

<label for="dateend">End Date:</label>
<input id="dateend" name="dateend" type="text">


$(function(){
    var dates = $('#datestart, #dateend').datepicker({
        defaultDate: '+1w', dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 1, showOtherMonths: true, selectOtherMonths: true,
        onSelect: function(selectedDate) {
            var option = this.id == 'from' ? 'minDate' : 'maxDate';
            var instance = $(this).data('datepicker');
            var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker('option', option, date);
        }
    });
});

Answer 1

Your 'from' needs to be 'datestart'.

var option = this.id == 'datestart' ? 'minDate' : 'maxDate';