DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

Value Formatting and Masked Input

DateRangeBox displays values according to the application's locale. You can specify a custom date format. Use the displayFormat property that accepts predefined and custom formats.

If useMaskBehavior is true, the displayFormat property also specifies a mask that restricts user input:

jQuery
JavaScript
$(function() {
    $("#dateRangeBoxContainer").dxDateRangeBox({
        displayFormat: "EEEE, MMM d", // "Tuesday, Oct 19 - Sunday, Oct 24"
        useMaskBehavior: true,
        // ...
    });
});
Angular
app.component.html
app.component.ts
<dx-date-range-box
    displayFormat="EEEE, MMM d", // "Tuesday, Oct 19 - Sunday, Oct 24"
    [useMaskBehavior]="true" 
    // ...
></dx-date-range-box>
import { DxDateRangeBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDateRangeBoxModule
    ],
    // ...
})
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDateRangeBox
        display-format="EEEE, MMM d", // "Tuesday, Oct 19 - Sunday, Oct 24" 
        :use-mask-behavior="true" 
        // ...
    /> 
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDateRangeBox from 'devextreme-vue/date-range-box';

export default {
    components: {
        DxDateRangeBox
    }
}
</script>
<template>
    <DxDateRangeBox
        display-format="EEEE, MMM d", // "Tuesday, Oct 19 - Sunday, Oct 24"
        :use-mask-behavior="true" 
        // ...
    /> 
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';

import DxDateRangeBox from 'devextreme-vue/date-range-box';
// ...
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DateRangeBox from 'devextreme-react/date-range-box';

export default function App() { 
    return (
        <DateRangeBox ...
            displayFormat="EEEE, MMM d", // "Tuesday, Oct 19 - Sunday, Oct 24"
            useMaskBehavior={true}
            // ...
        />
    );
}

The following changes apply when masked input is enabled:

  • The mouse wheel or Up/Down Arrow key increases/decreases the selected value section by 1.
  • The caret moves to the next date section when the previous date section is entered.
  • The year is entered right-to-left. For example, enter 2 to specify the year 2002; enter 19 for 2019.
  • The corresponding month/day number or initial letters can be used to specify the month and day of the week when they are displayed as text. For example, in the month section, enter M or 3 to specify "March".