# Mask Type: Date-Time Offset | WPF Controls | DevExpress Documentation

The **DateTimeOffset** masks work similar to [Date-Time masks](/WPF/6947/controls-and-libraries/data-editors/common-features/masked-input/mask-type-date-time) and allow you to display and edit values of the [DateTimeOffset](https://learn.microsoft.com/dotnet/api/system.datetimeoffset) type. In these modes, the editor displays date/time values with the offset between the system’s time zone and UTC.

![DateTimeOffset Mask Example](/WPF/images/DateTimeOffset_Mask_Example.png)

Note

The [DateEdit](/WPF/DevExpress.Xpf.Editors.DateEdit) editor does not support the **DateTimeOffset** masks. This editor works with the [DateTime](https://learn.microsoft.com/dotnet/api/system.datetime) values only.

## Date-Time Offset Mask Modes

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

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

### Enable Date-Time Offset Masks

To enable a particular **DateTimeOffset** mask mode, set the [TextEdit.MaskType](/WPF/DevExpress.Xpf.Editors.TextEdit.MaskType) property (or the [TextEditSettings.MaskType](/WPF/DevExpress.Xpf.Editors.Settings.TextEditSettings.MaskType) for in-place editors) to [DateTimeOffset](/WPF/DevExpress.Xpf.Editors.MaskType) or [DateTimeOffsetAdvancingCaret](/WPF/DevExpress.Xpf.Editors.MaskType). Use the [TextEdit.Mask](/WPF/DevExpress.Xpf.Editors.TextEdit.Mask) property (or [TextEditSettings.Mask](/WPF/DevExpress.Xpf.Editors.Settings.TextEditSettings.Mask) for in-place editors) to specify the mask itself.

### Mask as a Display Format

**DateTimeOffset** masks are similar to the display formats described in the [Date and Time Format Strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-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](/WPF/DevExpress.Xpf.Editors.TextEdit.MaskUseAsDisplayFormat) property ([TextEditSettings.MaskUseAsDisplayFormat](/WPF/DevExpress.Xpf.Editors.Settings.TextEditSettings.MaskUseAsDisplayFormat) for in-place editors).

## Predefined Masks

Predefined masks allow users to edit [DateTimeOffset](https://learn.microsoft.com/dotnet/api/system.datetimeoffset) values according to common patterns. The table below lists the available masks.

| Standard Mask | Name | Description | Samples Culture: English (U.S.) |
| --- | --- | --- | --- |
| `MM/dd/yyyy HH:mm:ss zzz` | Date/Time with timezone | The mask matches the 24-hour Date/Time with the timezone offset pattern. | ![CD_Mask_DateTimeOffset_DT-Timezone](/WPF/images/cd_mask_datetimeoffset_dt-timezone.png) |
| `O` and `o` | Round-trip date/time | The mask matches the [round-trip date/time](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings#Roundtrip) pattern. | ![CD_Mask_DateTimeOffset_DT-RoundTrip](/WPF/images/cd_mask_datetimeoffset_dt-roundtrip.png) |

## Custom Masks

Use the following mask specifiers to create custom **DateTimeOffset** masks:

| Mask Specifier | Description | Sample |
| --- | --- | --- |
| `d` | A day of a month. | 1 - 31 |
| `dd` | A day of a month, starts with zero for single-digit values. | 01 - 31 |
| `ddd` | A read-only abbreviated name of the day of the week.<br><br><br>The [AbbreviatedDayNames](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.abbreviateddaynames#system-globalization-datetimeformatinfo-abbreviateddaynames) property returns abbreviated day names for the current culture. | Sun - Sat |
| `dddd` | A read-only name of the day of the week.<br><br><br>The [DayNames](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.daynames#system-globalization-datetimeformatinfo-daynames) property returns day names for the current culture. | Sunday - Saturday |
| `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 |
| `g` | A read-only era.<br><br><br>The [Eras](https://learn.microsoft.com/dotnet/api/system.globalization.calendar.eras#system-globalization-calendar-eras) property returns era names for the current calendar. | AD, CE |
| `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 |
| `M` | A month number. | 1 - 12 |
| `MM` | A month number, starts with zero for single-digit values. | 01-12 |
| `MMM` | An abbreviated name of the month.<br><br><br>The [AbbreviatedMonthNames](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.abbreviatedmonthnames#system-globalization-datetimeformatinfo-abbreviatedmonthnames) property returns abbreviated month names for the current culture. | Jan - Dec |
| `MMMM` | A name of the month.<br><br><br>The [MonthNames](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.monthnames#system-globalization-datetimeformatinfo-monthnames) property returns month names for the current culture. | January - December |
| `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 |
| `y` | Last two digits of the year. | 1 for 2001, 30 for 1930 |
| `yy` | Last two digits of the year, starts with zero for single-digit values. | 01 for 2001, 30 for 1930 |
| `yyyy` | A four-digit year. | 0001-9999 |
| `z` | The offset between the system’s time zone and UTC in hours. | +11, -5 |
| `zz` | The offset between the system’s time zone and UTC in hours, starts with zero for single-digit values. | +11, -05 |
| `zzz` | The offset between the system’s time zone and UTC in hours and minutes. | -12:00 to +13:00 |
| `:` | A time separator.<br><br><br>The [TimeSeparator](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.timeseparator#system-globalization-datetimeformatinfo-timeseparator) property returns the time separator for the current culture. | `:` in the en-US culture |
| `/` | A date separator.<br><br><br>The [DateSeparator](https://learn.microsoft.com/dotnet/api/system.globalization.datetimeformatinfo.dateseparator#system-globalization-datetimeformatinfo-dateseparator) property returns the date 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 date:’ |

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 (`%d`).

## User Capabilities

- The `Up Arrow` and `Down Arrow` keys increase and decrease the focused part of the date value.
- The mouse wheel increases and decreases the focused part of the date value.
- Users can enter the initial letter of the month or the month’s order number (1-12) to edit the full or abbreviated month name.
- The `Space` key moves the caret to the next part of the date value.
- The date separator character moves the caret to the next part of the date value.
- The `Left Arrow` and `Right Arrow` keys move the caret to the previous or next part of the date value.
- If a mask requires users to enter a four digit year (the `yyyy` mask), a user can enter the last two (or one) digits of this year. The first two digits are determined based on the current culture.

    Refer to the following help topic for more information: [TwoDigitYearMax](https://learn.microsoft.com/dotnet/api/system.globalization.calendar.twodigityearmax#system-globalization-calendar-twodigityearmax).

## Example

The following code sample binds the [TextEdit](/WPF/DevExpress.Xpf.Editors.TextEdit) to a [DateTimeOffset](https://learn.microsoft.com/dotnet/api/system.datetimeoffset) field and specifies an input mask:

![DateTimeOffset Mask Example](/WPF/images/DateTimeOffset_Mask_Example.png)

- XAML

<section id="tabpanel_wdHVleEIpT_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxe:TextEdit EditValue=&quot;{Binding DateTimeOffsetValue}&quot; 
              MaskType=&quot;DateTimeOffset&quot; Mask=&quot;dd MMMM, hh:mm tt zzz&quot; 
              MaskUseAsDisplayFormat=&quot;True&quot;/&gt;
</code></pre></section>

- C#
- VB.NET

<section id="tabpanel_wdHVleEIpT-1_tabid-csharp" role="tabpanel" data-tab="tabid-csharp">
<pre><code class="lang-csharp">public class ViewModel : ViewModelBase {
    public DateTimeOffset DateTimeOffsetValue { get; set; } = DateTimeOffset.Now;
}
</code></pre></section>
<section id="tabpanel_wdHVleEIpT-1_tabid-vb" role="tabpanel" data-tab="tabid-vb" aria-hidden="true" hidden="hidden">
<pre><code class="lang-vb">Public Class ViewModel
    Inherits ViewModelBase

    Public Property DateTimeOffsetValue As DateTimeOffset = DateTimeOffset.Now
End Class
</code></pre></section>