AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 MaskedEdit Extender with Date
Posted by Moderator1 on 6/12/2007 6:48:09 AM Category: AJAX
Total Views : 150946
Add to my favorites
Email to friend
  
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.
Viewer's Comments
Posted by jappenzeller on 6/27/2007 11:14:11 AM
Simple to the point example. Thanks.
 
Posted by Noluthando on 11/27/2007 4:23:45 AM
GOOD
 
Posted by abcd on 12/16/2007 11:51:55 PM
On Post back the message remains even if we enter the correct date
 
Posted by veena on 2/28/2008 4:24:00 AM
this is good artical iam using the maskedit text box in the wizard control of asp.net2.0 but here the maskvalidator is not working can any body knows y the ajax control not work in the asp.net
 
Posted by Maggie on 3/7/2008 3:31:04 AM
I'll try again :) Is it possible to use MaskedEditExtender and MaskedValidator controls with the CalendarExtender control ??
 
Posted by Arul on 3/21/2008 10:22:51 AM
This is very good artical . I'll try
 
Posted by Ashvin on 4/23/2008 3:17:15 AM
Thanks sir, THis is very usefull.
 
Posted by Mehar on 6/17/2008 6:51:17 AM
Good one!!!
 
Posted by suryaprakash on 7/3/2008 2:28:03 AM
yours article is good .this will mostly enough to underdtand thanQ
 
Posted by suryaprakash on 7/3/2008 3:00:19 AM
When i am debugging an application i mgetting an error that is startindex lessthan 0 what it is? give me the solution
 
Posted by vidya on 7/9/2008 8:00:59 AM
Thanku!!! it really helped me a lot
 
Posted by Nishita on 11/28/2008 4:11:07 AM
I need the date format as DD-MM-YYYY (i.e separator should be "-" ,instead of "/"). with date should me display when user entered a invalid date. i have changed the Mask="99/99/9999" as Mask="99-99-9999", but it is not working. if anyone have solution, then please send it to me. Thanks in advance....
 
Posted by jayant on 12/3/2008 5:30:42 AM
well explained
 
Posted by eer6e on 2/24/2009 5:14:25 AM
thanx
 
Posted by sam on 3/4/2009 4:15:40 AM
very Good Explanation...
 
