HelpBot Assistant

How can I help you?

Date masking in React Datepicker component

21 Feb 202617 minutes to read

DatePicker has enableMask property that provides the option to enable the built-in date masking support. Also, you must inject the MaskedDateTime module to enable the masking support.

[Class-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
export default class App extends React.Component {
    render() {
        return <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
    public render() {
        return <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
function App() {
    return <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>;
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

function App(){
    return <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
}
ReactDOM.render(<App />, document.getElementById('element'));

The mask pattern follows the provided date format. When no format is specified, the mask pattern is generated based on the current culture’s default date format.

Keys Actions
Up / Down arrows To increment and decrement the selected portion of the date.
Left / Right arrows and Tab To navigate the selection from one portion to next portion

The following example demonstrates default and custom format of DatePicker component with mask.

[Class-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
export default class App extends React.Component {
    render() {
        return (<div>
                {/* specifies the masked DatePicker component without format */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with format  */}
                <DatePickerComponent format='dd-MM-yyyy' enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
    public render() {
       return (
            <div>
                {/* specifies the masked DatePicker component without format */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with format  */}
                <DatePickerComponent format='dd-MM-yyyy' enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
            </div>
        );

    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
function App() {
    return (<div>
                {/* specifies the masked DatePicker component without format */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with format  */}
                <DatePickerComponent format='dd-MM-yyyy' enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
            </div>);
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

function App() {
       return (
            <div>
                {/* specifies the masked DatePicker component without format */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with format  */}
                <DatePickerComponent format='dd-MM-yyyy' enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
            </div>
        );
}
ReactDOM.render(<App />, document.getElementById('element'));

Configure Mask Placeholder

The mask placeholder value can be customized using the maskPlaceholder property. By default, it displays the full names of date and time coordinates such as day, month, year, and hour.

While changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class for mask placeholder values like below.

//Load the L10n from ej2-base
import { L10n } from '@syncfusion/ej2-base';

//load the locale object to set the localized mask placeholder value
L10n.load({
'de': {
    datepicker: { day: 'Tag' , month: 'Monat', year: 'Jahr' }
}
});

The following example demonstrates default and customized mask placeholder value.

[Class-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
export default class App extends React.Component {
    maskPlaceholderValue;
    constructor(props) {
        super(props);
        this.maskPlaceholderValue = { day: 'd', month: 'M', year: 'y' };
    }
    render() {
        return (<div>
                {/* specifies the masked DatePicker component without mask placeholder */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with mask placeholder  */}
                <DatePickerComponent enableMask={true} maskPlaceholder={this.maskPlaceholderValue}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
    private maskPlaceholderValue: object;
    constructor(props: {}) {
    super(props);
    this.maskPlaceholderValue = {day: 'd', month: 'M', year: 'y'};
    }
    public render() {
       return (
            <div>
                {/* specifies the masked DatePicker component without mask placeholder */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with mask placeholder  */}
                <DatePickerComponent  enableMask={true} maskPlaceholder={this.maskPlaceholderValue}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
            </div>
        );

    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
function App() {
    let maskPlaceholderValue;
    maskPlaceholderValue = { day: 'd', month: 'M', year: 'y' };
    return (<div>
                {/* specifies the masked DatePicker component without mask placeholder */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with mask placeholder  */}
                <DatePickerComponent enableMask={true} maskPlaceholder={maskPlaceholderValue}><Inject services={[MaskedDateTime]}/></DatePickerComponent>
            </div>);
}
ReactDOM.render(<App />, document.getElementById('element'));
import { DatePickerComponent, Inject, MaskedDateTime } from '@syncfusion/ej2-react-calendars';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

function App() {
    let maskPlaceholderValue: object;
    maskPlaceholderValue = {day: 'd', month: 'M', year: 'y'};
       return (
            <div>
                {/* specifies the masked DatePicker component without mask placeholder */}
                <DatePickerComponent enableMask={true}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
                <br />
                <br />

                {/* specifies the masked DatePicker component with mask placeholder  */}
                <DatePickerComponent  enableMask={true} maskPlaceholder={maskPlaceholderValue}><Inject services={[MaskedDateTime]} /></DatePickerComponent>
            </div>
        );
}
ReactDOM.render(<App />, document.getElementById('element'));