AJAX Control MaskedEditExtender

AJAX's MaskedEditExtender

Examples of basic properties which we can be used frequently

Enter a Number (format: 9,999,999.99): 



Tip: Type '.' to switch 
 <ajax:MaskedEditExtender runat="server" TargetControlID="txtsatoff" ID="MaskedEditExtender1"

  Mask="9,999,999.99" MessageValidatorTip="false" MaskType="Number" InputDirection="RightToLeft" />

Enter Time (format: 99:99:99): 



Tip: Type 'A' or 'P' to switch AM/PM 
 <ajax:MaskedEditExtender runat="server" TargetControlID="txtsatoff" ID="MaskedEditExtender1"

Mask="99:99:99" MessageValidatorTip="false" MaskType="Time" InputDirection="RightToLeft"
 AcceptAMPM="true" />

Enter Date (format: 99/99/9999): 
  
Tip: The date format is mm/dd/yyyy for this example and a Calendar is also available for date selection 
 <ajax:MaskedEditExtender runat="server" TargetControlID="txtsatoff" ID="MaskedEditExtender1"

 Mask="99/99/99" MessageValidatorTip="false" MaskType="Date" InputDirection="RightToLeft" />

Enter Date and Time (format: 99/99/9999 99:99:99) 
  
 <ajax:MaskedEditExtender runat="server" TargetControlID="txtsatoff" ID="MaskedEditExtender1"

Mask="99/99/9999 99:99:99" MessageValidatorTip="false" MaskType="DateTime" InputDirection="RightToLeft" />


=====================================================
Other Properies of MaskedEditExtender :-

1. MaskType
 - Type of validation to perform:
None - No validation
Number - Number validation
Date - Date validation
Time - Time validation
DateTime - Date and time validation
2. Mask Characters and Delimiters
   9 - Only a numeric character
   L - Only a letter
   $ - Only a letter or a space
   C - Only a custom character (case sensitive)
   A - Only a letter or a custom character
   N - Only a numeric or custom character
   ? - Any character
   
   / - Date separator
   : - Time separator
   . - Decimal separator
   , - Thousand separator
   \ - Escape character
   { - Initial delimiter for repetition of masks
   } - Final delimiter for repetition of masks
   
   Examples:
   9999999 - Seven numeric characters
   99\/99 - Four numeric characters separated in the middle by a "/"
4. AcceptAMPM - True to display an AM/PM symbol
5. AcceptNegative - True if the negative sign (-) is allowed
   None - Do not show the negative sign
   Left - Show the negative sign on the left of the mask
   Right - Show the negative sign on the right of the mask
6. AutoComplete - True to automatically fill in empty mask characters not specified by the user
   MaskType=Number - Empty mask characters will be filled with zeros
   MaskType=Time - Empty mask characters will be filled with the current time
   MaskType=Date - Empty mask characters will be filled with the current date
   MaskType=DateTime - Empty mask characters will be filled with the current date/time
7. AutoCompleteValue - Default character to use when AutoComplete is enabled
8. Century - Default century used when a date mask only has two digits for the year
9. ClearMaskOnLostFocus - True to remove the mask when the TextBox loses focus
10. ClearTextOnInvalid - True to clear the TextBox when invalid text is entered
11. ClipboardEnabled- True to allow copy/paste with the clipboard
12. ClipboardText - Prompt text to use when a clipboard paste is performed
13. DisplayMoney - Specifies how the currency symbol is displayed
    None - Do not show the currency symbol
    Left - Show the currency symbol on the left of the mask
    Right - Show the currency symbol on the right of the mask
14. ErrorTooltipCssClass - CSS class for the tooltip message
15. ErrorTooltipEnabled - True to show a tooltip message when the mouse hovers over an invalid TextBox
16. Filtered - Valid characters for mask type "C" (case-sensitive)
17. InputDirection - Text input direction
    LeftToRight - Left to Right
    RightToLeft - Right to left
18. MessageValidatorTip - Message displayed when editing in TextBox
19. PromptChararacter - Prompt character for unspecified mask characters
20. UserDateFormat - Custom date format
21. UserTimeFormat - Custom time format
23. OnFocusCssClass - CSS class used when the TextBox receives focus
24. OnFocusCssNegative - CSS class used when the TextBox gets focus with a negative value
25. OnBlurCssNegative - CSS class used when the TextBox loses focus with a negative value
26. OnInvalidCssClass - CSS class used when the text is not valid.
28. CultureName - Name of culture to use (overrides the default page culture)
29. CultureAMPMPlaceholder - Culture override
30. CultureCurrencySymbolPlaceholder - Culture override
31. CultureDateFormat - Culture override
32. CultureDatePlaceholder - Culture override
33. CultureDecimalPlaceholder - Culture override
34. CultureThousandsPlaceholder - Culture override
35. CultureTimePlaceholder - Culture override

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Now the Main Problem which we usually face with MaskedEditExtender 

If you are using MaskedEditExtender  with MaskType="Time"

now as we have previously seen that with time type 

MaskType=Time   => Empty mask characters will be filled with the current time

but we require zero(0) in Empty mask characters instead of current time. as normal user will not understand that it will be filled with current time if they are using this control first time then.

For that I have solution

you can use AutoComplete and AutoCompleteValue  properties for this purpose.

SET

AutoComplete="true";

AutoCompleteValue  ="00:00";

 <ajax:MaskedEditExtender runat="server" TargetControlID="txtsatoff" ID="MaskedEditExtender1" Mask="99:99:99" MessageValidatorTip="false" MaskType="Time" InputDirection="RightToLeft"
AcceptAMPM="false" AutoComplete="true" AutoCompleteValue="00:00" />

it will fill Empty mask characters will be filled with the 0.

you can use this stretergy with any MaskType.

This will really help you!!!!!! :)