.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal

Post New Resource Bookmark and Share   

How to disable certain dates in Jquery calenders

Posted By:Ashutosh Jha       Posted Date: August 31, 2014    Points: 200    Category:    URL: http://www.dotnetspark.com  

In this article i am going to explain, how we can disable some particular days from a calender.

In this article i am going to explain, how we can disable some particular days from a calender. This will be helpful when we are dealing with some of the systems like hospital management or booking system in which we don't want user to select some particular days of the month due to certain reason. In  this case we can use jquery calender and use the below codes to achieve this.

Select an asp.net textbox from the toolbox control-

<asp:Textbox id="datepicker" runat="server"></asp:Textbox>

Here i have used id of the textbox as the datepicker. I will use the same control within the javascript functions. 

Here i want to disable the three dates-

2014/09/28 and

from the calender. So use the below javascript code to disable the above mentoined dates from the calender-

<script type="text/javascript">
var Alldays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var disableDates = ["2014/09/06", "2014/09/28", "2014/09/29"]; // 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() {

That's all. Add the above javascript code in the head section of your page and put above mentioned textbox in the body of your page. Now run the web page and see the output. You will find all the above dates are disabled from the calender control.


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend