The Problem

A date picker is a text box that shows a calendar control to pick the date from. There may be a button or link that brings up the calendar or the text box can. In this note I'll use the button approach. Later I will tackle removing the button and having the text box bring up the calendar. Now there's the right way to create a date picker and wrong way to create one.

The Wrong Way

The wrong way is to put a calendar control on your form and manage the calendar. Microsoft has implemented the calendar poorly so that CSS manipulation of the control tears it apart.

This is a FormView InsertItem template arranged the way I want to see the fields. The Calendar control is dropped onto the form and there is a little calendar icon ImageButton near the 'purchase date' field. The Visibility attribute of the Calendar is set to False. Click the button and the Click handler for the button changes the CssClass attribute of the calendar using absolute positioning to move the control under the field and the handler makes the control visible.

Click on a date in the Calendar and handler makes the control invisible so it disappears.

This is the form before pressing the button.

Press the button and look what happens! The header of the Calendar is ripped from the control and moved to the lower right and the body of the control appears where we want it. This is terrible.!

 The Right Way

Back in Visual Studio, let's add a Panel to the form and move the Calendar into the Panel. This way we control the panel, not the calendar.

Now we run it, press the calendar button and the calendar appears as it should.

 Some Code

This is a helper function in the code page that cycles through the forms control collection looking for the control with the ID identifies the Calendar, Panel or whatever on the form we are after. We return the control or NULL to the calling routine and determine the outcome there.

These two handlers do all the work. The click handler for the button is the first one.

1. Find the Panel control in the form.

2. Change it's CssClass so that it positions the Panel correctly.

3. Change the Panel's Visibility attribute to True ie visible.

Then you see the Calendar in the right place all in one piece. The Calendar's SelectionChanged event is how you detect that the user selected a date.

1. The 1st two statements find the purchaseDate text box and stuff the Calendar's selected date as a formatted short date into the text box.

2. The next 3 statements make the Panel invisible. The CssClass is unnecessary but is consistent changing it's location (if desired).

 That's it, a date picker created from a Panel, a Calendar, a Text box and optionally an Image Button. I would have just used the Calendar, not the Panel/Calendar set to accomplish this but the coding for the Calendar is not quite right. This solves the problem nicely.