60+ Best jQuery, Bootstrap Datepicker & Calendar Plugins

The dev and designers widely have used the date picker and calendar for their designs and development. The given Plugins are the best 60+ plugins for date picker and calendar in jquery, Bootsrap and JSON. It can help for when there require a date input, Calendar input, Event Calendar, Time picker, Booking Calendar, DateTimePicker, Multiple  date picker and word press date pickers .  I hope all are loved these awesome date pickers and calendars.

 

1. The Problems with JS Calendars & Datepickers

The Problems with JS Calendars & Datepickers
 

 

2. FullCalendar

Drag & Drop functionality offers an interactive atmosphere.
Sortable views for days, weeks, or months.
Optional connectivity with Google Calendar.
Insanely detailed documentation for developers.

FullCalendar

FullCalendar

 

 

3.glDatePicker

An ultra-simple, customizable,
light-weight date picker plug-in
for jQuery at just over

glDatePicker

glDatePicker

 

 

4. ClockPicker

A clock-style timepicker for Bootstrap (or jQuery).All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.oth desktop and mobile device are supported. It also works great in touch screen device.

ClockPicker

ClockPicker

 

 

5. Zabuto Calendar

This library is a jQuery plugin for Bootstrap that lets you add a month calendar to your web page.

You can customize the display of the calendar and view it in several languages. You are also able to show calendar events by using an AJAX request with JSON data and add a legend.

You can add a function to the calendar to execute when the onclick event is triggered on a specific day

 

 

6. Verbose Calendar

The fullscreen minimalist interface is well-designed and full of ingenuity.
Verbose Calendar is laid out horizontally instead of vertically. Dates and months are easier to access.
All click events are handled through a callback method. This requires some knowledge of jQuery but offers a lot more control over the functionality.

Verbose Calendar

Verbose Calendar

 

 

7. Booking Calendar PRO (jQuery Plugin)

This item is ideal if you want to add information about bookings to your rentals website. The Back End is easy to use and can be easily integrated into your own CMS as the Front End can be easily integrated into your website. Both Back End and Front End can be customized separately, and the number of usages on your webpage or website is unlimited.

Booking Calendar PRO (jQuery Plugin)

Booking Calendar PRO (jQuery Plugin)

 

 

8. Calendario

A jQuery calendar plugin for creating flexible calendars.Calendario provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month.

Calendario

Calendario

 

 

9. CLNDR.js

This plugin provides specific details and dates that make it the dynamic event viewer. This plugin is easy to match or fit any website and is responsive (every screen size) too.

CLNDR.js

CLNDR.js

 

 

10. Simple Event Calendar

With Simple Event Calendar, visitors can read every event through bots or crawlers, as they are coded into HTML. It also provides a clean design for a compatible interface.

Simple Event Calendar

Simple Event Calendar

 

 

11. DateTimePicker

DateTime Picker is a quick highly customizable jQuery plugin. The design is clutter free & well suited for embedding it into mobile application development.Users can change values using +/- buttons or type values directly into the textbox by selecting each value fields.For web, picker can be binded relative to reference element, were it will appear at the bottom of the element. For mobile, the picker can appear as a dialog box covering entire window.

Simple Event Calendar

Simple Event Calendar

 

12. Simple Event Calendar

The “Personal list” feature works like a dynamic events list.
Clean, minimalist design for a widely compatible interface.
Each event is coded into HTML so it can be indexed and read via bots/crawlers.

Simple Event Calendar

Simple Event Calendar

 

 

13. e-Calendar

Calendar content is managed through JSON.
Date & time info for individual events.
Easy to limit navigation of previous or future months.

e-Calendar

e-Calendar

 

 

14. DateTimePicker

DateTime Picker is a quick highly customizable jQuery plugin. The design is clutter free & well suited for embedding it into mobile application development.Users can change values using +/- buttons or type values directly into the textbox by selecting each value fields.For web, picker can be binded relative to reference element, were it will appear at the bottom of the element. For mobile, the picker can appear as a dialog box covering entire window.

