This section explains you the steps required to create a simple DateRangePicker and demonstrate the basic usage of the DateRangePicker component.
To get start quickly with React DateRangePicker, you can check on this video:
The below list of dependencies are required to use the DateRangePicker
component in your application.
|-- @syncfusion/ej2-react-calendars
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
All the available Essential JS 2 packages are published in npmjs.com
public registry.
You can choose the component that you want to install. For this application, we are going to use DateRangePicker
component.
To install DateRangePicker component, use the following command
npm install @syncfusion/ej2-react-calendars –save
To render the DateRangePicker component, need to import DateRangePicker and its dependent component’s styles as given below in App.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-calendars/styles/material.css";
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
DateRangePickerComponent
from ej2-react-calendars
package in App.tsx
.[src/App.tsx]
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import './App.css';
export default class App extends React.Component<{}, {}> {
public render() {
return <DateRangePickerComponent id="daterangepicker" />
}
};
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start
The below examples shows the basic DateRangePicker component.
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 {
render() {
return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range'/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
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<{}, {}> {
public render() {
return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' />
}
};
ReactDOM.render(<App />, document.getElementById('element'));
The start and end date in a range can be defined with help of
startDate
and endDate
property.
The following example demonstrates, how to set the start date, end date on initializing the
DateRangePicker. To know more about range restriction in DateRangePicker, please refer this page.
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 {
constructor() {
super(...arguments);
this.start = new Date("10/7/2017");
this.end = new Date("11/15/2017");
}
render() {
return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' startDate={this.start} endDate={this.end}/>;
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
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 start:Date= new Date("10/7/2017");
private end:Date= new Date("11/15/2017");
public render() {
return <DateRangePickerComponent id="daterangepicker" placeholder='Select a range' startDate={this.start} endDate={this.end} />
}
};
ReactDOM.render(<App />, document.getElementById('element'));