Creating a Custom Date Textbox User Control: Part 2
In this part we're going to test our user control using the defined properties.
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.
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
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!! :)