How can I help you?
Date time format in React Datetimepicker component
Date-time format defines how date and time values are displayed in the input field. By default, the DateTimePicker format is based on the current culture. You can set a custom format using the format property.
When the date-time format is set, it applies uniformly across all cultures and overrides the culture-specific default format.
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 { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
dateValue = new Date();
render() {
return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} format='yyyy-MM-dd hh:mm' placeholder='Select a date and time'/>;
}
}
ReactDOM.render(<App />, document.getElementById('element'));import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
private dateValue:Date=new Date();
public render() {
return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} format='yyyy-MM-dd hh:mm' placeholder='Select a date and time' />;
}
}
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
// import the datetimepicker component
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const dateValue=new Date();
return <DateTimePickerComponent id="datetimepicker" value={dateValue} format='yyyy-MM-dd hh:mm'/>;
}
ReactDOM.render(<App />, document.getElementById('element'));// import the datetimepicker component
import {DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const dateValue:Date=new Date();
return <DateTimePickerComponent id="datetimepicker" value={dateValue} format='yyyy-MM-dd hh:mm' />;
}
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 { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
dateValue = new Date();
render() {
return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} format='yyyy-MM-dd hh:mm' inputFormats={['dd/MM/yyyy hh:mm', 'yyyyMMdd hh:mm']} placeholder='Select a date and time'/>;
}
}
ReactDOM.render(<App />, document.getElementById('element'));import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
private dateValue:Date=new Date();
public render() {
return <DateTimePickerComponent id="datetimepicker" value={this.dateValue} format='yyyy-MM-dd hh:mm' inputFormats={['dd/MM/yyyy hh:mm', 'yyyyMMdd hh:mm']} placeholder='Select a date and time' />;
}
}
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
// import the datetimepicker component
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const dateValue =new Date();
return <DateTimePickerComponent id="datetimepicker" value ={dateValue} format='yyyy-MM-dd hh:mm' inputFormats={['dd/MM/yyyy hh:mm','yyyyMMdd hh:mm']}/>;
}
ReactDOM.render(<App />, document.getElementById('element'));// import the datetimepicker component
import {DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const dateValue:Date = new Date();
return <DateTimePickerComponent id="datetimepicker" value={dateValue} format='yyyy-MM-dd hh:mm' inputFormats={['dd/MM/yyyy hh:mm', 'yyyyMMdd hh:mm']} />;
}
ReactDOM.render(<App />, document.getElementById('element'));