|
|
|
MaskedEdit Extender with Date |
|
Posted by
Moderator1
on
6/12/2007 6:48:09 AM
|
Category:
AJAX |
|
|
Total Views :
24227 |
|
Adding to your Favorites....
|
|
|
 |
|
|
|
|
|
Introduction |
|
This article explains the MaskedEdit Extender With Date MaskType. |
|
|
|
Description |
|
MaskedEdit, an excellent control to use, with web applications. The MaskedEdit control
is an ASP.NET AJAX extender that
can be attached to a TextBox control. When using
MaskedEdit the input is masked and the value is validated on the client according
to the MaskType chosen. The MaskedEdit control has to be integrated with the MaskedEditValidator
to verify the input. Here I’m going to explain how to use the MaskedEdit extender
to take Date as input and validate it.
|
|
|
|
|
Step 1:
Open Microsoft Visual Studio, create a new AJAX enabled web site.
Step 2: Add ScriptManager control to your Default.aspx page.
Step 3: Add a TextBox control to the page.
Step 4: Add MaskedEdit extender.
Step 5: Set the Mask property to of the extender to "99/99/9999", MaskType property "Date", TargetControlID
to "TextBox1" and PromptCharacter="_".
|
|
|
|
|
|
|
You can set different date format throught the Mask Property. The MaskType property
plays a major role for data validation.
|
|
|
Step 6: Then drag and drop MaskedEditValidator into the page. Set the properties
of the MaskedEditValidator as follows:
a. Set ControlExtender as "MaskedEditExtender1"
b. Set ControlToValidate as "TextBox1"
c. Set EmptyValueMessage as "Date is required"
d. Set InvalidValueMessage as "Date is invalid"
e. Set IsValidEmpty property to "False" and TooltipMessage property to "Input a
Date".
The ControlExtender property is used to integrate the MaskedEdit extender and the
MaskedEdit validator. The ControlToValidate property is used to bind the input Textbox
and the validator.
|
|
|
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
Mask="99/99/9999" MaskType="Date" TargetControlID="TextBox1" PromptCharacter="_">
</cc1:MaskedEditExtender>
<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1"
ControlToValidate="TextBox1" EmptyValueMessage="Date is required" InvalidValueMessage="Date is invalid" IsValidEmpty="False" TooltipMessage="Input a Date"></cc1:MaskedEditValidator>
|
|
|
|
I have explained very briefly about the MaskedEdit extender. This extender can also
be used to masked for various datatypes such as Number and Times. Now the task to
validate the date input has been easily for most web developers.
Do you want to see this Sample,
click here. |
|
|
|
|
|
|
|
|
|
|
|
|
|