SO - 15400775
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<input id='from' type='text' placeholder='from' />
<input id='to' type='text' placeholder='to'/>
<input id='clear' type="button" value="Clear Selection" />
JavaScript
var array = ["2018-09-22","2015-03-15","2015-03-16"]
var _selectedDay = "";
var _cascadeDisabled = false;
$('#from').datepicker({
beforeShowDay: function(date) {
var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
var _isDisabledDate = array.indexOf(_date) != -1;
return [ array.indexOf(_date) == -1 ]
},
onClose: function(dateStr, event) {
_selectedDay = dateStr;
}
});
$('#to').datepicker({
beforeShowDay: function(date) {
var _date = jQuery.datepicker.formatDate('yy-mm-dd', date);
var _isDisabledDate = array.indexOf(_date) != -1;
if(_selectedDay.length && _isDisabledDate
&& _selectedDay < _date) {
_cascadeDisabled = true;
}
if(_cascadeDisabled) return false;
return [ array.indexOf(_date) == -1 ]
},
onClose: function(dateStr, event) {
_cascadeDisabled = false;
}
});
$("#clear").click(function() {
$("input[type='text']").val("");
});