ASP.NET Ajax CalendarExtender and Validation

ASP.NET Ajax toolkit has a CalendarExtender control which is very cool as you can associate the CalendarExtender to a a TextBox and also to a Button/ImageButton so that you can popup the calendar.

Below is the code to get started with CalendarExtender:

<asp:TextBox 
    ID="TextBox1" 
    runat="server" 
    width="300pt" />
<asp:ImageButton 
    ID="btnCalenderPopup"
    Width="16" Height="16" 
    runat="server" 
    ImageUrl="~/images/calender.bmp" 
    CausesValidation="False" />
<ajaxToolkit:CalendarExtender 
    ID="CalendarExtender1"
    runat="server" 
    TargetControlID="TextBox1" 
    PopupButtonID="btnCalenderPopup" 
    Format="dd/MM/yyyy" />

And here is the output:

and,

Wait! What’s that grayed text in the textbox that says – Enter the Date of Birth (dd/mm/yyyy)

Certainly that’s not the part of CalendarExtender 🙂 , but part of ASP.NET Ajax Toolkit 8) . We can use the TextBoxWatermarkExtender which can display watermarked (grayed) texts on controls. Below is the code for our CalendarExtender :

<ajaxToolkit:TextBoxWatermarkExtender  
    ID="WatermarkExtender1"
    runat="server" 
   TargetControlID="TextBox1" 
   WatermarkCssClass="watermarked" 
   WatermarkText="Enter the Date of Birth (dd/mm/yyyy)" />

And below is the CSS style that’s used with this watermark extender :

.watermarked
{
    color: #C0C0C0;
    font-style: italic;
}

All looks good now and the user is happy the way Calendar pops up, choosing the date and also the fact that he can type in the date in the textbox in the desired format. Now comes the problem – Date Validation! – How are we going to validate the entered date? – I had to validate that the date entered is not more than today’s date.

There are two ways to do it :

1) Using Javascript (with our CalendarExtender)

2) Using RangeValidators for our textbox

Using Javascript:

The CalendarExtender has a property called OnClientDateSelectionChanged which can be set to a piece of javascript which can do the job for us. Below is the code:

<ajaxToolkit:CalendarExtender
    ID="CalendarExtender1"
     runat="server" 
    TargetControlID="TextBox1"
    PopupButtonID="btnCalenderPopup" 
    OnClientDateSelectionChanged="checkMyDate"
    Format="dd/MM/yyyy" />

and below is the javascript:

<script type="text/javascript">
function checkDate(sender,args)
{
    var dt = new Date();        
    if(sender._selectedDate > dt)
    {
        sender
            ._textbox
            .set_Value(dt.format(sender._format));
    }
}
</script>

Using RangeValidator:

Since we use a TextBox control to display our date once we choose from the calendar or to manually input the date, RangeValidators can be used to check whether the date is within a given range (minimum & maximum). Below is the code for RangeValidator :

<asp:RangeValidator 
    ID="RangeValidator1"
    runat="server" 
    ControlToValidate="TextBox1" 
    ErrorMessage="*Please enter proper date" 
    Type="Date" Display="Dynamic" />

And in your page load event we can set our maximum and minimum date values :

RangeValidator1.MinimumValue 
      = new DateTime(1600, 01, 01).ToString("dd/MM/yyyy");
RangeValidator1.MaximumValue 
     = DateTime.Now.ToString("dd/MM/yyyy");

With these two methods you can easily validate the date. And yes, using both would sometimes lead you to race conditions where choosing a date from the calendar might be an invalid date and the RangeValidators would immediately come to the focus.