Date picker study

Recently we were faced with an interesting challenge for a date picker component. 

A client wanted to be able to configure flexible ‘periods’ of dates. The start and end dates of these periods had to be configurable, and also non-overlapping. This led to an interesting UX problem. Creating an interface that allows for the creation of any number of periods, that are aware of each other and prevent overlap.

The exact requirements being:

A date picker that allows for selecting a range of dates.

By default, HTML5 has a date picker component. However, this does not allow for the selection of a date range. 

A  date picker that allows for the restriction of dates that can be selected.

In order to prevent periods from overlapping, we need to be able to limit the selection of dates.

Keeping tabs on the existing periods

We need to have a reference for what dates have currently been selected, in order to specify which can’t be selected.

We’re going to tackle these challenges one at a time – much as should be done when thinking about programming!

Firstly #1, a date picker that allows for specifying a beginning and an end date as opposed to a single day. We recently began using Vue 3 here at Steadfast to take advantage of the performance gains and other excellent features added in this release. This does create an issue though, as a lot of excellent third-party plugins and libraries only supported Vue 2 as of the creation of this project. After searching for a while we were able to locate the perfect component, handily titled Vue 3 Datepicker. This date picker came with a prop that handles exactly what we need – range selection.

Now for challenge #2, the ability to restrict certain dates.

Killing two birds with one stone, vue-date picker also supports a ‘disabled dates’ prop. Allowing us to pass an array of dates, disabling their selection within the date picker!

The final challenge is where things get interesting. The Vue 3 Datepicker does have a prop for disabling dates. But therein lies the problem. It has to be individual dates specified, not a date range. So we have to figure out a way to calculate from our date ranges each individual day that should be restricted from the selection.

Firstly we construct an array that keeps track of each period – inputted by a modal as shown below:

This gives us a way of storing and manipulating each date range the user creates.

Now from this array, we want to create another array via a computed property. This computed property needs to iterate over each date range and add every day that exists between the two dates. 

This computed property uses another function shown below in order to actually determine the list of dates necessary.

We then return that computed array into the date picker as the ‘disabledDays props’.

This results in our restricted date range selection! Removing the chance of user error when generating these periods.

This date picker is a great example of leveraging open source tools (the vue-3 date picker), whilst using your own code to get the most out of them.

Happy hacking!