Demo of Disableing Dates in Date picker using JQuery

CSS

<style >
.na_dates {
    background-color: Green !important;
    background-image :none !important;
    color: #ffffff !important;
}
</style>

HTML

Date: <input type="text" id="date_picker">

JQUERY

<script>
$(document).ready(function() {
//////////////////////////
$('#date_picker').change(function() {
selectedDate = $(this).datepicker('getDate');
})
/////////////////////
function checkDate(selectedDate) {
 var not_available_dates = ["5-12-2015", "25-12-2015", "1-1-2016", "2-2-2016"];
//For month 09 should be written as 9 only, 5th of any month to be written as 5 only. 
// Try to get Month Part , date part and year part from the selected date.
 var m = selectedDate.getMonth();
 var d = selectedDate.getDate();
 var y = selectedDate.getFullYear();
 

 // Create  a variable in dd-mm-yyyy format ( or the format you want ) 
 // In JavaScript January month starts with 0 and December is 11 so we will increment the month count by 1 
 var date_to_check = d+ '-' + (m + 1) + '-'  + y ;
 
  // Loop through all the elements of Not avalable dates array ///
 for (var i = 0; i < not_available_dates.length; i++) {
 
 // Now check if the selected  date is inside the not available  dates array. 
 if ($.inArray(date_to_check, not_available_dates) != -1 ) {
 return [false,'na_dates','Close date F'];
 }else{
return [true,'	','Open date T'];
}// end of if else 
} // end of for loop
} // end of function checkDate
////////
$(function() {
    $( "#date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay:checkDate
});
});
///////////////////
})
</script>