Monday, May 21, 2012

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-

13 comments:

  1. a very good,worth full and precious post.Keep it up

    ReplyDelete
  2. there is no StartDate property in CalendarExtender.... Please help me out..

    ReplyDelete
  3. (1)Calendar.aspx
    In asp:Calendar tag use OnDayRender="Cal_DayRender"
    (2)Calender.aspx.cs

    protected void Cal_DayRender(object sender, DayRenderEventArgs e)
    {
    if (e.Day.Date < DateTime.Today)
    {
    e.Cell.Font.Italic = true;
    e.Day.IsSelectable = false;
    e.Cell.ForeColor = System.Drawing.Color.Red;
    /*Here use another property to set
    *the cell back color as disable.*/
    }
    }

    ReplyDelete
    Replies
    1. Hi,

      This is supported on latest toolkit. It may not support in lower version of toolkit. In that case you can follow Bikram's approach.

      Delete
  4. there is no StartDate property in CalendarExtender. Please help

    ReplyDelete
  5. oh i was using old version of toolkit, now its working. Good post ...thanks

    ReplyDelete
  6. Thank you so much. You saved my time.

    ReplyDelete
  7. there is no StartDate property in CalendarExtender.... Please help me out..

    ReplyDelete
    Replies
    1. Hi, I have not used toolkit for long time. Better try with some other alternative. Microsoft is no more supporting toolkit.

      Delete