Creating a Custom Date Textbox User Control: Part 2

In the last part we created a date textbox user control and defined some custom properties. In this part we're going to test our usercontrol using the defined properties. Let's begin...

Open your application and create a new file -- File>> New file.

Select the Web Form from visual studio installed templates section, give your form a name and click "Add".



Figure 1: New web form

In design view, drag your new usercontrol onto the form. Also drag a button control and give it a text of submit, drag a scriptmanager control onto the page. Select your usercontrol and set some properties from the property manager. We're going to set the following properties.

IsRequired = "True"
UsePopupButton = "False"
ErrorMessage = "A date is required!"
ValidationGroup = "DateExample"

Select your button and set the ValidationGroup property to the same as above. Your code should now look like the following...



Figure 2: Form Example

Save your page and view it in the browser.

Without entering anything click your button. You should receive the error message you entered. This is because we set "IsRequired" property to true. If we set this property to false and view our page again.Note: that if you change this property and refresh your page you will still get the message, but place your cursor in the address bar and hit enter or simple reopen the page. This is because we only check this property on first page load not on postback.

Now click inside of the textbox. You should be presented with a calendar selecting a date will populate the textbox. This is because we set the textbox as the target via the "TargetControlID" property.

Bug:

Okay, I found a small bug in our control. If you're following along you should have gotten the same bug. Notice that when we selected a date the day part is only one digit for numbers beween 1 and 9. This presents a message of invalid date. This is because our regular expression is checking for dd/mm/yyyy and not d/mm/yyyy. So to fix this open your user control and in the calendar extender set the format property to the following: Format="dd/MM/yyyy" and save your control. Now the problem is resolved!

Now let's drag an image button next to the textbox and set its "ImageURL" property to a calendar image on your computer, then set the "UsePopupButton" property of our control to true, and assign the "PopupControlID" property the same as the image button, and its "CausesValidation" property to false. Like so...



Figure 3: Using a popup button

That's it for part 2. Play around with your control, i'm sure there lots more you can find to do with it.

Happy programming!! :)