DateTime Picker Free

DateTime Picker Free

 

 

15. Simple Events Calendar JS

Professional & Elegant Calendar, special for Modern web designs, templates etc. Details: jQuery Framework Methods, Options & Events Languages Support Recurring Events (Daily, Weekly, Monthly, Yearly) Example demos included Simple to Customize Well Documented

Simple Events Calendar JS

Simple Events Calendar JS

 

 

16. Datepair Plugin for jQuery

jquery.datepair is a lightweight jQuery plugin for intelligently selecting date and time ranges, inspired by Google Calendar. Datepair will keep the start and end date/times in sync and can set default values based on user action. The plugin does not provide any UI widgets; it’s preconfigured to work with jquery-timepicker and Bootstrap Datepicker, but you can use it with any datepicker or timepicker (or none at all).

Best Datepair Plugin for jQuery

Best Datepair Plugin for jQuery

 

 

17. Pikaday

 
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.Lightweight (less than 5kb minified and gzipped).No dependencies (but plays well with Moment.js.Modular CSS classes for easy styling

Pikaday

Pikaday

 

 

18. DZS jQuery Mini Events Calendar

Easy install – purchase, download the zip, read the docs sample setup included – a sample setup with the plugin to show an example on how it can be configured dzs tooltips included – a tooltip plugin from our portfolio is included to provide rich experience to your users two skins – default and black iPhone/iPad compatible – this plugin is compatible with iToys, even Android works major browsers support – IE7, IE8, IE9, IE10, Chrome, Opera, Safari and Firefox fully tested html supported – inline content is no problem for this plugin

DZS jQuery Mini Events Calendar

DZS jQuery Mini Events Calendar

 

 

19. jQM Calendar

The most convenient fullscreen calendar for jQuery Mobile.
Customizable theme and content for calendar events.
Lightweight! JS+CSS files come out to ~14KB.

jQM Calendar

jQM Calendar

 

 

20. Multiple Dates Picker

Being an extension to jQuery UI DatePicker you need to include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker.

Multiple Dates Picker

Multiple Dates Picker

 

 

21. DateTimePicker

Offers many different formats for date & time selection.
Requires just a single line of JS code to operate.
Themeable CSS file with documentation.

DateTimePicker

DateTimePicker

 

 

22. Datepair.js

Documented options and methods for hand-written code.
Specifically built for range selection between two datetime periods.
No dependencies but can optionally work with jQuery, Zepto, or Bootstrap.

Datepair.js

Datepair.js

 

 

23. Timepicker

A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.

Timepicker

Timepicker

 

 

24. Bootstrap Date Paginator

A jQuery plugin which takes Twitter Bootstrap’s already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.

Bootstrap Date Paginator

Bootstrap Date Paginator

 

 

25. jQuery UI DateRangePicker

A jQuery UI widget similar to the date range picker used in Google Analytics; supports multiple months, custom preset ranges and smart positioning; ThemeRoller-ready and mobile-friendly.

jQuery UI DateRangePicker

jQuery UI DateRangePicker

 

 

26. jQM DateBox

DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a colloborative work, with a full range of features allowing easy implementation, and painless extensibility.

jQM DateBox

jQM DateBox

 

 

27. Pikaday

 
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.

Pikaday

Pikaday

 

 

28. Flat DateTime Picker

Responsive Flat design jQuery based DateTime Picker for Web & Mobile

Flat DateTime Picker

Flat DateTime Picker

 

 

29. JQuery Mobile Date Navigation

JQuery Mobile Date Navigation

JQuery Mobile Date Navigation

JQuery Mobile Date Navigation

 

 

30. Date picker jquery pluging free download

Date Picker component with a lot of options and easy to fit in your web application.

Date picker jquery pluging free download

Date picker jquery pluging free download

 

 

31. Kalendar Pro

A plugin which serves the user with ease. No troublesome configuration needed. Just the most awesome Kalendar ever built.

Kalendar Pro

Kalendar Pro

 

 

32. Timeline calendar

Timeline is simple JavaScript driven calendar, which is written on top of jQuery JavaScript framework. Timeline is a horizontal representation of days in month. It can be used to display unlimited number of events with their descriptions.

Timeline calendar

Timeline calendar

 

 

33. PickMeUp

Really simple, powerful and customizable datepicker.

PickMeUp

PickMeUp

 

 

34. jQuery Flat Event Calendar Responsive Timeline

It’s a responsive event calendar. It can also be used as a timeline. It’s suitable both for responsive and fixed layout. Its features : Flat UI. Supported by all major browsers. Responsive design. 5 layouts included. Own layout can be customized. Almost fully css customizable. Metro and iOS7 inspired.

jQuery Flat Event Calendar Responsive Timeline

jQuery Flat Event Calendar Responsive Timeline

 

 

35. EvenTouch Calendar

This item represents an events calendar, offered as a jQuery plugin. It looks like Google Calendar (the first one on CodeCanyon), but in a simpler way. It is composed in two parts : Horizontal month calendar (to go to a certain date easily) Week calendar (the main calendar, we can go to previous/next weeks with it) The calendar manage the time with half hours (so, 48 cells a day), and it authorizes only one event at a T time. It uses HTML / CSS / JS.

EvenTouch Calendar

EvenTouch Calendar

 

 

36. Ion.Calendar

jQuery-calendar and datepicker,based on powerful library to work with time – Moment.js

Ion.Calendar

Ion.Calendar

 

 

37. oCalendar -jquery Event Calendar Plugin

oCalendar is a jQuery plugin that allows you to add an event calendar to your sites or projects easily. You can add, edit and delete events from the client side.

oCalendar -jquery Event Calendar Plugin

oCalendar -jquery Event Calendar Plugin

 

 

38. Rome

Customizable date (and time) picker. Opt-in UI, no jQuery!

Rome

Rome

 

 

39. jCal

Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version.

jCal

jCal

 

 

40. Filthypillow

Options for pulling the current time.
Keyboard shortcuts are built into the plugin code.
Easy to save and pass dates into backend functions.

Filthypillow

Filthypillow

 

 

41. Ion Calendar

Ion.Calendar based on powerful library to work with time – Moment.js.
Supports all languages, date formats and parsing abilities as Moment.js.
Calendar and datepicker in one.
Is fully customizable via CSS.

Ion Calendar

Ion Calendar

 

 

42. CSS3/jQuery UI Calendar

In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro made by Vladimir Kudinov. To do it we will use CSS for all the styling and for “functionality” we will use jQuery and jQuery UI. From jQuery UI we will only use the “Datepicker” script. So you don’t have to download all the components available in jQuery UI and the file size will be lower.

CSS3/jQuery UI Calendar

CSS3/jQuery UI Calendar

 


43. Bootstrap Datepicker

This is a fork of Stefan Petre’s original code; thanks go to him for getting this thing started!

Please note that this fork is not used on Stefan’s page at this time, nor is it maintained or contributed to by him.

Bootstrap Datepicker

Bootstrap Datepicker

 

 

44. HTML5 Datepicker with Fallback

 
Few developers are willing to push new standards because browser technology is often lacking in support. But HTML5 has been growing rapidly and seen a tremendous increase in general browser acceptance.

This tutorial written by TJ VanToll explains how to build an HTML5 type=”date” input field using jQuery as a fallback. It offers the best of both worlds incorporating a newer HTML5 input with a more trustworthy jQuery UI alternative. Each step is easy to follow and there are plenty of live demos throughout the article.

HTML5 Datepicker with Fallback

HTML5 Datepicker with Fallback

 

 

45. WP Post Editor Datepicker

Tuts+ does a lot of multi-post tutorials which are broken up into series. This series is one such example written by Tom McFarlin who outlines the process of adding a datepicker into the WordPress post editor. All of the code is phenomenal and it’s very easy to understand. Although not everyone likes to use WordPress, it is a popular CMS for both personal and professional web projects.

WP Post Editor Datepicker

WP Post Editor Datepicker

 

 

46. Continuous Calendar

Date picker and date range selector with scrollable months instead of paged.

Continuous Calendar

Continuous Calendar

 


47. jQuery Time Picker


This plugin allows you to customize the text box. After click on them you see the window, where you can select the destination time.

jQuery Time Picker

jQuery Time Picker

 

48. Mobi Pick


Mobi Pick is an Android-style datepicker widget for jQuery Mobile. It uses the date library XDate and allows progressive enhancement for date input fields using Modernizr.

Mobi Pick

Mobi Pick

 

 

49. RegalCalendar


Regal Calendar is a component that allows you make known your events every day, let your visitors see when your event starts, the location via google maps and confirm their attendace via Twitter.

RegalCalendar

RegalCalendar

 

50. Jalendar – Premium Calendar and Events Plugin

 
Jalendar.js is premium jQuery plugin for calendar and events. You can use this plugin for show and add your events.

Jalendar – Premium Calendar and Events Plugin

Jalendar – Premium Calendar and Events Plugin

 

 

51. Timepicker for Twitter Bootstrap


A simple timepicker component for Twitter Bootstrap.

Timepicker for Twitter Bootstrap

Timepicker for Twitter Bootstrap

 

 

52. Datepicker for Bootstrap

Add datepicker picker to field or to any other element.

Datepicker for Bootstrap

Datepicker for Bootstrap

 

53. jQuery Range Calendar Plugin


jQuery Range Calendar is a new approach to a classic calendar. It allows you to select a range of dates simply by resizing the right edge with an easy drag and drop. The calendar is perfect for short and medium range selection.f

jQuery Range Calendar Plugin

jQuery Range Calendar Plugin

 

54. Jquery mobile event calendar

 
Jquery mobile based event calendar. Utilizing the powerful Jquery mobile framework to create and display an event calendar for your mobile or mobile web projects.

Jquery mobile event calendar

Jquery mobile event calendar

 

 

55. Date Range Picker for Bootstrap


This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates.

Date Range Picker for Bootstrap

Date Range Picker for Bootstrap

 

 

56. pickadate.js


The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate.js

pickadate.js

 

 

57. jQuery Time Picker


Improve your forms with this usable and easy to deploy jQuery time picker.

Design your own background! (original PNG file provided with 2 examples included)

– Slider works with keyboard cursors (jquery UI Slider)
– Useful and intuitive
– Easy deployment (jQuery plugin)
– Well commented source code

jQuery Time Picker

jQuery Time Picker

 

 

58. jQuery Verbose Calendar


jQuery Verbose Calendar

jQuery Verbose Calendar

jQuery Verbose Calendar

 

 

59. xgcalendar


xgcalendar

 xgcalendar

xgcalendar

 

 

60. jQuery.minical : A lightweight Datepicker plugin


Minical is teeny (~300 lines of Coffeescript), and has no dependencies other than jQuery, its icon PNG and stylesheet (which has SASS variables for easy customization).

It has full keyboard support and also defaults to make the associated input read-only, so its value can only be changed by the date format specified in the plugin, alleviating unexpected JavaScript date-parsing drama. (It also works great on mobile, with just enough touch event handling to behave properly.)

jQuery.minical : A lightweight Datepicker plugin

jQuery.minical : A lightweight Datepicker plugin

 

 

61. wdCalendar


wdCalendar is a jQuery plugin that enables us to create an event calendar that functions similar to the popular Google Calendar. With a drag’n drop interface and feature-rich API, it is possible to create, update or delete events easily. It has custom views for day, week or month where you can easily go to a selected date (also with the help of provided JS methods). Usually, multi-day events are complicated; however, wdCalendar handles them well.

wdCalendar

wdCalendar