Mvc Controller Code :
public JsonResult GetHolidays()
{
List<string> HolidayList = new List<string>();
HolidayList.Add("04-12-2018");
HolidayList.Add("04-13-2018");
HolidayList.Add("04-16-2018");
HolidayList.Add("04-17-2018");
return Json(HolidayList.ToList(), JsonRequestBehavior.AllowGet);
}
View code :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<script type="text/javascript" src="~/scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<label >Date</label>
<input type="text" class="form-control" id="txtcd" />
<span class="input-group-addon" style="cursor:pointer" id="dp">
<span class="glyphicon glyphicon-calendar" style="margin-left:15px"></span>
</span>
</div>
</form>
</div>
</body>
</html>
<style>
.holiday .ui-state-default {
color: red;
}
</style>
<script type="text/javascript">
$(function () {
var holidays;
$.ajax({
url: 'Home/GetHolidays',
type: 'GET',
success: function (data)
{
holidays = data;
}
});
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return disableDays(date);
} else {
return noWeekend;
}
}
function disableDays(date) {
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() ==new Date(date).toString()) {
return [false, "holiday"];
}
}
return [true];
}
$('#dp').click(function () {
$('#txtcd').focus();
});
$('#txtcd').datepicker({ minDate: new Date(), dateFormat: 'dd-M-yy', beforeShowDay: noWeekendsOrHolidays });
});
</script>
