Based on the flexible UXSpinner control, UXDateTimeUpDown provides an easy datetime input with up down spin buttons. It accepts datetime value and format input based on the provided datetime format.

Using UXDateTimeUpDown

UXDateTimeUpDown is a control that combines the UXDateTimeEditor control with UXButtonSpinner control to display date and time values. Since this control is a combination of several controls, it has similar characteristics with the used controls. This control accepts standard and custom .NET DateTime format in the EditMask and DisplayMask. Some of the format is not supported in EditMask because it is only used as a display format.

<Grid>
    <Intersoft:UXDateTimeUpDown Width="100" />
</Grid>

Understanding Spinner Behavior

This control has two behaviors for the increment and decrement. By default, the IsEditable property for this control is set to true, which will activate the spin behavior from UXDateTimeEditor. If you want to set the minimum, maximum and increment features, you need to set the IsEditable to false, which will use the increment and decrement behavior from this control.

Understanding UXDateTimeUpDown Commands

UXDateTimeUpDown 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.

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

• Increase

  Gets a command that increases the value of the UXDateTimeUpDown by the same amount as the Increment property.

  Increase command will be invoked when you perform the following action:

  • Press the spin up button.
  • Press the up keyboard key.
• Decrease

  Gets a command that decreases the value of the UXDateTimeUpDown by the same amount as the Increment property.

  Decrease command will be invoked when you perform the following action:

  • Press the spin down button.
  • Press the down keyboard key.

Although these commands are already registered in the elements of UXDateTimeUpDown, you can still register these commands to other UIElement outside UXDateTimeUpDown scope. For example, you can have a UXButton to perform Decrease command. For more information on how to register UXDateTimeUpDown commands to other type of UIElement, see How-to: Register UXDateTimeUpDown Command to UXButton.

Customizing UXDateTimeUpDown Appearance

The default spin button is always set to the right for the control. To change the alignment for the spinner button, you set the SpinnerAlignment property to the Left. In case the spinner button is not desired, you can set the SpinnerVisibility property to Collapsed. Although the spin buttons are not shown, you can still perform the increment and decrement by pressing Up or Down arrow key.

The following code shows how to change the spinner alignment in UXDateTimeUpDown.

<Grid>
    <Intersoft:UXDateTimeUpDown Width="100" SpinnerAlignment="Left" />
</Grid>

The following code shows how to change the spinner visibility in UXDateTimeUpDown.

<Grid>
    <Intersoft:UXDateTimeUpDown Width="100" SpinnerVisibility="Collapsed" />
</Grid>

If you would like to completely customize the control appearance or if you want to change the styles of each visual state, you can edit the template of the control and do the modification accordingly. To learn how to customize the template and visual states, see Styles and Template Overview.