Date time format in React Datetimepicker component

27 Mar 202510 minutes to read

Date time format is a way of representing the date and time value in different string format in the textbox.

By default, the DateTimePicker’s format is based on the culture. You can also set the own custom format by using the
format property.

Once the date format property has been defined it will be common to all the cultures.

To know more about the date format standards, refer to the Internationalization Date Time Format section.

The following example demonstrates the DatePicker with the custom format (yyyy-MM-dd hh:mm).

[Class-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
export default class App extends React.Component {
    // sets the value
    dateValue = new Date('5/28/2017');
    // sets the min
    minDate = new Date('5/5/2017');
    // sets the max
    maxDate = new Date('5/25/2017');
    disable = false;
    render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate} placeholder="Enter date"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
export default class App extends React.Component<{}, {}> {

    // sets the value
    private dateValue:Date= new Date('5/28/2017');
    // sets the min
    private minDate:Date= new Date('5/5/2017');
    // sets the max
    private maxDate:Date= new Date('5/25/2017');
    private disable: boolean = false;

    public render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate}   placeholder="Enter date" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
export default class App extends React.Component {
    // sets the value
    dateValue = new Date('5/28/2017');
    // sets the min
    minDate = new Date('5/5/2017');
    // sets the max
    maxDate = new Date('5/25/2017');
    disable = true;
    render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate} placeholder="Enter date"/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
export default class App extends React.Component<{}, {}> {

     // sets the value
    private dateValue:Date= new Date('5/28/2017');
    // sets the min
    private minDate:Date= new Date('5/5/2017');
    // sets the max
    private maxDate:Date= new Date('5/25/2017');
    private disable: boolean = true;

    public render() {
        return <DatePickerComponent id="datepicker" strictMode={this.disable} format="dd/MM/yyyy" value={this.dateValue} min={this.minDate} max={this.maxDate}  placeholder="Enter date" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

Input formats

The inputFormats property in the DatetimePicker control allows users to enter dates and times in various formats, providing flexibility in date and time entry. This property accepts an array of predefined formats that the control recognizes, enabling users to input dates in different ways while ensuring they are parsed correctly.

When the user types the date and time in any of the specified input formats, it will be automatically converted to the display format after pressing Enter, the Tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats.

The following example demonstrates the DateTimePicker with multiple input formats.

[Class-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue = new Date('5/28/2017');
    // sets the min
    const minDate = new Date('5/5/2017');
    // sets the max
    const maxDate = new Date('5/25/2017');
    const disable = false;
    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate} placeholder="Enter date"/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue:Date= new Date('5/28/2017');
    // sets the min
    const minDate:Date= new Date('5/5/2017');
    // sets the max
    const maxDate:Date= new Date('5/25/2017');
    const disable: boolean = false;

    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate}   placeholder="Enter date" />
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// creates a datepicker with strictMode property
function App() {
    // sets the value
    const dateValue = new Date('5/28/2017');
    // sets the min
    const minDate = new Date('5/5/2017');
    // sets the max
    const maxDate = new Date('5/25/2017');
    const disable = true;
    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate} placeholder="Enter date"/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

// creates a datepicker with strictMode property
function App() {
     // sets the value
    const dateValue:Date= new Date('5/28/2017');
    // sets the min
    const minDate:Date= new Date('5/5/2017');
    // sets the max
    const maxDate:Date= new Date('5/25/2017');
    const disable: boolean = true;

    return <DatePickerComponent id="datepicker" strictMode={disable} format="dd/MM/yyyy" value={dateValue} min={minDate} max={maxDate}  placeholder="Enter date" />
};
ReactDOM.render(<App />, document.getElementById('element'));