Disable past date in ajax control toolkit calendar extender

This is a simple post where we will be talking about disabling past dates in calendar extender of ajax control toolkit. Let’s take the following example-

<asp:TextBox runat="server" ID="Date1" autocomplete="off" /><br />
<ajaxToolkit:CalendarExtender ID="defaultCalendarExtender" runat="server"  TargetControlID="Date1"   />

This will display the all the dates in calendar extender. Disabling the past date is simple. We only need to set one property of the calendar extender. And this is StartDate property of the calendar extender and it is good to set the property from code behind. So, we can simply disable the past date by following code-

    protected void Page_Load(object sender, EventArgs e)
    {
        defaultCalendarExtender.StartDate = DateTime.Now;
    }

The disabled date is shown as the attached image. What if we want to change the style of the disabled date? That is also simple. The extender adds a CSS class to the disabled dates named ajax__calendar_invalid. We can check this by developer tools, for instance chrome inspector. Want we can do, right click on any disabled date and from the context menu chose Inspect Element. Then we can see the CSS class.

We can override the CSS class as per out need. For instance we can change the CSS as below-

<style>
.ajax__calendar .ajax__calendar_invalid .ajax__calendar_day 
{
    background-color:gray;
    color:White; 
    text-decoration:none; 
    cursor:default;
}
</style>

The new style looks like-