DevExtreme DateBox - Masked Input (v18.2)

We've added the highly-requested Masked Input feature to the DevExtreme DateBox. While the DevExtreme TextBox does provide several masking options, it was inconvenient when you needed to work with date/time fields.

The new Masked input feature for the DevExtreme DateBox will improve the user experience of your apps and save you time. We've built several powerful options into the component too:

• LDML pattern support
• Built-in localization patterns
• Arrows keys and mouse support

Check out this short animation that shows the enhanced masking features of the DevExtreme DateBox:

Let’s take a deeper look at each of these features.

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

Setting

To enable the new feature, set the useMaskBehavior property to true.

LDML pattern support

You can now use LDML patterns with the DevExtreme DateBox Masked Input feature. What is LDML?

"The Unicode Locale Data Markup Language (LDML) ... provides a common format for systems to interchange locale data so that they can get the same results in the services provided by internationalization libraries." -Unicode.org

Several LDML patterns are now available with the DevExtreme DateBox. We've also added these enhancements:

• Escape Character support - We're introducing support for the escape character as the part of the LDML-based format. This feature allows the customer to use non-editable characters before, after, and in the middle of the date. For example, you can use the format: dd 'of' MMMM and display "15 of September". Then you can navigate between the "15" and "September" and skip the "of" portion.

• Year Autocomplete - The DateBox can autocomplete the year portion for you automatically when you type a two-digit year in the four-digit format. For example, if you use the yyyy mask, and start typing "20" then you will get "2020". If you continue typing and enter two more digits, say "15", then you will get "2015" as the year value.

• Detect month by number - When you have a month in text format, for example, "MMM" (September), you can press a digit "4" and change it to "April".

• Detect month by symbol - You can type the first few characters of the month name to select the month. For example, "A" selects "April", "J" selects "January" but "Jul" selects "July".

Note: Not all LDML patterns are supported, please see our documentation for more info.

Built-in localization patterns

The LDML pattern is great for complex formats, however, it's cumbersome for simpler formats.

Therefore, we've developed a set of the most used/common date formats. And you can refer to them using human-readable constants!

For example, you can use shortdate instead of MM/dd/yyyy or shortdateshorttime instead of MM/dd/yyyy HH:mm a. Take a look at the full list of formats in our documentation.

Arrows Keys and Mouse support

The DateBox also supports editing date parts using arrows keys or the mouse wheel:

• Increase or decrease the date parts using the mouse wheel or the up/down arrows keys. Plus, if the date is invalid, then the date will be automatically corrected. For example, when the date is "31 of March" and the user decreases the month to February, then the date will be corrected to "28 of February".

• The input caret will be automatically moved to the next date part date when the previous one has been entered completely.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DevExtreme DateBox.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

Free DevExpress Products - Get Your Copy Today