JavaScript/jQuery DateBox - Value Formatting and Masked Input

The DateBox's value is formatted according to the application's locale. You can use the displayFormat property that accepts predefined and custom formats to change the format.

View Demo View on GitHub

In addition to value formatting, the displayFormat can be used as a mask to control user input if useMaskBehavior is true:

jQuery
JavaScript
$(function() {
    $("#dateBoxContainer").dxDateBox({
        displayFormat: "EEEE, d 'of' MMM", // "Tuesday, 16 of Oct" 
        useMaskBehavior: true
    });
});
Angular
HTML
TypeScript
<dx-date-box
    [useMaskBehavior]="true"
    displayFormat="EEEE, d 'of' MMM"> <!-- "Tuesday, 16 of Oct" -->
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDateBox
        :use-mask-behavior="true"
        display-format="EEEE, d 'of' MMM"/> <!-- "Tuesday, 16 of Oct" -->
</template>

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

import DxDateBox from 'devextreme-vue/date-box';

export default {
    components: {
        DxDateBox
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DateBox from 'devextreme-react/date-box';

class App extends React.Component {
    render() {
        return (
            <DateBox
                useMaskBehavior={true}
                displayFormat="EEEE, d 'of' MMM" {/* "Tuesday, 16 of Oct" */}
            />
        );
    }
}
export default App;

The following changes apply when masked input is enabled:

  • The mouse wheel or Up/Down Arrow key increases/decreases the selected value portion by 1.
  • The caret is moved to the next date portion when the previous date portion is entered.
  • The year is entered right-to-left. For example, if 1 is entered, the year is 2001; if 18 is entered, the year is 2018.
  • Numbers and first letters can be used to specify the month and day of week when they are displayed as text. For example, enter A or 4 to specify "April".