DATEPICKER - FROM - AND - TO - SETTINGS

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<input type="text" placeholder="from this date" id="garbage_dpFrom" />
to
<input type="text" placeholder="that date" id="garbage_dpTo" />

<input type="button" value="Clear Dates" class="button" id="clearDates" />

<ul><strong>How to reproduce the error</strong></ul>
<li>Click 'from this date' textbox, observe ... no restrictions</li>
<li>Click 'that date' textbox</li>
<li>Select 16 on the datepicker (or any date in February)</li>
<li>Click 'from this date' textbox, note the restrictions</li>
<li>Click 'clear dates'</li>
<li>Click 'from this date' textbox .. restrictions?!</li>
</ul>



















<img src="http://www.ifaheurope.org/upl/4/en/img/shutterstock_12204901%20small.jpg" id="PIKTUREOFACAT" title="HAAAAALP!" />

CSS

/* don't mind the css, it's irrelevant to the problem */


/* it'd way down there if you're interested though *//*

 ||
 ||
 ||
_||_
\||/
 \/
                                  derp          */























@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

body { overflow: hidden; padding: 5%; }
* { font: 10pt 'Open Sans', sans-serif; }
strong { font-size: 15pt; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px; }

input[type='text'] {
    
    padding: 3pt;
    font: 9pt 'Open Sans', sans-serif;
    letter-spacing: 1pt;
}

input[type='text'] { 
    text-align: right; 
    padding-right: 10pt; 
}

input[type='text'] + input[type='text'] { 
    text-align: left !important; 
    padding-right: 0pt !important; 
    padding-left: 10pt; 
}

.button {
    display: block;
    font: 9pt 'Open Sans';
    padding: 3px 12px 3px 12px;
    background-color: #fefefe;
    border: 1px solid #aaa;
    border-bottom: 3px solid #aaa;
    cursor: pointer;
}

.button:active {
    margin-top: 3px;
    border-bottom: 1px solid #666 !important;
}

.button:hover {
    border-color: #444;
}

.button:active + ul {
    margin-top: -1px;
}















#PIKTUREOFACAT {
    position: absolute;
    display: block;
    bottom: -10px;
    right: 0px;
    width: 124px;
    height: 167px;
}

JavaScript

var dates = $("input[id$='dpFrom'], input[id$='dpTo']").datepicker({
    onSelect: function(selectedDate) {
        var option = this.id == $("input[id$='dpFrom']")[0].id ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.datepicker( "option" , {
        minDate: null,
        maxDate: null} );
});