The DatePicker ControlThe 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
Figure 21-2. The DatePicker and its pop-up calendar UI
Figure 21-3. The DatePicker in an error state as the result of an invalid date entry
Figure 21-4. The DatePicker used in a Web browser (Netscape 4.71) that does not support DHTML
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> |