In this article I will explain how to disable particular
days in Datapicker on ASP.NET using JQuery.
In this scenario we need to disable particular days.
Below is the sample code of JQuery in ASP.NET.
In my previous articles I explained Different types of Date formats in JQuery, How to disable previous days in Datepicker using JQuery , How to disable Weekend days in Datepicker using JQuery, How to disable future days in Datepicker using JQuery
In my previous articles I explained Different types of Date formats in JQuery, How to disable previous days in Datepicker using JQuery , How to disable Weekend days in Datepicker using JQuery, How to disable future days in Datepicker using JQuery
Sample code :
<script type="text/javascript">
var Alldays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var disableParticularDates = ["2014/04/16", "2014/05/20", "2014/06/24", "2014/04/18", "2014/05/21", "2014/06/28"]; // yyyy/MM/dd
var disableParticulaDays = ["Saturday", "Sunday"];
function
ShowDisableDays(date) {
ymd = date.getFullYear() + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + ("0" + date.getDate()).slice(-2);
day = new Date(ymd).getDay();
if ($.inArray(ymd,
disableParticularDates) < 0 && $.inArray(Alldays[day],
disableParticulaDays) < 0) {
return [true, "enabled", "Book Now"];
} else {
return [false, "disabled", "Sold Out"];
}
}
$(function () {
$("#datepicker").datepicker({ beforeShowDay:
ShowDisableDays });
});
</script>
Output:
Below is the total page design:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable Particular Dates</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
var Alldays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var disableParticularDates = ["2014/04/16", "2014/05/20", "2014/06/24", "2014/04/18", "2014/05/21", "2014/06/28"]; // yyyy/MM/dd
var disableParticulaDays = ["Saturday", "Sunday"];
function
ShowDisableDays(date) {
ymd = date.getFullYear() + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + ("0" + date.getDate()).slice(-2);
day = new Date(ymd).getDay();
if ($.inArray(ymd,
disableParticularDates) < 0 && $.inArray(Alldays[day],
disableParticulaDays) < 0) {
return [true, "enabled", "Book Now"];
} else {
return [false, "disabled", "Sold Out"];
}
}
$(function () {
$("#datepicker").datepicker({ beforeShowDay:
ShowDisableDays });
});
</script>
</head>
<body>
<form runat="server" id="DesablePrevious">
Holidays :
<asp:TextBox runat="server" ID="datepicker" />
</form>
</body>
</html>
No comments:
Post a Comment