A date range solution for Pickadate.js

I’m writing today to share a solution to a date picking problem we recently encountered.

To set the scene, a project we recently worked on had two date inputs representing a range. What we needed was a date picker solution to provide not only the core functionality but ideally the ability to select a date range too.

We evaluated a variety of tools and settled upon the jQuery plugin Pickadate.js. We like Pickadate because:

  • We love its contemporary aesthetic. It feels right at home with our designs.
  • It’s responsive, so it looks and feels great on a wide variety of devices.
  • It has a documented API with event hooks for tweaking functionality.

What Pickadate.js lacks out of the box it makes up for in its rich API. You see, while the plugin doesn’t officially support date ranges, you can play with its API to achieve something similar.

I’ve created two instances of Pickadate.js here. One on input.js-date-from and the other on input.js-date-to. The second instance is triggered on the close() method of the former. A user can, of course, select either input on demand too.

The demo has a few rough edges for sure, but it demonstrates the idea.

Pickadate’s API allows for a great deal of custom functionality, such as disabling or highlighting particular dates — but it’s on the developer to make it work. Have a good read through the docs, think creatively and see for yourself what’s possible!