When you hear the words, ‘DateTime Pickers,’ what’s the first thought that comes to mind? Did you imagine someone pulling their hair out? If so, you are not alone.
DateTime Pickers are positioning tools used to help ensure the accuracy of the data on web forms. Sounds good in theory right? But, the truth is, many of the DateTime Pickers available are quite tedious and some are just plain old counterintuitive.
And with so many options to choose from, how can you know which one is best for your needs? Never fear, we’ve compiled a list of 31 of the best, free jQuery DateTime picker plug-in available to help you narrow down your options.
This is jQuery’s default Datepicker and it is tied to a standard form input field. Plus, it comes with a variety of options that include icon trigger, formatting date, and min and max date settings.
This customizable and lightweight date-picker is only 7kb when compressed. It gives users the choice to style date range, special dates, current date, and more.
This lightweight jQuery UI bootstrap theme is relatively easy to use. Simply add the theme CSS to change your date-picker style and you’re done.
This jQuery Mobile plug-in supports a variety of different styles, like slide style, Flip style, Full Calendar display, and Android style. Plus, not only is it fully localized, it supports over 40 languages as well.
Using Twitter Bootstrap? This clock-style time picker can be attached to any component like div, button, or input. It also comes with built-in support for events, methods, and options.
One of the unique aspects of this date-picker and calendar widget is that it supports the Persian calendar. It also supports all the major browsers and is released under GPL stipulated terms.
This plug-in was created works excellently on both mobile devices and PCs. Plus, it has a flat UI and gives users the ability to change values by editing the textbox directly or by using the + or – keys.
8. Any Time
This easy to use date-picker gives you the ability to format both the date and time in any way that you choose. It was designed with speed in mind and supports both the 24-hour and 12-hour clock.
This simple, but powerful, date-picker requires jQuery 1.8+for optimal operation. It can be customized with several options and detailed documentation is available as well.
10. Mobi Pick
This Android-style date-picker widget uses the XDate date library and was designed for use with jQuery mobile. Plus, it uses Modernizr to allow progressive enhancement of date input fields.
This clock-style date picker supports all the major browsers. It works great on both desktop PCs and mobile devices and provides you with 15 options to customize the plug-in.
12. Calendar Picker
This lightweight calendar has built-in internationalization as well as the ability to use the Next and Previous arrows for easier navigation. Plus, it lets you change the current date.
This lightweight plug-in consists of a mere 300 lines of coffee-script but features over 10 customizable options and 3 API methods. It also comes with full keyboard support.
Marketed as a better calendar, this plug-in is not only draggable; it lets users select a date range as well. Plus, when you set the corresponding option, multiple months can be shown at a time.
Although this plug-in doesn’t need jQuery, it’s still worthy of your consideration. It supports both time and date picking and lets you select the start day in the calendar.
jQuery 1.7+ is required to run this lightweight and mobile-friendly date time picker. It is available in over 40 languages and has a number of features, like month/year selectors, that come in quite handy.
There are a ton of Datepickers on the market, but time-pickers are a little harder to find. Timepicki is a lightweight time selecting plug-in that also allows you to set a time limit for your project.
This simple date-picker plug-in can also be used as a calendar. It also gives you the option to select a specific date range or a special event.
19. Zebra Datepicker
Made by Stefan Gabos, this compact date-picker comes with two themes and can be easily customized with CSS. Plus, its user interface makes picking select months and years quick and simple.
This plug-in needs both jQuery and dimmention.js to function and is purely for selecting the time. It is also highly customizable and comes with 10 options for you to choose from.
21. Zebra Datepicker
Not to be confused with the date-picker from #19, this plug-in is made by Stefan Petre and gives you the ability to place several calendars on one page. Plus, CSS makes it easy to customize the style and it is great for responsive designs.
When in its default state, this plug-in works like a simple date picker. But, it features many customizable options that enable you to perform more advanced functions.
23. jQuery Date Picker
This unobtrusive jQuery plug-in was designed to be extensible and flexible. It gives users the ability to easily add date picking functionally to their pages and web-forms. Plus, it can be used in a multitude of ways to can add calendar widgets to your website.
24. Responsive Calendar
This fully responsive calendar lets you add or remove events relatively easily. It uses CSS3 with backward compatibility and HTML5, but it is not free for commercial use.
25. Bootstrap DatePicker
This bootstrap styled date-picker has 2 dependencies, jQuery, and bootstrap. The picker can be activated by either calling plug-in API function or using data attributes.
Like Rome, Calendar isn’t a jQuery plug-in, but it’s still worth a gander. It was created with validation, usability, and accessibility in mind and will add an unobtrusive date-picker to your form elements
27. jQuery DatePicker
This MIT licensed plug-in gives you the option to display the calendar box as an inline or pop-up. It also features an option for selecting either a date range or individual dates.
28. Tigra Calendar
By default, this plug-in displays two calendars for users to select the proper date range. It features several events, functions, and options that you can customize and is dependent on jQuery, Moment.js, and bootstrap.
31. Foundation Datepicker
This feature-light date-picker supports different date formats, like combinations of D, M, DD, MM, and YYY. It also has built-in methods to place, show, and hide the picker.
There are literally thousands of date-pickers to pick from on the internet, but they aren’t all created equal. Using the above list will help you narrow down your options so you can choose the best option for your needs.