Friday, 2 October 2009

Master user friendly date of birth selection with the AjaxControlToolkit Calendar extender

The latest version of the AjaxControlTookit is out (September 2009 release) and it brings with it two new controls (Seadragon Image Viewer and AsyncFileUpload).

This release also has a heavy focus on quality with over 20 bugs fixed.

The most important one that caught my eye was the new Calendar attribute called DefaultView. This simple attribute will let you open up the calendar in a year -> month -> day order which means collecting date of birth information is now a lot more user friendly.

In previous releases you could switch to the year mode by clicking on the title bar of the calendar twice and experienced users knew this but the vast majority of the internet population didn't. For me this meant that I had to result to having "tip" messages on my forms so that I could be fairly sure that my poor users wouldn't sit there clicking backwards on the calendar for the whole day!

So bug number 9601 has been fixed and now we can do it easily. How easily? Well let me show you!

Code Sample

<asp:TextBox ID="DateOfBirth" runat="server" />
<cc1:CalendarExtender ID="DateOfBirth_CalendarExtender" runat="server" Enabled="True"
   TargetControlID="DateOfBirth" DefaultView="Years" />

As you can see the DefaultView attribute is set to years and when you click in the TextBox the Calendar pops up in year selection mode.

Downloadable Sample

An interactive downloadable sample can be downloaded here:

Further Reading

1 comment:

Source said...

thanks for the tip, it works beautifully for selecting a date of birth!