Introduction:
In this jQuery UI DatePicker article I will explain how to disable specific days or dates in jQuery datepicker.
In this jQuery UI DatePicker article I will explain how to disable specific days or dates in jQuery datepicker.
Description:
In previous posts I explained Disable Future dates in Calendar, Disable past dates, Disable weekends in datepicker, Show multiple months in datepicker and many articles relating to JQuery and datepicker. Now I will explain how to disable specific dates in jQuery datepicker.
In previous posts I explained Disable Future dates in Calendar, Disable past dates, Disable weekends in datepicker, Show multiple months in datepicker and many articles relating to JQuery and datepicker. Now I will explain how to disable specific dates in jQuery datepicker.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery Datepicker: 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 disableDates = ["2012/11/26",
"2012/11/28", "2012/12/05"]; // yyyy/MM/dd
var disableDays = ["Saturday",
"Sunday"];
function ShowDisableDates(date) {
ymd = date.getFullYear() + "/" + ("0"
+ (date.getMonth() + 1)).slice(-2) + "/"
+ ("0" +
date.getDate()).slice(-2);
day = new
Date(ymd).getDay();
if ($.inArray(ymd, disableDates) < 0 &&
$.inArray(Alldays[day], disableDays) < 0) {
return [true, "enabled", "Book
Now"];
} else {
return [false, "disabled", "Sold
Out"];
}
}
$(function()
{
$("#datepicker").datepicker({beforeShowDay:ShowDisableDates});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
Hi, How can we do this with database populated specific dates?
is it possible to do the above process by fetching holidays dates from database??????
reply
Thanks for the code helped me lot......
Note: Only a member of this blog may post a comment.