RadControls for WPF
Contents

The purpose of this tutorial is to show you how to use DateTime mask with RadMaskedTextBox. DateTime mask is used to display formatted DateTime values. There is a variety of options available to format and display a part or the full DateTime value, and all of them will be demonstrated in this article.

Setting DateTime Mask

In order to use datetime mask in RadMaskedTextBox, you need to set the RadMaskedTextBox's MaskType property to DateTime.

CopyXAML
<telerik:RadMaskedTextBox MaskType="DateTime" />

Masking Elements

This subsection describes the mask characters that can be used when the MaskType property is set to DateTime.

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.
CopyXAML
<StackPanel>
    <TextBlock Text="Mask: d" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="d"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: D" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="D"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: f" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="f"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: F" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="F"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: g" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="g"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: G" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="G"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: m" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="m"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: M" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="M"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: r" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="r"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: R" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="R"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: s" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="s"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: t" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="t"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: T" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="T"
                              MaskType="DateTime" />
</StackPanel>

If the Value property of each RadMaskedTextBox is set to DateTime.Now, then the result will be similar to this:

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:

  • 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 - the hour in a 12-hour clock.
  • hh - the hour in a 12-hour clock.
  • H - the hour in a 24-hour clock.
  • HH - the hour in a 24-hour clock.
  • m - the minute.
  • mm - the minute.
  • s - the second.
  • ss - the second.
  • t - the first character in the AM/PM designator.
  • tt - the AM/PM designator.
CopyXAML
<StackPanel>
    <TextBlock Text="Mask: dd" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="dd"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: m" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="m"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: mm" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="mm"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: mmm" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="mmm"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: mmmm" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="mmmm"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: y" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="y"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: yy" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="yy"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: yyy" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="yyy"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: h" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="h"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: hh" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="hh"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: H" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="H"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: HH" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="HH"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: m" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="m"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: mm" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="mm"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: s" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="R"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: ss" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="ss"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: t" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="t"
                              MaskType="DateTime" />
    <TextBlock Text="Mask: tt" />
    <telerik:RadMaskedTextBox Margin="0,5,0,10" 
                              Mask="tt"
                              MaskType="DateTime" />
</StackPanel>

If the Value property of each RadMaskedTextBox is set to DateTime.Now, then the result will be similar to this:

See Also