date picker bug/issue (solved)

cliggit

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<h1 style="color: #21B53E; font-size: 22pt;">solved.</h1>

<input type="text" placeholder="from this date" id="garbage_dpFrom" />
to
<input type="text" placeholder="that date" id="garbage_dpTo" />
<br />
<input type="button" value="Clear Dates" 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 the current month)</li>
<li>Click 'from this date' textbox, note the restrictions</li>
<li>Click 'clear dates'</li>
<li>Click 'from this date' textbox .. restrictions?!</li>
(to fix, check to javascript code to the left)
</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; 
}

input[type='button'] {
    padding: 2pt;
    padding-left: 6pt;
    padding-right: 6pt;
}















#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.val(''); // omarjebari solution
});