How to create an example of React DateRangePicker component using bootstrap theme?

2 mins read

A quick start project that helps you to create a React DateRangePicker component in the Bootstrap theme.

React DateRangePicker

The following section explains the steps required to create a simple React DateRangePicker component.

Introduction

The React DateRangePicker used in this project is created from the Syncfusion ej2-react-calendars package. You can simply define it as < DateRangePickerComponent >.

Dependencies

Before starting this project, the React DateRangePicker requires to add the Syncfusion ej2-react-calendars package from the npmjs, which is distributed in the npm as @syncfusion scoped packages.

Creating React Project

To create the React project using the React app, follow the steps given below.

To install the create-react-app package, please run the following command.

npm install -g create-react-app

Now, create a new React project by using the command and navigate to that folder.

create-react-app <project name>--scripts-version=react-scripts-ts
cd <project name>

Install the ej2-react-calendars package through the npm install command.

npm install @syncfusion/ej2-react-calendars –save

Creating React DateRangePicker

To include the DateRangePicker component in your application, import the DateRangePicker Component from the ej2-react-calendars package in App.jsx

[App.js]

import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  start= new Date("10/7/2020");
  end= new Date("11/15/2020");
  render() {
    return (<DateRangePickerComponent id="daterangepicker" placeholder='Select a range' startDate={this.start} endDate={this.end} />);
  }
}

Adding CSS Reference

To render the DateRangePicker component in the Bootstrap theme, you need to import the DateRangePicker and its dependent component’s styles in App.css.

[App.css]

@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css";
@import "../node_modules/@syncfusion/ej2-react-calendars/styles/bootstrap.css";

Run the application with the npm start command in the console, it will build your application and open in the browser.

Screenshot

Daterangepicker

Also, you can download and run the sample from this link https://www.syncfusion.com/downloads/support/directtrac/general/ze/React_Datrangepicker745928651

For more information about the DateRangePicker functionalities, refer to this UG Documentation, API Reference and Samples.

Conclusion

I hope you enjoyed learning about how to create an example of the react daterangepicker component using Bootstrap theme.

You can refer to our React Date Range Picker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Date Range Picker example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)