Daterange Picker in SPFX Web Part

This article will help you learn how to use the daterange picker in SPFX web part and solve an issue with the IE browser

Introduction 

 

Sometimes you have a requirement to allow a user to select a date range, but the react office fabric UI does not provide any control for selecting the date range. Therefore, you need to use a third party datepicker control supported in react. Here is a third party control for daterange picker:

 

https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker

 

You need to install the below npm package in order to use this daterange picker:

npm i @wojtekmaj/react-daterange-picker

Once you have installed package, you need to import your code as below:

import DateRangePicker from '@wojtekmaj/react-daterange-picker';

Now you will be able to use date range picker in the render method, as shown below:

<DateRangePicker
 onChange={this.onChange}
 value={this.state.date}
/>

There are also many other properties for this control, you can find that properties in the above-given URL.

 

Issue with IE browser

 

When you add DateRange Picker control to your SPFx web part, it will work fine in all browsers. However, it will create an issue for the Internet Explorer browser.

 

It will block your full web part from being displayed, so we will not load it in the IE browser.

 

To resolve this issue, you need to install npm package for polyfill using below command,

npm install polyfill

 

Once you have installed this package you need to add the below line of code after we have imported the daterange picker.

require('polyfill');

Now in the config.json file, add the below line of code in the externals section.

"polyfill": {

"path" : "https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find",

"globalName": "polyfill"

}

Now your web part will work in the IE browser. I hope this blog will help you!