MaskedDateTimeInput

The RadMaskedDateTimeInput` represents the basic control that can be used to restrict the input of DateTime values.

In order to use the RadMaskedDateTimeInput control in your projects you have to add references to the following assemblies:

• Telerik.Windows.Controls
• Telerik.Windows.Controls.Input
  

You can find more info here.

Declaratively defined MaskedDateTimeInput

Here is a simple definition of a RadMaskedDateTimeInput control:

Define RadMaskedDateTimeInput in XAML

<telerik:RadMaskedDateTimeInput Width="200" 
                                Margin="20 20 20 10" 
                                Culture="en-US" 
                                EmptyContent="Enter digits" 
                                InputBehavior="Replace" 
                                Mask="dd-MM-yyyy" 
                                SelectionOnFocus="SelectAll" 
                                TextMode="PlainText" 
                                UpdateValueEvent="LostFocus" /> 

Data Binding

RadMaskedDateTimeInput's Value property is of type DateTime and you can bind it to view model's property of type DateTime.

Binding to the object type is not supported and may result in unpredictable behavior.

Define the view model

public class ViewModel : ViewModelBase 
{ 
    private DateTime startDate; 
 
    public ViewModel() 
    { 
        this.StartDate = DateTime.Now; 
    } 
 
    public DateTime StartDate 
    { 
        get { return this.startDate; } 
        set 
        { 
            if (this.startDate != value) 
            { 
                this.startDate = value; 
                this.OnPropertyChanged("StartDate"); 
            } 
        } 
    } 
} 

Binding the Value property

<telerik:RadMaskedDateTimeInput Width="200" x:Name="dateTime" 
                            Margin="20 20 20 10" 
                            Culture="en-US" 
                            EmptyContent="Enter digits" 
                            InputBehavior="Replace" 
                            Mask="dd-MM-yyyy" 
                            SelectionOnFocus="SelectAll" 
                            TextMode="PlainText"                                     
                            UpdateValueEvent="LostFocus" 
                                Value="{Binding StartDate}"/> 

Change AM/PM

With the built-in functionality of the control it is not necessary to type AM or PM in order to change the time period. When the caret is on the time period you can simply press UP or DOWN arrow keys from AM to PM and vice verse. In order to display the time period simply add "t" or "tt" in the Mask property.

Binding the Value property

<telerik:RadMaskedDateTimeInput HorizontalAlignment="Center"  
                                Culture="en-US" 
                                FormatString="{}Day: {0:dd}, Month: {0:MM}, Year: {0:yyyy}, {0:tt}" 
                                InputBehavior="Replace" 
                                Mask="dd-MM-yyyy tt" 
                                SelectionOnFocus="SelectAll" 
                                TextMode="PlainText" 
                                UpdateValueEvent="LostFocus" /> 

Showing the time period

FormatString

You can further format the entered value by setting the FormatString property.

Setting the FormatString property

<telerik:RadMaskedDateTimeInput HorizontalAlignment="Center" 
                                VerticalAlignment="Center" 
                                Culture="en-US" 
                                FormatString="{}Day: {0:dd}, Month: {0:MM}, Year: {0:yyyy}" 
                                InputBehavior="Replace" 
                                Mask="dd-MM-yyyy" 
                                SelectionOnFocus="SelectAll" 
                                TextMode="PlainText" 
                                UpdateValueEvent="LostFocus" /> 

Showing the text value when the control is focused

Showing the text value when the control is unfocused

See Also

• Getting Started
• MaskedNumericInput
• MaskedCurrencyInput
• MaskedTextInput
• Common Features