jQuery Datepicker Examples

Started from trying to help someone on a SO post. Just a few different examples of setting minDate and maxDate with jQuery's datepicker.

by bmarsh123

HTML

<div class="explain">
    <label>Example 1: Automatically set focus to and open the other datepicker after a date is selected. Use setTimeout to prevent the datepicker which will receive focus from opening and closing (comment out the setTimeout in lines 5 and 12 to duplicate this issue).</label>
</div>
<div>
    <input type="text" id="fromDatepicker1" />
    <input type="text" id="toDatepicker1" />
</div>
<div class="explain">
    <label>Example 2: The date selected from the first datepicker is automatically populated in the second datepicker field and set as minDate. When a date is selected from the second datepicker, that date is populated in the first datepicker and set as it's maxDate.</label>
</div>
<div>
    <input type="text" id="fromDatepicker2" />
    <input type="text" id="toDatepicker2" />
</div>
<div class="explain">
    <label>Example 3: When a date is selected from the first datepicker, set that day as the minDate of the second datepicker and display that day plus one day. When a date is selected from the second datepicker, set that day as the maxDate of the first datepicker and display that day minus one day.</label>
</div>
<div>
    <input type="text" id="fromDatepicker3" />
    <input type="text" id="toDatepicker3" />
</div>
<div class="explain">
    <label>Example 4: Here's your basic start and end datepickers. Start date must be before the end date.</label>
</div>
<div>
    <input type="text" id="fromDatepicker4" />
    <input type="text" id="toDatepicker4" />
</div>

CSS

.explain {
    border-radius: 4px;
    background: #ddd;
    padding: 5px;
    margin: 10px 5px 10px 0px;
}

JavaScript

$(function () {
    var hasFromBeenSelected = false,
        hasToBeenSelected = false;
    // Example 1
    $('#fromDatepicker1').datepicker({
        maxDate: $('#toDatepicker1').val(),
        changeYear: true, changeMonth: true, dateFormat: 'mm/dd/yy',
        onSelect: function (date) {
            $('#toDatepicker1').datepicker('option', 'minDate', date);
            // Just because I was tired of it switching, if to datepicker
            // has already been selected, don't set focus back to it
            if (hasToBeenSelected === false) {
                setTimeout(function() { $('#toDatepicker1').focus(); }, 0);
            }
            hasFromBeenSelected = true; // Flag that it has been selected
        }
    });
    $("#toDatepicker1").datepicker({
        minDate: $('#fromDatepicker1').val(),
        changeYear: true, changeMonth: true, dateFormat: 'mm/dd/yy',
        onSelect: function (date) {
            $('#fromDatepicker1').datepicker('option', 'maxDate', date);
            // If from datepicker has already been selected
            // don't set focus back to it
            if (hasFromBeenSelected === false) {
                setTimeout(function() { $('#fromDatepicker1').focus(); }, 0);
            }
            hasToBeenSelected = true; // Flag that it has been selected
        },
        maxDate: '0'
    });
    
    // Example 2
    $('#fromDatepicker2').datepicker({
        changeYear: true, changeMonth: true, dateFormat: 'mm/dd/yy',
        altField: '#toDatepicker2',
        onSelect: function(date) {
            $('#toDatepicker2').datepicker('option', 'minDate', date);
        }
    });
    $('#toDatepicker2').datepicker({
        changeYear: true, changeMonth: true, dateFormat: 'mm/dd/yy',
        altField: '#fromDatepicker2',
        onSelect: function(date) {
            $('#fromDatepicker2').datepicker('option', 'maxDate', date);
        }
    });
    
    // Example 3
    $('#fromDatepicker3').datepicker({
        changeYear:...