The DatePicker Control

The DatePicker control offers an intuitive mechanism for date entry in a Web application. In addition to providing a text box for manual entry, the control contains a pop-up calendar for visually selecting a date and navigating across different months. This combination is a popular mechanism for selecting dates and can be found on various commercial Web sites, such as Expedia.com (http://www.expedia.com).

Figures 21-1 through 21-4 demonstrate the DatePicker control being used in an .aspx page.

Figure 21-1. The DatePicker UI in its default state

graphics/f21hn01.jpg

Figure 21-2. The DatePicker and its pop-up calendar UI

graphics/f21hn02.jpg

Figure 21-3. The DatePicker in an error state as the result of an invalid date entry

graphics/f21hn03.jpg

Figure 21-4. The DatePicker used in a Web browser (Netscape 4.71) that does not support DHTML

graphics/f21hn04.jpg

Listing 21-1 shows the DatePickerTest.aspx page that was used in Figures 21-1 through 21-4.

Listing 21-1 DatePickerTest.aspx

 <%@ Page language="C#" %> <%@ Register TagPrefix="mspwc" Namespace="MSPress.WebControls"    Assembly="MSPress.WebControls" %> <html>   <head>     <script runat="server">       public void datePicker1_OnDateChanged(object sender,            EventArgs e) {           label1.Text = "You picked " +               datePicker1.SelectedDate.ToShortDateString();       }     </script>   </head>   <body>     <form runat="server">

 <p>         <asp:Label runat="server" id="label1" text="Pick a date:" />         <mspwc:DatePicker runat="server" id="datePicker1"           onDateChanged="datePicker1_OnDateChanged"           ValidationMessage="Enter a date in dd/mm/yyyy format">           <CalendarStyle Font-Name="Verdana" Font-Size="8pt"             ForeColor="DarkSlateBlue" BackColor="beige"             BorderStyle="Solid" BorderWidth="1px" BorderColor="Tan"             Width="220px" Height="220px"/>           <DayHeaderStyle Font-Bold="true" BackColor="Tan"/>           <TitleStyle Font-Bold="true" BackColor="DarkRed"              ForeColor="Beige"/>           <SelectedDayStyle BackColor="#ccccff"/>           <OtherMonthDayStyle ForeColor="#cc9966"/>           <TodayDayStyle BackColor="PaleGoldenRod"/>         </mspwc:DatePicker>         <asp:RequiredFieldValidator runat="server"           ControlToValidate="datePicker1"           ErrorMessage="(A date is required)" />         <br>         <asp:Button runat="server" Text="Submit" />       </p>     </form>   </body> </html>

Here is the fragment of HTML rendered by the DatePicker control in the sample page in Listing 21-1.

 <spanid="datePicker1" dp_htcURL="/aspnet_client/mspress_webcontrols/1_0_0_0/Calendar.htc" dp_width="220px"dp_height="220px" dp_calendarStyle="color:DarkSlateBlue;background-color:Beige;font- family:'Verdana';font-size:8pt;border:1pxTanSolid;" dp_titleStyle="color:Beige;background-color:DarkRed;font-weight: bold;" dp_dayHeaderStyle="background-color:Tan;font-weight:bold;" dp_otherMonthDayStyle="color:#CC9966;" dp_todayDayStyle="background-color:PaleGoldenrod;" dp_selectedDayStyle="background-color:#CCCCFF;"> <inputname="datePicker1:dateTextBox"type="text"maxlength="10" id="datePicker1_dateTextBox"/> <imghspace="4"onclick="dp_showDatePickerPopup(this, document.all['datePicker1_dateTextBox'],document.all['datePicker1'])" src="/aspnet_client/mspress_webcontrols/1_0_0_0/Picker.gif" align="AbsMiddle"border="0"style="height:21px;width:34px;"/> <spantitle="Enteradateindd/mm/yyyyformat" id="datePicker1__ctl1" controltovalidate="datePicker1_dateTextBox" errormessage="Enteradateindd/mm/yyyyformat" display="Dynamic" evaluationfunction="RegularExpressionValidatorEvaluateIsValid" validationexpression="^\s*(\d{1,2})([-./])(\d{1,2})((\d{4})(\d {2}))\s*$" style="color:Red;display:none;"> <imgsrc="/aspnet_client/mspress_webcontrols/1_0_0_0/Error.gif" align="AbsMiddle"border="0"style="height:16px;width:16px;"/> </span> </span>