Localization, Formatting and Mask Improvements for DevExtreme HTML5 Widgets (v17.2)

Localization is an important part of an application. I have recently covered a number of localization aspects in my blog post about localization for DevExtreme. Note that this post has been updated to reflect the news in v17.2.

We received lots of feedback about practical scenarios and we have made significant improvements. It is now possible to specify custom formats without the need to include Globalize or Intl. Globalize is a powerful library that provides rich formatting and localization capabilities, but many applications require localization for one language only. Using Globalize is a non-trivial step, so we decided to directly support a number of scenarios where the power of Globalize isn’t really needed. Intl is much easier to use, but developers can still save time by taking advantage of our new built-in feature set.

In addition, we have added format support to the NumberBox and we have improved the behavior of masks in the TextBox.

Built-in support for custom formats

When working with numbers and dates, developers often need to define specific value formats. Prior to v17.2, DevExtreme supported only a few predefined formats out of the box. For custom formats, you had to use a 3-rd party i18n library (Globalize), or alternatively implement custom formatter and parser functions. Both approaches were more complicated than necessary for the use case.

In v17.2 you can now use custom formats in all widgets that support formatting. You can set a custom format with just simple format string, based on an LDML-like pattern. There is no need to define formatter or parser functions.

Date formatting examples

Displaying DataGrid column values with the full month name:

Using a custom format for the DateBox that displays the date, the time in 12-hour format, and milliseconds:

Number formatting

We have used feedback from v17.1 to analyze the most scenarios most important for our users, and implemented solutions for number formatting that will make the jobs of application developers easier. Meet the new NumberBox with custom formatting!

Formatting functionality in the NumberBox involves not only the formatting of the value itself, but also intuitive behavior of the input caret. Additional symbols can be added while the user inputs data (for example, the delimiters), and the caret keeps the correct position.

It used to be a major inconvenience to make minor changes to a value format when using our editors, because 3rd-party libraries were required. Now we directly support the following use cases with a single “format” option:

Adding a prefix and/or postfix

With the support of format strings in NumberBox, you can easily display the unit for a number. For instance, use format: "#0 px" to denote pixels or format: "$#0" for a currency format.

For a currency format that observes localization, use format: "currency":

Showing localized fractional and digit grouping delimiters

Different cultures have different number representation rules, different decimal delimiters, and digit grouping rules.

Using Intl or Globalize with the setting format: "#,##0.##”, the elements , (the thousands separator) and . (the decimal separator) are automatically replaced with the separators from your locale:

If you don’t use either Intl or Globalize, the built-in localization engine enables you to customize decimal and thousands separators manually, and the format strings use these settings.

Defining a precision in the NumberBox

The patterns not only specify number format, they also control input, preventing typing of incorrect characters and controlling the number of decimal places. Here are some examples:

"#0.##" - 2 decimal places, the fractional part is not mandatory

"#0.000" - 3 decimal places, the fractional part is mandatory

Advanced scenarios

Of course the NumberBox still supports the 3rd-party localization libraries Globalize and Intl in addition to the built-in localization engine.

You can still define your own parser and formatter functions. Our documentation describes all the details, and please let us know via our Support Center if something is missing!

Intl localization improvements

Restrictions related to localization using the DevExtreme Intl integration are removed in v17.2:

• It is not necessary to define a parser manually for any format (this was previously required for the DateBox and for date/time editing in the Data Grid). The correct parser is now generated automatically.

• Custom format strings are available, as detailed above. Correct month names, decimal and thousands separators are automatically selected for the active locale. This type of custom formatting wasn’t previously supported when using Intl.

Intl localization functionality is now much closer to that of Globalize. Intl is easier to use, requiring only one external file instead of the many CLDR data files that Globalize requires.

TextBox mask improvements

During data entry, it is inconvenient to have to navigate the input caret using the cursor keys, especially when masks are being used. We have improved the default caret behavior:

• If the current value is undefined and the TextBox isn’t focused, the caret will be set at the beginning of the input when you tap or click any part of the TextBox.

• If the current value is defined and the TextBox isn’t focused, the caret is set at the end of the input when you tap or click any part of the TextBox.

• If the TextBox is focused, the caret moves to the position where you tap or click it.

A new mode has also been added to make the mask visible. The mask can always be displayed, or it can be shown only when the TextBox has been focused.

Try it!

Version v17.2.3 is now available. Please visit the DevExtreme site for all the details.

Please let us know your feedback on the new features!

Free DevExpress Products - Get Your Copy Today