In this article I will explain how to disable Future Dates in AJAX Control Toolkit CalendarExtender Control.
As we all know directly there is no provision to disable future dates in AJAX Control Toolkit CalendarExtender Control, hence I have developed a script that will do the job for you. You just need to follow the simple steps shown below
HTML Markup
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<link href="CSS.css" rel="stylesheet" type="text/css" />
<script src="Extension.min.js" type="text/javascript"></script>
<asp:TextBox ID="txtDate" runat="server" CssClass="disable_future_dates" />
<asp:ImageButton runat="server" ID="imgPopup" ImageUrl="~/Calendar.png" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate"
PopupButtonID="imgPopup" />
</form>
</body>
</html>
Disabling Future Dates
In order to disable future dates we need to follow 2 simple steps.
1. Add CSS.css and Extension.min.js files just below the ScriptManager as shown in the HTML Markup above.
2. Set the CssClass property to disable_future_dates for the TextBox control associated with the CalendarExtender for which you want to disable the future dates.
That’s it you need to do and your AJAX CalendarExtender will now disable the future dates.
Demo
Downloads
No comments:
Post a Comment