Set/Reset jQuery Datepicker Date Range

Question

I have a dropdown with a few options and based on what is selected I need two datepickers (start date & end date) to have a specific date range. In the example below, if options 1 or 3 are selected, the end date can be any date in the future. If option 2 is selected, the date range should be 30 days.

In the jsFiddle below, both datepickers work as they should no matter which option you select first. My issue is that if you select option 1 or 3 first, then select option 2, it does not change the date range to only be 30 days. Flip flop it, select option 2 first and initially it works fine but change the dropdown to either option 1 or 3 and it keeps the 30 day date range as if option 2 was still selected.

How do I reset the date ranges every time a selection is made so that they are correct based on what is selected?

This jsFiddle shows currently how it is working: http://jsfiddle.net/p3J28/

And here is the code, copied/pasted from the jsFiddle.

<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdatepicker" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddatepicker" />
</div>

<script>
$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 30);
                    $('#enddatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 30);
                    $('#startdatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 
                        'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 
                        'maxDate', selected);
                }
            }
        });
    }
});
</script>

Also, I'm sure there is a much easier/better way of doing this so feel free to offer any suggestions as they are greatly appreciated.

Updated jsFiddle http://jsfiddle.net/6AKrg/

I was able to make a little progress but still do not have this working correctly. My issue now is only after Option 2 has been selected does it not reset the date ranges. The date range is correct if you select either Option 1 or Option 3 first and adjusts the date range as it should if you then select Option 2. After selecting Option 2, the date range does not get reset if you switch back to either Option 1 or Option 3. Anyone have any ideas?

Answer 1

I believe I finally figured this one out. When a different dropdown option is selected, the date ranges are being reset correctly.

Working jsFiddle: http://jsfiddle.net/KXqHc/

Here is the majority of the jQuery:

$(function() {
    $('#startdatepicker, #enddatepicker').datepicker({
        beforeShow: customRange,
        dateFormat: "mm/dd/yy",
        firstDay: 1,
        changeFirstDay: false
    });
});

function customRange(input) {
    var min = null, // Set this to your absolute minimum date
    dateMin = min,
    dateMax = null,
    dayRange = 30; // Restrict the number of days for the date range

    if ($('#select1').val() === '2') {
        if (input.id === "startdatepicker") {
            if ($("#enddatepicker").datepicker("getDate") != null) {
                dateMax = $("#enddatepicker").datepicker("getDate");
                dateMin = $("#enddatepicker").datepicker("getDate");
                dateMin.setDate(dateMin.getDate() - dayRange);
                if (dateMin < min) { dateMin = min; }
            } else {  }
        } else if (input.id === "enddatepicker") {
            dateMin = $("#startdatepicker").datepicker('getDate');
            dateMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), 
            dateMin.getDate() + 30);
            if ($('#startdatepicker').datepicker('getDate') != null) {
                var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), 
                    dateMin.getDate() + dayRange);
                if (rangeMax < dateMax) { dateMax = rangeMax; }
            }
        }
    } else if ($('#select1').val() != '2') {
        if (input.id === "startdatepicker") {
            if ($('#enddatepicker').datepicker('getDate') != null) {
                dateMin = null;
            } else {  }
        } else if (input.id === "enddatepicker") {
            dateMin = $('#startdatepicker').datepicker('getDate');
            dateMax = null;
            if ($('#startdatepicker').datepicker('getDate') != null) {
                dateMax = null;
            }
        }
    }
    return {
        minDate: dateMin,
        maxDate: dateMax
    };
}

Also, thanks to this post by @RussCam about datepicker restricting range with 2 input textboxes which can be found here as it provided a great start. Had to make a few changes to account for the dropdown control I have, but very helpful.

Answer 2

Refreshing (http://api.jqueryui.com/datepicker/#method-refresh) at the end of change should do the trick http://jsfiddle.net/p3J28/1/

$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 5);
                    $('#enddatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 5);
                    $('#startdatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 'maxDate', selected);
                }
            }
        });

    }

    $('#startdatepicker, #enddatepicker').datepicker('refresh');
});