Add icon to toggle date range picker

[matthew-white]

We want to add an icon inside the DateRangePicker component that when clicked will toggle the flatpickr calendar. I think this can be done by calling the toggle() method of the flatpickr instance or by using an external element.

The icon should match what is shown for a select element. Right now we show native select elements, which vary across browsers:

Chrome

Firefox

Safari

In order for the DateRangePicker icon to match a select element, we will need to either:

1. Render a select element in DateRangePicker (perhaps using the flatpickr positionElement option).
2. Style select elements so that they use a consistent icon across browsers. We would then use that same icon in DateRangePicker (probably either arrow-down or chevron-down).

Note that if the required prop of a DateRangePicker component is false, we show a clear button within the component once a selection has been made:

When we add the toggle icon, the toggle icon should appear on the right. The clear icon should appear to the left of the toggle icon when it is shown.

The fact that we are showing two icons makes me think that it would be best to implement option (2) above, so that the two icons are styled similarly.

[matthew-white]

This issue hasn't been a priority for multiple years, so I think it's safe to close it. I also think it's possible that we'll move to a different date range picker at some point (if we move away from Bootstrap).