Getting started with React DateRangePicker component
17 Mar 20259 minutes to read
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:
Dependencies
The below list of dependencies are required to use theDateRangePicker 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-buttonsInstallation and configuration
You can usecreate-react-app to setup the applications.
To installcreate-react-app run the following command.
``` npm install -g create-react-app ```To setup basic
Reactsample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts cd quickstart
Adding Syncfusion® packages
All the available Essential® JS 2 packages are published innpmjs.com public registry. You can choose the component that you want to install. For this application, we are going to useDateRangePicker component.
To install DateRangePicker component, use the following command
npm install @syncfusion/ej2-react-calendars –saveAdding Style sheet to the Application
To render the DateRangePicker component, need to import DateRangePicker and its dependent component’s styles as given below inApp.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.
Adding DateRangePicker component to the Application
To include the DateRangePicker component in application import the
DateRangePickerComponentfromej2-react-calendarspackage inApp.tsx.Then add the DateRangePicker component as shown in below code example.
[src/App.tsx]
[Class-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import'./App.css';exportdefaultclassAppextendsReact.Component<{},{}>{publicrender(){return<DateRangePickerComponentid="daterangepicker"/>}};[Functional-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import'./App.css';functionApp(){return<DateRangePickerComponentid="daterangepicker"/>};Run the application
Now run thenpm start command in the console, it will run your application and open the browser window.
npm startThe below examples shows the basic DateRangePicker component.
[Class-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";exportdefaultclassAppextendsReact.Component{render(){return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'/>;}};ReactDOM.render(<App/>,document.getElementById('element'));import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";exportdefaultclassAppextendsReact.Component<{},{}>{publicrender(){return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'/>}};ReactDOM.render(<App/>,document.getElementById('element'));[Functional-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";functionApp(){return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'/>;};ReactDOM.render(<App/>,document.getElementById('element'));import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";functionApp(){return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'/>};ReactDOM.render(<App/>,document.getElementById('element'));Setting the start and end date in a range
The start and end date in a range can be defined with help ofstartDate andendDate 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 thispage.
[Class-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";exportdefaultclassAppextendsReact.Component{start=newDate("10/7/2017");end=newDate("11/15/2017");render(){return<DateRangePickerComponentid="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*asReactfrom"react";import*asReactDOMfrom"react-dom";exportdefaultclassAppextendsReact.Component<{},{}>{privatestart:Date=newDate("10/7/2017");privateend:Date=newDate("11/15/2017");publicrender(){return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'startDate={this.start}endDate={this.end}/>}};ReactDOM.render(<App/>,document.getElementById('element'));[Functional-component]
import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";functionApp(){conststart=newDate("10/7/2017");constend=newDate("11/15/2017");return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'startDate={start}endDate={end}/>;};ReactDOM.render(<App/>,document.getElementById('element'));import{DateRangePickerComponent}from'@syncfusion/ej2-react-calendars';import*asReactfrom"react";import*asReactDOMfrom"react-dom";functionApp(){conststart:Date=newDate("10/7/2017");constend:Date=newDate("11/15/2017");return<DateRangePickerComponentid="daterangepicker"placeholder='Select a range'startDate={start}endDate={end}/>};ReactDOM.render(<App/>,document.getElementById('element'));See Also
NOTE
You can refer to ourReact DateRangePicker feature tour page for its groundbreaking feature representations. You can also explore ourReact DateRangePicker example that shows how to render the DateRangePicker in React.
[8]ページ先頭