Jquery UI DatePicker Restrict SetOf Date

by Anand Jee

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<h1>Jquery UI DatePicker Restrict SetOf Date</h1>

<hr>
<table id="tblCalendar">
    <tr>
        <td>FROM</td>
        <td><input type="text" class="calendar"/></td>
    </tr>
    <tr>
        <td>TO</td>
        <td><input type="text" class="calendar" id="endDate"/></td>
    </tr>
</table>

CSS

body{font-family: calibri;font-size: 12px;}
table#tblCalendar{border-collapse:collapse;}
table#tblCalendar tr td,table tr th {padding: 4px 10px;border: 1px solid #ddd;}
h1{text-align:center;font-size:15px;}

JavaScript

//Jquery UI DatePicker Restrict SetOf Date
$(".calendar").datepicker({
    dateFormat: 'dd/mm/yy',
		beforeShowDay: getBookedDays
});
/* an array of days which are already Booked */
var disabledDays = ["11-25-2015","11-26-2015","11-27-2015","11-28-2015","12-3-2015","12-4-2015","12-5-2015","12-23-2015","12-24-2015","1-1-2016","1-2-2016","1-3-2016"];

/* utility functions */
function getBookedDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	for (i = 0; i < disabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
			return [false];
		}
	}
	return [true];
}
$("#endDate").datepicker({
		beforeShowDay: getBookedDays
});