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 lets 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.UI
Imports System.Web.UI.WebControls
If you're using C# you'll use the keyword "using" instead of "Imports".
We are defining the basic properties that we want to make accessible to other controls.
these are ...
Text, TextMode, Width, Height, Enabled, ValidationGroup, ValidationText, ErrorMessage, IsRequired and AutoCompleteType
Let's begin
Note: don't worry about the namespace assignment. I used the namespace assignment of the solution for this control; you may use the namespace of yours (optional).
Imports System
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Globalization
Imports System.Text.RegularExpressions
Namespace Glaze.SmartCart.BLL.Common.UI.Web.Controls
Partial Public Class DateTextBox
Inherits UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
If Not Me.UsePopupButton Then
Me.PopupButtonID = "txtDateVal"
End If
If Not Me.IsRequired Then
Me.rqDateVal.Enabled = False
End If
End If
End Sub
Public Property Text() As String
Get
Return txtDateVal.Text
End Get
Set(ByVal value As String)
txtDateVal.Text = value
End Set
End Property
Public Property ErrorMessage() As String
Get
Return rqDateVal.ErrorMessage
End Get
Set(ByVal value As String)
rqDateVal.ErrorMessage = value
End Set
End Property
Public Property Enabled() As Boolean
Get
Return txtDateVal.Enabled
End Get
Set(ByVal value As Boolean)
txtDateVal.Enabled = value
End Set
End Property
Public Property Width() As Unit
Get
Return txtDateVal.Width
End Get
Set(ByVal value As Unit)
txtDateVal.Width = value
End Set
End Property
Public Property Height() As Unit
Get
Return txtDateVal.Height
End Get
Set(ByVal value As Unit)
txtDateVal.Height = value
End Set
End Property
Public Property TextMode() As TextBoxMode
Get
Return txtDateVal.TextMode
End Get
Set(ByVal value As TextBoxMode)
txtDateVal.TextMode = value
End Set
End Property
Public Property ValidationGroup() As String
Get
Return rqDateVal.ValidationGroup
End Get
Set(ByVal value As String)
txtDateVal.ValidationGroup = value
rqDateVal.ValidationGroup = value
End Set
End Property
Public Property ValidationText() As String
Get
Return rqDateVal.Text().ToString
End Get
Set(ByVal value As String)
rqDateVal.Text = value
End Set
End Property
Public Shadows Property SkinID() As String
Get
Return txtDateVal.SkinID
End Get
Set(ByVal value As String)
txtDateVal.SkinID = value
End Set
End Property
Public Property AutoCompleteType() As AutoCompleteType
Get
Return txtDateVal.AutoCompleteType
End Get
Set(ByVal value As AutoCompleteType)
txtDateVal.AutoCompleteType = value
End Set
End Property
Property PopupButtonID() As String
Get
Return cDateVal.PopupButtonID
End Get
Set(ByVal value As String)
cDateVal.PopupButtonID = value
End Set
End Property Public Property UsePopupButton () As Boolean
Get
Return CBool(Me.ViewState("UsePopupButton "))
End Get
Set(ByVal value As Boolean)
Me.ViewState("UsePopupButton ") = value
End Set
End Property
Public Property IsRequired() As Boolean
Get
Return CBool(Me.ViewState("IsRequired"))
End Get
Set(ByVal value As Boolean)
Me.ViewState("IsRequired") = value
End Set
End Property End Class
End Namespace
Let's explain what we have so far.
On page load we want to set the popupbuttonid property of the calendar extender to the textbox's id if we're not using a calendar image button. The boolean property "UsePopupButton" is true if we're using an image button, and false if we're not. We also want to check whether or not the date textbox is a required field, if not then we disable the requiredfieldvalidator.
If Not Me.UsePopupButton Then
....
End IfThe calendar control's "PopupButtonID" property gets set to the id of the textbox only if that statement evaluates to true. What is the "PopupButtonID" for? Well... at runtime when a user clicks on the control with the popupbuttonid identifier this invokes the calender extender, and it lauches the calendar control. So if the Identifier is the textbox, when a user mouse clicks inside of the textbox this launches the calendar. Some designers use a calendar icon position to the right of the textbox... in this case when that icon is clicked the calendar launches.
If Not Me.IsRequired Then
....
End IfThe RequiredFieldValidator control's "Enabled" property is set to false only if that statement evaluates to true.
All of the other properties should be pretty self explanatory.
That's it for part 1. Next i'll show you how to use your control in a page. Coming in part 2.
Happy programming!! :)
No comments:
Post a Comment
Leave a comment. Thank you!