How can I help you?
Date format in React Daterangepicker component
21 Feb 20268 minutes to read
Date format defines how date values are displayed in the input field. By default, the DateRangePicker format is based on the current culture. You can set a custom format using the format property.
When the date 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 Format section.
The following example demonstrates the DateRangePicker with the custom format (yyyy-MM-dd).
[Class-component]
// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
startValue = new Date(new Date().setDate(1));
endValue = new Date(new Date().setDate(20));
render() {
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' startDate={this.startValue} endDate={this.endValue} placeholder='Select a range'/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
private startValue: Date = new Date(new Date().setDate(1));
private endValue: Date = new Date(new Date().setDate(20))
public render() {
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' startDate={this.startValue} endDate={this.endValue} placeholder='Select a range' />
}
};
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const startValue = new Date(new Date().setDate(1));
const endValue = new Date(new Date().setDate(20));
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' startDate={startValue} endDate={endValue} placeholder='Select a range'/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const startValue: Date = new Date(new Date().setDate(1));
const endValue: Date = new Date(new Date().setDate(20));
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' startDate={startValue} endDate={endValue} placeholder='Select a range' />
};
ReactDOM.render(<App />, document.getElementById('element'));Input formats
The inputFormats property in the DateRangePicker control allows users to enter dates in various formats, providing flexibility in date 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 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 DateRangePicker with multiple input formats.
[Class-component]
// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
startValue = new Date(new Date().setDate(1));
endValue = new Date(new Date().setDate(20));
render() {
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' inputFormats={['dd/MM/yyyy', 'yyyyMMdd']} startDate={this.startValue} endDate={this.endValue} placeholder='Select a range'/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
private startValue: Date = new Date(new Date().setDate(1));
private endValue: Date = new Date(new Date().setDate(20))
public render() {
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' inputFormats={['dd/MM/yyyy', 'yyyyMMdd']} startDate={this.startValue} endDate={this.endValue} placeholder='Select a range' />
}
};
ReactDOM.render(<App />, document.getElementById('element'));[Functional-component]
// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const startValue = new Date(new Date().setDate(1));
const endValue = new Date(new Date().setDate(20));
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' inputFormats={['dd/MM/yyyy', 'yyyyMMdd']} startDate={startValue} endDate={endValue} placeholder='Select a range'/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));// import the daterangepickercomponent
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const startValue: Date = new Date(new Date().setDate(1));
const endValue: Date = new Date(new Date().setDate(20))
return <DateRangePickerComponent id="daterangepicker" format='yyyy-MM-dd' inputFormats={['dd/MM/yyyy', 'yyyyMMdd']} startDate={startValue} endDate={endValue} placeholder='Select a range' />
};
ReactDOM.render(<App />, document.getElementById('element'));