The WebDateTimeEdit™ and the WebDateChooser™ are a pair of ASP.NET controls having the same purpose: to allow the end user to enter a date. How they obtain this information and allow your users to modify this date varies. The WebDateTimeEdit requires that your user type-in the date, use the arrow keys, or click on its spin buttons. On the other hand, the WebDateChooser also allow you to type in the date, use the arrow keys, or select a date from a dropdown Calendar. Although these differences may seem insignificant, there are some key advantages for using one control over the other.
When using the arrow keys in the WebDateTimeEdit, the values are modified based on the location of the input cursor. If the cursor is in the day, month, or year location, then the arrow keys will modify that field only. For the WebDateChooser, the date is modified one day at a time when using the arrow keys independent of the location of the input cursor. The other key difference is in the unique features of each editable control. The WebDateTimeEdit gives your users spin buttons that can mimic a arrow key press by instead clicking on its small up or down spin button. The WebDateChooser dropsdown a calendar where clicking on a date will set the editor's date value. This can be useful as it gives the end user a recognizable interface where they do not have to worry about typing in their date in a format that the editor understands. Since these controls are separate entities, you must pick one or the other. That is until now...
Figure 1 - WebDateTimeEditor (far left), WebCalendar (center) and WebDateChooser (far right) in the Caribbean style set.
To dropdown our WebCalendar™ control using a custom button on the WebDateTimeEdit editor control.
This implementation will require that you have the Microsoft® ASP.NET 2.0 AJAX Extensions installed. If you do not have the ASP.NET AJAX extensions installed, then you should download and install them beforehand. They can be found here:
http://www.asp.net/ajax/downloads/
<script src="ig_dropCalendar.js" type="text/javascript"> </script>