Posted by Nirmal Choudhary on 3/19/2009 12:09:28 AM
How Can I Set a date Format ('dd/mmm/yyyy' or dd/mm/yyyy') in mask edit extender of ajax in asp.net 2.0
 
Posted by kh.kishwar on 5/29/2009 2:26:19 AM
the date format in mm/dd/yyyy. but i want the date format in dd/mm/yyyy. anyone who help me achieve this will be fine and thankful.
 
Posted by Ali on 8/4/2009 4:17:01 AM
I have asp.net 2.0 and when I put MaskedEditExtender control on the page, I don't see the Mask and MaskTyp properties!! I must click on {Expression} to display the MaskedEditExtender Expressions window to see the properties. There are 3 Expression Types (AppSettings, ConnecitonjStrings, Resources)!!! I don't think I have as what you have explained. Any help?
 
Posted by Ali on 8/4/2009 4:18:12 AM
I have asp.net 2.0 and when I put MaskedEditExtender control on the page, I don't see the Mask and MaskTyp properties!! I must click on {Expression} to display the MaskedEditExtender Expressions window to see the properties. There are 3 Expression Types (AppSettings, ConnecitonjStrings, Resources)!!! I don't think I have as what you have explained. Any help?
 
Posted by Soni on 8/4/2009 7:11:19 AM
Thanks it works
 
Posted by namespce in Dotnet on 8/5/2009 11:31:17 AM
Hello All, Namespace is logical group of Classies which are help to develop application. I have put article about namespace in DotNet.. Must read.. It's really helpfull for further infomration open "http://developmentwithdotnet.blogspot.com" Thanks -Nimesh.
 
Posted by Prachi on 8/12/2009 5:59:59 AM
It helped me.. Thanx..
 
Posted by bikash on 9/14/2009 1:36:36 AM
good and easy like magic
 
Posted by Anish on 10/20/2009 7:47:43 AM
Great
 
Posted by Waqas Ahmed on 12/10/2009 4:03:04 AM
Any body tell me Ajax Errors in java Script file... how i solve these errors.. plz?
 
Posted by Waqas Ahmed on 12/10/2009 4:04:06 AM
Very Good Explanations... Thanx Alot
 
Posted by Abu Abdullah on 1/10/2010 3:17:37 AM
Can you please make the input date to be dd/MM/yyyy ???? I was searching the internet to solve my problem when I found your example. I have a working example except that I am not able to set the input date to be dd/MM/yyyy I hopt to see an answer. Thanks
 
Posted by Abu Abdullah on 1/10/2010 11:14:50 AM
I have already figured out the answer. I used CluturalName property of the MaskedEditExtender control to be en-GB. I figured out that leaving this property left out will let the page to take default settings which is en-US. I was using en-US in my web.config but I removed it. Thanks
 
Posted by vishnuvardhan on 1/19/2010 1:28:38 AM
Can you please send me the code of "MaskedEdit Extender with Date" It is very useful to me running project. so pls send me the sample application with custom controls/user controls also
 
Posted by Joel on 3/4/2010 3:28:59 AM
Hi, good job but i am missing something. Is there any way to clean the textbox when the data is invalid? I mean, if i have a save button, even having the wrong date, the data is saved. How i can clean the textbox, or dont save the wrong values? Thanks
 
Posted by Raju on 5/3/2010 4:28:33 AM
Simple and Super thanks
 
Posted by Ujjwal on 5/28/2010 1:07:32 AM
Simple to the point example. Thanks... great.....
 
Posted by jeff on 11/28/2010 9:38:25 PM
I tried your example, validation is working, but the mask is not working... <%@ Page Title="Households" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="household.aspx.cs" Inherits="_Default" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <asp:Content ID="HeaderContent" runat="server" Cont
 
Posted by rhiena on 1/20/2011 7:10:34 PM
hiii, i wonder to make the ID combination of [yyy/MM/dd then yyy/MM and the number ID] how can i use ajax control toolkit with different condition with one control, help me please??
 
Posted by Raju on 2/6/2011 1:50:48 AM
Hi , Its very good explanation. Thank you very much. In my website I am trying to book an appointment booking with date and time .For date selection I would like to use calendar option . Can you please give some expample for appointment booking.
 
Posted by rajesh on 5/26/2011 12:39:33 AM
In mask value 9 means numeric required value.but i want to display 9 as it is in textbox.how to do ? pls help me . thanks in advanced.
 
Posted by mudassir on 8/9/2011 12:09:09 AM
I need the date format as DD-MM-YYYY (i.e separator should be "-" ,instead of "/"). with date should me display when user entered a invalid date. i have changed the Mask="99/99/9999" as Mask="99-99-9999", but it is not working. if anyone have solution, then please send it to me. Thanks in advance
 
Posted by Alok on 11/8/2011 1:02:24 AM
I want that calender extender should not be display after a specific date after click on associated control.
 
Posted by Gaurav Kumar on 12/31/2011 2:39:59 AM
Very informative post. Its really helpful for me and beginner too. Check out this link too its also having a nice post with wonderful explanation on ajax toolkit maskededitextendar control in asp.net... http://mindstick.com/Articles/a2a577a9-a754-41bf-a925-cad87f530165/?Ajax%20Toolkit%20MaskedEditExtender%20Control%20in%20ASP.Net Thanks
 
Posted by Chandan on 2/10/2012 11:24:22 PM
How Can I Set a date Format ('dd/mmm/yyyy' or dd/mm/yyyy') in mask edit extender of ajax in asp.net
 
Posted by WJ Choong on 3/12/2012 4:03:14 AM
good tips...easy to learn up..thanks!
 
Posted by sadma on 6/25/2012 11:32:51 PM
Thanks,it was so useful
 
Posted by Netaji Chavan on 10/8/2014 8:01:45 AM
Very nice example. I have one problem. when i entered value in textbox the i can't change/remove this value. Means when i enter wrong value then i can't change. It is possible only page refreshing. I am waiting your answer
 
Posted by Netaji Chavan on 10/8/2014 8:01:47 AM
Very nice example. I have one problem. when i entered value in textbox the i can't change/remove this value. Means when i enter wrong value then i can't change. It is possible only page refreshing. I am waiting your answer
 
Posted by nmg on 1/1/2015 2:30:24 AM
Not able to modify the date once entered. Not able to delete the date. Correct these flaws kindly.
 
Posted by Raju on 6/16/2016 7:23:41 AM
Unable to modify the date once entered. I want to Edit the text box can u help me in that
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Twenty-One plus Six Equals To
 
Sponsored by
FierceDeveloper
Washington Technology
Simply SQL - Free 111 Page Preview!