Blazor Data Editors - Date, Time, and Numeric Masked Input (available in v21.1)

A masked input field can help you improve readability and better control data input within a form field. As you may already know, our last release (v21.1) added masked input support to our Blazor Date Edit, Time Edit, and Spin Edit components. This post summarizes the new enhancements made to these three Blazor data editors and examines how their implementation differs from those found in our Masked Input component].

Date Edit and Time Edit

As you may know, the DevExpress Date Edit for Blazor displays a drop-down calendar that allows users to select dates while the DevExpress Time Edit for Blazor displays a drop-down time picker. Both components now support a new Mask property.

To enable masks in both, set your desired mask pattern for the appropriate Mask property: DxDateEdit.Mask or DxTimeEdit.Mask. This mask type supports predefined mask patterns or the standard date and time .NET formats.

You can also specify additional mask-related settings (current culture, caret mode, etc) by configuring the DxDateTimeMaskProperties component (common for both mentioned components).

For instance, use DxDateTimeMaskProperties.CaretMode (advancing caret) to automatically move the caret to the next date or time section once an end-user has edited the previous value:

<DxDateEdit @bind-Date="@Date" Mask="D">
  <DxDateTimeMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")"
                            CaretMode="MaskCaretMode.Advancing" />
</DxDateEdit>

Demo | Documentation

Spin Edit

The DevExpress Spin Edit for Blazor allows you to display and edit numeric values. With v21.1, you can specify a mask pattern (a value format) by using the new DxSpinEdit.Mask property and configure additional mask settings with the DxNumericMaskProperties component.

For more information on Numeric masks, refer to the following help topic: Numeric Masks.

Demo | Documentation

An Alternative - Masked Input

Let’s quickly review the capabilities of the new DevExpress Masked Input component.

While our Masked Input component for Blazor supports DateTime, Numeric, Text, and Regular Expression mask types, it has one fundamental difference from the aforementioned data editors (Date Edit, Time Edit, and Spin Edit).

Most of our data editors work with standard data types (DateTime, numeric objects, etc), but you cannot use these editors (Date Time, Spin Edit, Time Edit) if you store data source objects (dates or numbers) as strings. The Masked Input component can work with string-based data fields. It converts strings from the data source to the appropriate data type (DateTime, int, and so forth) and then treats the resulting value as a date or number. This auto conversion process allows you to apply the desired mask type (Date-Time, Numeric) for your string objects.

To summarize, if you store your data source objects as strings, you should definitely consider the use of our Masked Input component. If you store your data using corresponding data types (DateTime, int, etc), feel free to use our new Mask property (for our Blazor Date Edit, Time Edit, and Spin Edit) instead.

Set Focus from Code

Before I wrap up, quick reminder that you can set editor focus in code. Use the FocusAsync method for all data editors that contain 'input' or 'text-area' elements (ComboBox, TagBox, Text Box, Masked Input, Memo, Spin Edit, Date Edit, and CheckBox) to set focus. For example, call the DxTextBox.FocusAsync to focus a Text Box from within Razor code:

<DxTextBox @ref="component" Text="This is a text box."></DxTextBox>

@code {
    DxTextBox component;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        component.FocusAsync();
    }
}

Free DevExpress Products - Get Your Copy Today