Back to Devexpress

Mask Type: Time Only

wpf-404172-controls-and-libraries-data-editors-common-features-masked-input-mask-type-time-only.md

latest6.5 KB
Original Source

Mask Type: Time Only

  • Dec 02, 2024
  • 4 minutes to read

The TimeOnly masks work similar to Date-Time masks and change the editor’s EditValue property type to TimeOnly.

TimeOnly Mask Modes

The DevExpress WPF Data Editors support the following input modes for TimeOnly masks:

  • TimeOnly - supports only manual navigation between editable mask parts.
  • TimeOnlyAdvancingCaret - enables automatic navigation between mask parts. If a user completes a part of the value, the caret moves to the next editable part.

Enable TimeOnly Masks

To enable a particular TimeOnly mask mode, set the TextEdit.MaskType property (or the TextEditSettings.MaskType for in-place editors) to TimeOnly or TimeOnlyAdvancingCaret. Use the TextEdit.Mask property (or TextEditSettings.Mask for in-place editors) to specify the mask itself.

Mask as a Display Format

TimeOnly masks are similar to the display formats described in the Date and Time Format Strings document. You can use the editor’s mask as a display format specifier. If an editor loses input focus, the display text still uses the specified custom format. To enable this functionality, use the TextEdit.MaskUseAsDisplayFormat property (TextEditSettings.MaskUseAsDisplayFormat for in-place editors).

Predefined Masks

Predefined masks allow users to edit TimeOnly values according to common patterns. The table below lists the available masks.

Standard MaskNameDescriptionSamples Culture: English (U.S.)
tShort timeThe mask matches the pattern specified by the ShortTimePattern property.
TLong timeThe mask matches the pattern specified by the LongTimePattern property.

Custom Masks

Use the following mask specifiers to create custom TimeOnly masks:

|

Mask Specifier

|

Description

|

Sample

| | --- | --- | --- | |

f or F

|

Fractions of a second displayed as one digit.

|

1 - 9

| |

ff or FF

|

Fractions of a second displayed as two digits.

|

01 - 99

| |

fff or FFF

|

Fractions of a second displayed as three digits.

|

001 - 999

| |

ffff or FFFF

|

Fractions of a second displayed as four read-only digits.

|

0001 - 9999

| |

fffff or FFFFF

|

Fractions of a second displayed as five read-only digits.

|

00001 - 99999

| |

ffffff or FFFFFF

|

Fractions of a second displayed as six read-only digits.

|

000001 - 999999

| |

fffffff or FFFFFFF

|

Fractions of a second displayed as seven read-only digits.

|

0000001 - 9999999

| |

h

|

Hours in the 12-hours format.

|

1 - 12

| |

hh

|

Hours in the 12-hours format, starts with zero for single-digit values.

|

01 - 12

| |

H

|

Hours in the 24-hours format.

|

0 - 23

| |

HH

|

Hours in the 24-hours format, starts with zero for single-digit values.

|

00 - 23

| |

m

|

Minutes.

|

0 - 59

| |

mm

|

Minutes, starts with zero for single-digit values.

|

00 - 59

| |

s

|

Seconds.

|

0 - 59

| |

ss

|

Seconds, starts with zero for single-digit values.

|

00 - 59

| |

t

|

The first character of a time designator.

|

A, P

| |

tt

|

A time designator.

|

AM, PM

| |

:

|

A time separator.

The TimeSeparator property returns the time separator for the current culture.

|

: in the en-US culture

| |

\

|

The escape character that allows you to insert a following character as a text.

|

\H\H is interpreted as a HH text

| |

' or "

|

A read-only custom string.

|

‘Current time:’

|

If you use a mask specifier as a single character, it is interpreted as a predefined mask. To use a custom specifier which matches one of the standard specifiers, precede this specifier with the % character (%t).

User Capabilities

  • The Up Arrow and Down Arrow keys increase and decrease the focused part of the time value.
  • The mouse wheel increases and decreases the focused part of the time value.
  • The Space key moves the caret to the next part of the time value.
  • The time separator character moves the caret to the next part of the time value.
  • The Left Arrow and Right Arrow keys move the caret to the previous or next part of the time value.

Example

The following code sample binds the TextEdit to a TimeOnly field and specifies an input mask:

xaml
<dxe:TextEdit EditValue="{Binding TimeOnlyValue}" 
              MaskType="TimeOnly" Mask="HH:mm:ss:fff" 
              MaskUseAsDisplayFormat="True"/>
csharp
public class ViewModel : ViewModelBase {
    public TimeOnly TimeOnlyValue { get; set; } = new TimeOnly(22, 45, 13, 185);
}
vb
Public Class ViewModel
    Inherits ViewModelBase

    Public Property TimeOnlyValue As TimeOnly = New TimeOnly(22, 45, 13, 185)
End Class