To recreate this effect try the Date Range Picker. For example Google Analytics uses their own date range picker for visitor data over a specific website. Input range pickers are extremely common with scheduling programs and visual data applications. This offers both a date and a time selection menu, so it’s a fully-featured option no matter what data you’re collecting. However, this file is pretty lightweight, and it doesn’t take much to get it working so even with jQuery you shouldn’t notice any page lags. Pickadate runs on jQuery, so you do need that library as a dependency. This is designed to be mobile-friendly and fully responsive so it’s a great solution for all devices. Pickadate.jsĪnother choice I really like is the Pickadate.js plugin. No doubt this is one of the better date picker plugins just for its design, UX, and features. Plus you can add an optional time parameter using the 12H or 24H clock. With Flatpickr you can customize the initial date, month, and year along with restrictions on which date(s) can be picked. But that’s often what users want: a simple interface to input data and move on. If you take a peek at the examples page you’ll notice this datepicker isn’t very complex.

It’s designed with simplicity in mind so the default UI should blend into any layout. The lightweight Flatpickr plugin is easy to use and even easier to setup.

Datepicker javascript download