Creating a Custom DateTextbox User Control: Part I

I was working on an application for online store. I found that pretty often I would create a textbox and link it to a calendar extender to perform some date populating. So I decided to create a usercontrol that I could use each time I wanted to perform that task.

Here it is. Enjoy!!

First create a new usercontrol and name it "DateTextBox", check the box to place code in codebehind file. In design view drag and drop a textbox asp control on the page. Note: Use an asp textbox control not an html text field.

Give your textbox control an identifier. I called mine txtDateVal. Now still in design view use the smart tag of the textbox and click add extender.



Figure 1: adding extender.

Select the calendar extender. Give your extender an identifier and click ok. I used "cDateValue" for my identifier.



Figure 2: Choosing the calendar extender.

Next in the properties panel. If you don't see it go to "View" menu and select "Properties Window". Switch to code view and place your cursor over the code of the calender extender control... in the properties panel look for "TargetControlID" and type txtDateVal (or whatever name you assigned to your textbox control). You could also type it directly in the code of the calender extender; type TargetControlID="txtDateVal". What this does is set the text of the textbox control to the date selected in the calendar at runtime.



Figure 3: Assigning the TargetControlID property.

Now we're going to add validators to our control.

From the toolbox validators tab drag a RegularExpressionsValidator on to the page in code view assign it an identifier (ID) of "regDateValidator". Switch to design view and select the validator, set the "ValidationExpression" property to the following; ValidationExpression="\d{2}/\d{2}/\d{4}", and set the "Display" property to "None". Click add extender. Select the validation callout extender assign it an identifier and click ok. I gave mine an ID of "vceRegExpression".

From your toolbox validation tab drag a requiredfieldvalidator on to the page, assign it a name of "rqDateVal". Set it's "ControlToValidate" property to txtDateVal. Extend your requiredfieldvalidator with a validation callout extender

Your markup should now look something like the following ...



Now let's get into the fun stuff. Open your code page from the solution explorer. If you don't see the solution explorer, in your visual studio editor go to the "View" menu and click on "Solution Explorer".

Now that your code behind is opened we will add some Public Properties to our custom control. Why Public Properties? This makes our properties accessible to other controls and pages.

I think this would be a good time to point out that i'm using VB.NET for this example. If you're using C# or another .NET language your code will look different to mine, but i'll try to explain as clearly as possible so you can follow along.

Firstly, we want to reference a few namespaces so i'll import them in the top of my codebehind like this

Imports System
Imports System.Web
Imports System.Web.Security
Imports System.Web.UIImports System.Web.UI.WebControls