UXDateTimeEditor provides text input control with full support for standard and custom format DateTime entry. UXDateTimeEditor also provides MaxValue and MinValue properties to control the minimum and maximum date time entry. It also includes an innovative feature such as caret advancing. When enabled, the caret is moved automatically to the next editable section when the input for the current section succeeded.

TextBox Control

UXDateTimeEditor derives from UXTextBox, which means all the UXTextBox feature is available in the UXMaskedInput such as Command, WatermarkText, etc. For more info about UXTextBox, see UXTextBox Overview.

Using UXDateTimeEditor

UXDateTimeEditor has two date and time format that you can set through the EditMask and DisplayMask property. The format specified in EditMask is used during editing mode, while the format specified in DisplayMask is used to display the formatted date time value.

<Intersoft:UXDateTimeEditor Width="200" Height="24" EditMask="dd/MM/yyyy" DisplayMask="yyyy MMMM dd"/>

If you want to use the EditMask as DisplayMask you can set the UseEditMaskAsDisplayMask to True. By enabling this property, UXDateTimeEditor will ignore the DisplayMask value if it is filled.

Edit mode is triggered if the UXDateTimeEditor has focus and is not read only. By default the caret is positioned at the first editable position. Display mode is triggered if the UXDateTimeEditor does not has focus.

The accepted date time format in Display and Edit mode could be read on Accepted DateTime Format section. By default the EditMask is set to standard format g.

Allow Null Value

UXDateTimeEditor also has AllowNull property which is set to False by default. When enabled, the Value of the UXDateTimeEditor can be set to null. In most cases, there are two ways to set the control's value to null such as described in the following:

• The Value is set to null through XAML declaration, binding or programmatically via code.
• Users select all text in the control at runtime, by pressing Ctrl+A then followed with Backspace or Delete key.

The Text property should not be set by the user. The setter is public for compliance with UXTextBox in designer mode.

Accepted DateTime Format

The UXDateTimeEditor accept standard and custom .NET DateTime format in the EditMask and DisplayMask. Some of the format is not parsed in EditMask because it is only used as a DisplayMask.

Standard Format

Custom Format

Using MaxValue and MinValue

MaxValue and MinValue property is available if you wish to limit the accepted date time value, by default this value is null so any valid date time value is accepted. Inputting date time value outside the accepted range cause the UXDateTimeEditor to throw an error.

By setting the IsValidating property to True, user could manually trigger the UXDateTimeEditor validation process. If the value is invalid an error will be raised and IsValueError property is automatically set to True.

<Intersoft:UXDateTimeEditor Width="200" Height="24" EditMask="g" UseEditMaskAsDisplayMask="True" MaxValue="12/31/2010" MinValue="12/1/2010"/>

Enabling Automatic Advancing Caret

UXDateTimeEditor has IsAdvancingCaret property to automatically move to the next editable section after the highlighted section does not have any other input possibilities.

For example inputting 9 in the date section automatically move the caret to the next editable section if the IsAdvancingCaret is enabled. Using the snippet below and United States culture the next editable section after date is year section.

<Intersoft:UXDateTimeEditor Width="200" Height="24" EditMask="g" UseEditMaskAsDisplayMask="True" IsAdvancingCaret="True"/>

Culture Support

The UXDateTimeEditor supports localization by setting the Culture property to a CultureInfo object. Culture has affects on certain date time pattern, for instances, the Days in Week pattern and Long Month Name.

For example, the 22 December 2010 with F format in different culture shows the results as follows:

• en-US: Wednesday, December 22, 2010 8:09:50 PM
• id-ID: 22 Desember 2010 20:09:50

Customizing Spinning Behavior

You can spin the value of UXDateTimeEditor by using Arrow Up and Arrow Down key. This will change the value locally or globally depending on value of SpinMode property.

The following list describes different behavior of SpinMode available in UXDateTimeEditor.

• LocalValue.
  Only modify the value on the highlighted section group.
  

  XAML	Copy Code
  <Intersoft:UXDateTimeEditor Width="200" Height="24" EditMask="g" UseEditMaskAsDisplayMask="True" SpinMode="LocalValue"/>

  
• GlobalValue.
  Modify the whole DateTime value.
  

  XAML	Copy Code
  <Intersoft:UXDateTimeEditor Width="200" Height="24" EditMask="g" UseEditMaskAsDisplayMask="True" SpinMode="GlobalValue"/>

  
• Disabled.
  Spinning behavior is disabled.

Understanding UXDateTimeEditor Command

UXDateTimeEditor is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

UXDateTimeEditor already includes several predefined commands to change the selected value that you can use in your application.

• SpinUp
  Increment the date time value based on the highlighted section and SpinMode property.
• SpinDown
  Decrement the date time  value based on the highlighted section and SpinMode property.

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="MaskedInputTestSilverlightApp.UXPageDateTimeSample" 
        Title="UXPageDateTimeSample Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
        <StackPanel>
            <Intersoft:UXDateTimeEditor x:Name="dateTime1" Width="150" Height="24" UseEditMaskAsDisplayMask="True" EditMask="dd MMM yyyy" IsAdvancingCaret="true"/>
            <Intersoft:UXButton Name="btn1" Content="Spin Up" Command="Intersoft:DateTimeEditorCommands.SpinUp" CommandTarget="{Binding ElementName=dateTime1}"/>
            <Intersoft:UXButton Name="btn2" Content="Spin Down" Command="Intersoft:DateTimeEditorCommands.SpinDown" CommandTarget="{Binding ElementName=dateTime1}"/>
        </StackPanel>
        </Grid>
</Intersoft:UXPage>

Keyboard Support

Base on the currently highlighted selection, certain input is blocked. For example, when editing day, month, year, hour, minute, second only numeric key is allowed. On the other hand while editing a long month both numeric and letters is accepted.

Most of special key combination is implemented except Ctrl + Z. However due to the nature of the control some of the text operation will be different. The following are list of different behavior of text operation in UXDateTimeEditor.

• Delete.
  Editable pattern revert back to its original value instead of deleted. For example numeric month, day, year, hour, minute, second is set to 0; while long month name is set to the first month of the year. AllowNull property affect the select all deletion, by setting the property to True the UXDateTimeEditor value is set to Null; while setting the property to False will set the value to todays date.
• Ctrl + V (paste)
  Paste is only allowed when you highlight specific date part or the entire value. If the value is incorrect no action will be applied.
  When pasting the entire text, the value need to be in the exact format as determined in EditMask or valid invariant culture date time string.