Date format in React Datepicker component
21 Oct 20243 minutes to read
Date format is a way of representing the date value in different string format in the textbox.
By default, the DatePicker’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 Format section.
The following example demonstrates the DatePicker with the custom format (yyyy-MM-dd
).
[Class-component]
// import the datepickercomponent
import { DatePickerComponent } 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 <DatePickerComponent id="datepicker" value={this.dateValue} format='yyyy-MM-dd' 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';
export default class App extends React.Component<{}, {}> {
private dateValue:Date=new Date();
public render() {
return <DatePickerComponent id="datepicker" value={this.dateValue} format='yyyy-MM-dd' 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';
function App() {
const dateValue = new Date();
return <DatePickerComponent id="datepicker" value={dateValue} format='yyyy-MM-dd' 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';
function App() {
const dateValue:Date=new Date();
return <DatePickerComponent id="datepicker" value={dateValue} format='yyyy-MM-dd' placeholder='Enter date' />
};
ReactDOM.render(<App />, document.getElementById('element'));