Customizing the vanilla JS date range picker

Date range pickers are common components which are used in a majority of websites. There are different types built by developers for different platforms.

MY REQUIREMENT
I recently needed a javascript date range picker component for page insight https://pageinsight.app. I required something which when clicked on would produce a dropdown menu consisting of fixed date ranges (Last 7 days, Last 30 days etc.) which users could click to analyse the data between that range without having to manually enter the dates into the component. I wanted the component to be easily extended and customized to match the website theme.

THE SEARCH
So, I went online and there was a plethora of options to choose from, most created by other open source web developers. The first search result on Google was Date Range Picker created by Dan Grossman. It had a lot features and was well documented but it had a large file and was written in jquery which wasn’t my strongest suit.

THE VANILLA JS DATE PICKER
After searching for a while I discovered the VanillaJSDatePicker. It was a lightweight component and met my requirements perfectly. It was well maintained as I could see from the activity on GitHub page https://github.com/mymth/vanillajs-datepicker. The downside to it was the poor documentation and lack of resources online.

HOW IT WORKS
Its operation was pretty basic. You wrap two text input fields in a div. One of the input fields for the start date and the other was for the end date. The div is then referenced and passed to the Date Range Picker object. That’s it. Now when one of the text input fields is in focus or is clicked on, a calendar component pops up from the input as a dropdown. You can then select the dates from the calendar and the text input fields get updated with the date which is selected.

CUSTOMISING THE VANILLA JS DATE PICKER
In order to add the ability to create a dropdown menu to select fixed date ranges, I created a wrapper class around the VanillaJSDatePicker and provided additional functionality so the date ranger picker can be applied to any div. When it is clicked on, a dropdown list is created which allows users to select their predefined date range. A custom date range is appended to the list which when clicked on, causes the calendar to pop up from the component as a dropdown. This is handled by the VanillaJSDatePicker.

CONCLUSION
The process of implementing an input event listener on the VanillaJSDatePicker was not as straight forward as I expected. Due to the fact that the onChange event is not fired for a text input field which is changed via javascript, I used this function as a utility to listen for text input changes performed by the VanillaJSDatePicker.

This was used to update the text displayed on the component as well as update the state of the VanillaJSDatePicker. I also added features to auto switch the inputs so that one can select the start and end dates without manipulating the text input fields manually. This saves a huge amount of time.

The component is published on my GitHub page https://github.com/rexthonyy/analytics-date-range-picker.git. Feel free to fork and send me your pull requests.

Enjoy!