DateBox for DevExtreme - How to Parse and Update Short Year Input

The DevExtreme DateBox component interprets one/two-digit year values as years in the 20th century (for example, "15" is interpreted as "1915"). This is how the JavaScript Date() constructor processes input when you pass numeric arguments.

This example customizes default functionality and allows you to specify the century portion of a given date value.

Use the displayFormat property and implement custom parser and formatter functions. The parser function analyzes input date value, identifies two-digit year entries, and transforms them into dates in the current/previous century (based on a specific algorithm).

In this sample project, you will find a SelectBox with 4 options for the parser function. (Output for certain algorithms depends on the current year. Examples in the table below are for 2024.)

Option	Cut-off range
Century cuts off at 50 years	2049/1950
Century cuts off after the current decade	2029/1930
Century cuts off at the current year	2024/1925
No century cut-off	Always 2000s

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • Home.vue
• React
  • App.tsx
• NetCore
  • Index.cshtml

Documentation

• Getting Started with DateBox
• DateBox - displayFormat
• DataGrid - columns.editorOptions

More Examples

• DateBox Formatting demo

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)