Edit this page

Mask Tokens

The RadMaskedInput controls expose a Mask property to allow you to further restrict the user's input accordingly to the MaskedInput control definition. Bellow you can find a list with some of the most commonly used Mask tokens.

Alphanumeric tokens

1. Standard format codes:

  • A - Alphanumeric or a special character, required.

  • a - Alphanumeric or a special character, not required

  • L - Letter, required. Restrict input to the ASCII letters a-z and A-Z. This mask element is equivalent to [a-zA-Z] in regular expressions.

  • l - Letter, not required

  • \ - Escapes a mask character, turning it into a literal. "\" is the escape sequence for a backslash.

  • Any other characters - literals. All non-mask elements will appear as themselves within RadMaskedTextInput. Literals always occupy a static position in the mask at run time, and cannot be moved or deleted by the user.

Example 1: Setting standard format codes

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Mask: A" />
    <telerik:RadMaskedTextInput Margin="0,5,0,10" Mask="AAAAAA" />
    <TextBlock Text="Mask: a" />
    <telerik:RadMaskedTextInput Margin="0,5,0,10" Mask="aaaaaa" />
    <TextBlock Text="Mask: L" />
    <telerik:RadMaskedTextInput Margin="0,5,0,10" Mask="LLLL" />
    <TextBlock Text="Mask: l" />
    <telerik:RadMaskedTextInput Margin="0,5,0,10" Mask="llll" />
    <TextBlock Text="Mask: \" />
    <telerik:RadMaskedTextInput Mask="#\###" />
    <TextBlock Text="Mask: Any other characters" />
    <telerik:RadMaskedTextInput Mask="N\ame: llll" />
</StackPanel>

2. Numeric format codes:

  • c - Currency pattern, not required

  • n - Decimal pattern, required

  • p - Percentage, not required

  • d - Digit pattern, required

  • # - Digit pattern, not required. If this position is blank in the mask, it will be rendered as the character in the Placeholder property. Plus (+) and minus (-) signs are allowed.

Example 2: Setting numeric format codes

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Currency Pattern" />
    <telerik:RadMaskedCurrencyInput Margin="0,5,0,10" 
                                    Mask="c3.3"
                                    Value="111.234" />
    <TextBlock Text="Decimal Pattern" />
    <telerik:RadMaskedNumericInput Margin="0,5,0,10" 
                                    Mask="n3.3"
                                    Value="111.234" />
    <TextBlock Text="Percent Pattern" />
    <telerik:RadMaskedNumericInput Margin="0,5,0,10" 
                                    Mask="p3.2"
                                    Value="111.234" />
    <TextBlock Text="Digit Pattern - d" />
    <telerik:RadMaskedNumericInput Margin="0,5,0,10" 
                                    Mask="d3"
                                    Value="111.234" />
    <TextBlock Text="Digit Pattern - #" />
    <telerik:RadMaskedNumericInput Margin="0,5,0,10" 
                                    Mask="#3.1"
                                    Value="111.234" />
</StackPanel>

DateTime Tokens

1. Standard DateTime Format Codes

  • d - Short date pattern.

  • D - Long date pattern.

  • f - Full date and time (long date and short time).

  • F - Full date time pattern (long date and long time).

  • g - General (short date and short time).

  • G - General (short date and long time).

  • m, M - Month day pattern.

  • r, R - RFC1123 pattern.

  • s - Sortable DateTime pattern (based on ISO 8601) using local time.

  • t - Short time pattern.

  • T - Long time pattern.

Example 3: Using defined tokens

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Mask: d" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="d" />
    <TextBlock Text="Mask: D" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="D" />
    <TextBlock Text="Mask: f" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="f" />
    <TextBlock Text="Mask: F" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="F" />
    <TextBlock Text="Mask: g" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="g" />
    <TextBlock Text="Mask: G" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="G" />
    <TextBlock Text="Mask: m" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="m" />
    <TextBlock Text="Mask: M" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="M" />
    <TextBlock Text="Mask: r" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="r" />
    <TextBlock Text="Mask: R" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="R" />
    <TextBlock Text="Mask: s" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="s" />
    <TextBlock Text="Mask: t" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="t" />
    <TextBlock Text="Mask: T" />
    <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="T" />
</StackPanel>

2. Custom DateTime Format Codes

When standard date codes are too restrictive, you can create your own custom formats using the format patterns listed below:

  • d - Day token

  • dd- The numeric day of the month.

  • ddd- The abbreviated name of the day of the week.

  • M - The month name followed by the numeric day.

  • MM - The numeric month.

  • MMM - The abbreviated name of the month.

  • MMMM - The full name of the month.

  • y - The full month name and year numeric.

  • yy- The year without the century.

  • yyyy- The year in four digits, including the century.

  • h, hh - The hour in a 12-hour clock.

  • H, HH - the hour in a 24-hour clock.

  • m, mm - Minute token

  • s ,ss - Second token

  • t - The first character in the AM/PM designator.

  • tt- The AM/PM designator.

  • f - Millisecond token

Example 4: Setting custom DateTime format codes

<StackPanel Background="White"
            Orientation="Horizontal"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
    <StackPanel >
        <TextBlock Text="Mask: dd" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="dd" />
        <TextBlock Text="Mask: M" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="M" />
        <TextBlock Text="Mask: MM" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="MM" />
        <TextBlock Text="Mask: ddd.MMM.yyy" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="ddd.MMM.yyy" />
        <TextBlock Text="Mask: y" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="y" />
        <TextBlock Text="Mask: yy" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="yy" />
        <TextBlock Text="Mask: yyy" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="yyy" />
        <TextBlock Text="Mask: hh" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="hh" />
    </StackPanel>
    <StackPanel >
        <TextBlock Text="Mask: HH" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="HH" />
        <TextBlock Text="Mask: m" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="m" />
        <TextBlock Text="Mask: mm" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="mm" />
        <TextBlock Text="Mask: ss" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="ss" />
        <TextBlock Text="Mask: t" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="t" />
        <TextBlock Text="Mask: tt" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="tt" />
        <TextBlock Text="Mask: hh:mm:ss:ff" />
        <telerik:RadMaskedDateTimeInput Margin="0,5,0,10" Mask="hh:mm:ss:ff" />
    </StackPanel>
</StackPanel>

If you use the yy mask token, you need to keep in mind that the two letter year section will represent date time objects between the years of 1929 and 2029. Basically the RadMaskedDateTimeInput control uses the Culture settings and specifically the Calendar.TwoDigitYearMax property to distinguish the year that is entered in the control based on its last two digits. You can find more information here.

Modifier Tokens

  • > - To Upper token

  • < - To Lower token

Example 5: Setting modifier tokens

<telerik:RadMaskedTextInput Margin="0,5,0,10" Mask="&gt;a5&lt;a5" />

Please note that the "<" and ">" must be escaped in XAML, otherwise the Visual Studio might throw an error.

When you customize a mask you should keep in mind that the Mask is basically structured like so:
MaskTokenN.F

  • MaskToken - MaskToken restricting the input characters
  • N - Number of input characters, not required
  • F - Number of input digits after the decimal point, not required

For instance:

Example 6: Customize mask property

<telerik:RadMaskedNumericInput Mask="#3.2" />

See Also