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:hostforlifebanner

https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker
You need to install the below npm package in order to use this daterange picker:
Once you have installed package, you need to import your code as below:

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

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,
Once you have installed this package you need to add the below line of code after we have imported the daterange picker.
Now in the config.json file, add the below line of code in the externals section.
Now your web part will work in the IE browser. I hope this blog will help you!