ASP.NET 4 Unleashed

Creating a Pop-Up Date Picker

You can use a Calendar control to create a fancy pop-up date picker if you are willing to add a little JavaScript and some Cascading Style Sheet (CSS) rules to a page. The page in Listing 4.9 contains a TextBox and Calendar control (see Figure 4.6).

Figure 4.6. Displaying a pop-up calendar.

The Calendar control is hidden until you click the calendar image. The #datePicker style sheet rules sets the display property to none. When you click the image of the calendar, the JavaScript displayCalendar() function executes and sets the CSS display property to the value block.

When you select a date from the calendar, the ...