Top 10 DatePicker/Calendar jQuery plugins comparison with demo

jQuery plugins are nothing less than a magic box for web developers. You don’t have to code all by yourself for a basic need, the features can be simply added by using jQuery plugins. Less hard-work but quicker completion.

In this article you will find the best 10 jQuery date-picker plugins or extensions for your website. We are also providing a cheat-sheet for those having less time in their hand to read the article. But i will recommend our readers to go through the whole article for better and deeper understanding about all the 10 jQuery datepickers given here.

Name Size(Kb) Browser Particular date/date-range disabling Documentation GitHub Stars
flatpickr 100+ All Good 8,800+
Pickadate 5 All Mid 7000+
Timepicker Addon 80 All Good 2600+
dateTimePicker 48 All Not Available 2000+
Air Datepicker 36 (9KBgZip) All Good 880+
glDatePicker 7 All Good 270+
Zebra Datepicker 30 (9KBgZip) All Good 250+
BeatPicker 20 All Good 40+
Mobiscroll 80+ All Mid Not Available
Calentim All Good Not Available

flatpickr

If you have worked with datepickes earlier, you must have heard about this one. flatpickr is the extremely popular in the competition. It has released its latest version (2.0) with more features & improved qualities.

flatpickr

Features

  • Very powerful & light-weight.
  • Extensible, minimum in size – maximum in performance & UL-Driven without relying on any external libraries.
  • Stylish collection of themes.
  • Easily customizable.
  • Comes with particular date disabling system.

Demo Download

Pickadate.js

Pickadate is a mobile friendly, light weight and responsive jQuery date-picker plugin. The modular CSS here provides easy styling. It doesn’t depend on jQuery. If you need advanced formatting, it will work well with moment.js

pickadate1

Features

  • Size is only 5KB.
  • Supports jQuery 1.7 or greater.
  • Is ARIA-enabled to be WCAG 2.0 compliant. (added in v3.4)
  • Loads a tiny JS and CSS footprint.
  • 40 languages option.
  • Suitable for both touch & keyboard.
  • It Includes a build system based on Grunt.

Demo Download

Timepicker Addon

The timepicker addon basically includes a timepicker to the jQuery UI Datepicker, therefore the both, the slider components (jQueryUI) & datepicker are necessary to use any of these. All the required datepicker options can still be found through the timepicker addon.

adon

P.S: Remember to include jQuery and jQuery UI with datepicker and slider wigits. Maintain the following order while including them in your page:

  • jQuery
  • jQueryUI (with datepicker and slider wigits)
  • Timepicker

Features

  • Can add only time picker or time & date picker both.
  • Easily drag and set process.
  • Can set even time-zone.
  • Can set default interval step of sliding.
  • You can define your own customized control by implementing the create, value, and options methods.
  • Good for both touch screen devices & normal PCs.
  • Drop-down or slide both option available.
  • Cross browser.

Demo Download

dateTimePicker

dateTimePicker, a simple jQuery plugin for date & time inputs. It also has a clean popup system.

dateTimePicker

Features

  • Simple design and very easy to handle.
  • Long-list of options for customization of the date-time picker.
  • Can be shown in 3 different languages: English(en), German(de) and russian(ru).
  • Highlight important dates.
  • Date input mask.
  • Support Callback events .
  • Support inline mode too. You can display the time-date picker without clicking on the input filed (Always displayed).

Demo Download

Air Date-picker

Another easy to use light weight date-picker. It is a customizable, cross browser jQuery plugin. Air Date-picker has everything you may need.

air date picker

Features

  • Light weight.
  • Customizable.
  • Cross Browser.
  • Can disable particular date selection.

Demo Download

glDatePicker

glDatePicker is a very simple, light-weight (compressed version is just 7 KB) & customizable date picker plugin.

gldp3

Features

  • Different styling can be added for present date, selected date, special dates or any particular days of the week.
  • Can set data on some particular dates (that data will be returned as callback when it is selected).
  • Can work as both single date-time picker & date range picker.
  • Customize selection accordingly.
  • Can accordingly customize & restrict one for forward / backwards month selection/navigation.
  • Can customize a month’s name or even a day of the week.

Demo Download

Zebra Datepicker

Using the Boilerplate jQuery plugin developers has created this compact, small but highly configurable jQuery date picker. The zebra datepicker is a cross-browser jQuery plugin that works fine in all modern browsers including the internet explorer 6.

zebra

Features

  • Light-weight – approximately 30KB minified (almost 9KB gzipped).
  • Works as both, date and time picker.
  • Cross-browser.
  • Different themes available. Customizable too.
  • Easy navigation,
  • Can disable some particular date or date-range.
  • Customizable weekend or off days according to different countries.
  • Date pickers can be “paired” – where one or more date pickers will use the value of another date picker as starting date.
  • Supports internationalization.
  • Zebra datepicker is compatible with AMD and CommonJS.

Demo Download

BeatPicker

BeatPicker is another powerful datepicker widget for jQuery. Though it couldn’t earn much star or fork on github but taking a look at the demos will clear all your doubts about it.

beat picker

Features

  • Various Date Formats.
  • Various Position options.
  • Custom Separator.
  • Any particular month’s option can be disabled.

Demo Download

Mobiscroll

A jQuery UI Date picker specially for touch devices. Website of app it can be used anywhere. Focusing on touchscreen devices, mobiscroll has developed an user controllable scroller wheel for picking up date or time. It is easily customizable, so getting the best result is assured. Though the size is greater than 80kb, but with such styling, it is acceptable.

Features

  • Specially designed for touchscreen devices.
  • Reflects a stylish look.
  • Easily controllable.
  • Customization is very easy.
  • Touch replacement of the of jQuery UI date & time picker.

Demo Download

Calentim

Based on moment.js & jQuery Calentim has been developed. One of the most popular one in the business. It can be used both as a range date-time picker or as a solo date-time picker. Drop down or in-line view can be provided. You need to pay some bucks for using this plugin but every penny is worth it.

calentim

Features

  • Can hide some particular parts (header, footer) of the instance.
  • Mobile devices friendly (Supports both the layouts, landscape & portrait).
  • Can set predefined time-date ranges.
  • Can be displayed as inline control mode.
  • Different language option available.
  • Single or raged date-time picker, it can work like both.
  • Sass template & grunt file included.

Demo Download

I hope this article was helpful for you. Let us know in the comment section if we are missing any of the popular jQuery datepicker.

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.

  • Taha Paksu

    Thank you for mentioning my plugin here 🙂 But the documentation is available on the preview page. Can you add a review for the plugin documentation too? There’s also Caleran.

    • Thanks for notifying. We did the correction.