Masked Edit Extender,MaskedEditValidator with Ajax Calender Control

The MaskedEdit control is an ASP.NET AJAX control that can be attached to a TextBox control. The supported data formats are: Number, Date, Time, and DateTime. MaskedEdit uses the culture settings specified in the CultureName property. If none is specified the culture setting will be the same as the page: English (United States).

The MaskedEdit control has to be integrated with the MaskedEditValidator to verify the input.

It validates date formats entering. It is also used for time and number formats also.

Original Article from

www.codeforasp.net

Using Masked Edit Extender with calendar control

Step1: Open Visual Studio ,Create a new web Application (Ajax Enabled Application)

Step2: Check Script Manager is added or not in Default.aspx page. If it is not added

Drag script manager control from Ajax toolkit in Toolbox.

Step3: Add Textbox control , Ajax Calender Control, Ajax Maked Edit Extender control

step4: Set the Mask property to of the extender to  ”99/99/9999″, MaskType property “Date”, TargetControlID to “TextBox1″

step5:  MaskType property plays major role for Masked Edit Extender . It describes

Mask type date, number, time and Datetime

Mask=”99/99/9999″

MaskType=”Date”

TargetControlID=”TextBox1″

Step6: Then drag and drop MaskedEditValidator into the page. Set the properties of

the MaskedEditValidator as follows:

set properties

ControlExtender=”TextBox1_MaskedEditExtender”

ControlToValidate=”TextBox1″

Display=”Dynamic”

EmptyValueMessage=”A Date is Required”

Sample Code look like this:

<asp:TextBox ID=”TextBox1″ runat=”server” ></asp:TextBox>

<cc1:MaskedEditExtender ID=”TextBox1_MaskedEditExtender” runat=”server”

CultureName=”en-AU”   Enabled=”True” Mask=”99/99/9999″ MaskType=”Date” TargetControlID=”TextBox1″/>

<cc1:MaskedEditValidator ID=”mev1″ runat=”server”

ControlExtender=”TextBox1_MaskedEditExtender”    ControlToValidate=”TextBox1″

Display=”Dynamic”

EmptyValueMessage=”A Date is Required”

InvalidValueMessage=”The Date is Invalid”

IsValidEmpty=”False” TooltipMessage=”Please Enter a Date”/>

<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server” PopupButtonID=”TextBox1″ Format=”dd/MM/yyyy”

TargetControlID=”TextBox1″></cc1:CalendarExtender>

Ajax Calender Control

Ajax Calender control:

Ajax Calender Control is an asp.net control associated with Textbox. When the user clicks on the textbox it pops up. It provides client-side date-picking functionality with customizable date format and UI in a popup control. The user can then set a date by clicking on a day, navigate months by clicking on the left and right arrow and perform other such actions without a postback.

How to use Ajax Calender control in Asp.net

1)     In Aspx Page add one TextBox id is txtDate  and Ajax Calender control.

2)     Sample Code :

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1” %> //add this

<asp:TextBox ID=”txtDate” runat=”server” ></asp:TextBox>

<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server” PopupButtonID=”txtDate” Format=”dd/MM/yyyy”             TargetControlID=”txtDate”> </cc1:CalendarExtender>

1)       TargetControlID – The ID of the Textbox to extend with the calendar.

(In Our Example TargetControlID is txtDate)

2)       CssClass – Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.

3)      Format – Format string used to display the selected date.

Formats:       “dd/MM/yyyy”

           “MMMM d, yyyy"

4)     PopupButtonID – The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.

(In Our Example PopupControlID  is txtDate)

5)       PopupPosition – Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.

Explaination: When user clicks in TextBox (txtDate), the ajax calendar control will popup and the selected date will be displayed in TextBox (txtDate)

How to start AjaxControlToolkit using asp.net 3.5

1) Download AjaxControlToolkit-Framework3.5SP1-DllOnly.zip from codeplex.com

http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121(Click in AjaxControlToolkit-Framework3.5.zip) save file in D:\Ajax

2) UnZip AjaxControlToolkit-Framework3.5-Zip, it contain Bin folder

in Bin Folder ,AjaxControlToolkit.dll is main dll to add ajax toolkit into asp.net project.

3)Open Project –>Goto Toolbox –>Rt click on Toolbox General –> add tab (give name Ajax Toolkit) –> then goto AjaxToolkit tab Rt Click –>Choose Items –>Browse  choose AjaxControlToolkit.dll (Ex: D:\ajax\AjaxControlToolkit-Framework3.5SP1-DllOnly\Bin\AjaxControlToolkit.dll –>open–>ok

4) Then all the  AjaxControls will be added in the Toolbox