Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Disable Specific Dates in jQuery UI Datepicker

Nov 26, 2012
Introduction
  
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.

To disable specific dates in datepicker we need to write the code like this


<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 RSS subscribe by email Subscribe by Email

3 comments :

Anonymous said...

Hi, How can we do this with database populated specific dates?

Anonymous said...

is it possible to do the above process by fetching holidays dates from database??????
reply

Unknown said...

Thanks for the code helped me lot......

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.