Using datepickers and calendars on websites have become quite common these days. However, building them from scratch takes a lot of time, as at first you will have to make its design on Adobe Photoshop or any other web design making software such as Adobe Fireworks or Adobe Illustrator. Then you need to focus on its coding part. But not all developers have ample time, and that’s where the jQuery plugins prove to be helpful. And today, I am going to reveal you the 18 Most Popular jQuery Datepicker and Calendar Plugins, that you can use on your site either in a contact form (if it is necessary) or embed one to tell people about the upcoming events.
1: Date Picker
A Datepicker or Calendar should be something which can be configured according to one’s own preferences. And, the jQuery Datepicker plugin is one, which can be configured with ease to add the datepicker functionality to websites. In this plugin, you can customize many things such as the language, the date format, apply the animation effect, display month and year menus, show week of the year, and can also restrict the selectable date ranges and populate alternate field.
Additionally, you can also prefer to opt for its default style, where the calendar get open while in overlay ‘onFocus’ and gets closed automatically ‘onBlur’ or when a user selects his preferred date.
Date Range Picker is a simple yet an effective calendar plugin that one can easily use on a website. However, to integrate this plugin into a website one needs to have jQuery and jQuery UI Datepicker along with the jQuery UI CSS Framework and one additional custom CSS file. Moreover, it also comes pre-integrated with the date.js library that allows easy preset development. Once this plugin is installed and activated on a website, the users get to choose a date from a variety of date ranges, which includes; today, last 7 days, month to date, year to date, previous month, specific date, all dates before, all dates after, and date range (where the users get to choose a start and an end date).
In addition to all this, it offers a wide range of features listed below, that makes it different from others and inclines the users to use it on their website.
- Allows users to pick the dates in a variety of options, which include; single date, multiple or range dates.
- Dates can also be marked as special, weekends, events.
- Customizable CSS empowers the user with a capability to tweak it.
- Months and Days can be set in local language.
- You can set a custom day to start the week.
- It gets fit into any viewport size.
MultiDatesPicker is a little plugin or you can even call it as an extension that adds a great functionality to the existing jQuery UI Datepicker plugin and let the users to select multiple dates. Once it is integrated with the datepicker plugin, people can select the date ranges, pick multiple dates. However, it is up to you to set a maximum number of dates a user can pick. In addition to this, you can also mark the unavailable dates in the calendar.
Do you want to publicize your upcoming events date on your own or on your client’s website to ensure that more and more people will attend it? Just try this oCalendar – a jQuery based event calendar, that comes straight from the hand of a codecanyon’s team. You can buy this plugin’s regular license for just $10. With this plugin, you can add new events, delete the old ones or edit the existing ones via client side. Some of its primary features include;
- Easy integration
- You can also play with its size to make it resizable.
- Users can also search for events.
- It comes in 10 different themes.
- Its language can also be changed.
- Client side addition, deletion, and editing of event is possible.
- It offers database support using json.
glDatePicker is one of the most dynamic, powerful, easy to customize, and an ultra light-weight date picker for jQuery. When it is in compressed state its size stays at 7Kb, and in an uncompressed state its size goes only up to 25Kb. The UI interface of a glDatePicker calendar looks astonishing. As far as its features are concerned, you really get plenty of them, out of which some are listed below.
- Its users can set their own style to current, selected, special dates and individual days of the week.
- Data can also be set to the selected dates.
- Individual styles can also be set per date picker on a same page.
- The month and days of week names can also be customized according to preferences.
The jQuery.minical datepicker plugin can be termed as the second name of ‘super lightweight’, as it only weighs 4KB. It has been developed keeping the modern day needs in mind such as page load speed, and due to its super lightweight, it doesn’t act as an obstacle in attaining super fast page loading speed. In addition to this, it also offers complete keyboard support, which means the user can open and select the dates using the keyboard. For example; By pressing the Enter key, you can open or close the calendar.
In today’s time it has become a necessity to have a mobile site so that you can target the smartphone users to increase your sales. And that’s where jQuery Mobile DateBox comes into play. It’s a robust and intuitive jQuery based Date and time picker plugin made specifically for websites that uses jQuery Mobile, a touch-optimized web framework for smartphones and tablets. It offers multiple data entry modes in six different styles, which includes; Android style date picker, Slide date picker, 12 and 24 hour time picker, Flip wheel style and date picker, Duration time picker, and Calendar style date picker.
Apart from this, the month and day names can also be changed to local language along with all its labels and buttons.
Do you use Bootstrap for making responsive websites? If yes, then you need not to look further for any datepicker and calendar plugin, as Bootstrap itself offers a complete dedicated Bootstrap Datepicker. With this intuitive plugin, you can offer a calendar to your web visitors in a variety of styles, which includes; year’s viewMode, month’s vieMode, multiple date selection mode where a user can select the start date and the end date. The best part about this plugin is that, it is in continous development since it came into existence, which helps to keep it bugfree, and updated.
11: Teamup Calendar
Teamup Calendar is one of the most stylish calendars of today’s time. In fact, with it, you can create your own calendar pretty easily and quickly. With it, you can plan or keep track of anything that is time and date specific. Additionally, you can also make a shared group calendar with better and scalable access control. Moreover, it also offers you an option to export all your events into Google/Outlook/.ics. As far as localization is concerned, other than English it also offers support in German language.
You can even add and edit events and your team members can view or add them to their personal calendar. You can color code events as per priority or you can assign flexible sharing controls to the team members. The calendar comes in 7 different views and you can customize its look and feel.
jQuery Full calendar is a jQuery and AJAX based plugin that can allow you to create full drag and drop event calendar. The user can add an event and display it in the calendar with a simple drag and drop. Similarly they can edit the date and event duration by simple drag and drop in the calendar itself. The plugin uses AJAX to fetch event data in real time so you can assign multiple users to a same calendar.
The calendar has three different views such as month view, week view, and daily view and you can fine tune the duration and exact time of any event using these views itself. Over all it is one of the most user friendly calendar tools available on the internet and the best part about this tool is that it can very easily pick up event feeds from your Google Calendar.
If you are looking for an extremely light date picking plugins, then you don’t have to look anymore. jQuery Calendar Widget Plugin is an extremely light jQuery plugin that can allow you to display month wise calendar. You can customize the plugin to display any given month of the year or any specified month of a specified year. The code is of not more than 100 lines and thus is as basic as it gets. You can customize the code fully as it comes with detailed documentation, not that documentation is required with a 100 line code.
It is a very small, compact, lightweight and highly configurable date picker plugin made using jQuery. It can be easily used to integrate a datepicker functionality in web based forms. Once this plugin is integrated into a form, it displays a short calendar icon besides the input field it is used for. It weighs only 21Kb, which makes it more convenient to integrate it as it doesn’t effects the web page loading speed of a website. The main USP of the Zebra Datepicker is its intuitive interface. Moreover, it’s a cross-browser compatible plugin.
Apart from this, it also empowers you with the capability to customize it to any extent you want. However, for that you should have an expertise in CSS.
Do you want to integrate a datepicker functionality in your web based forms? If yes, then you can easily go with this awesome and popular jQuery Datepicker plugin. It works as a pop-up calendar that gets placed as an icon besides the input field. However, it can also be integrated as an inline calendar to provide the users with an ability to select individual dates or date ranges. In addition to this, you can also convert this plugin into your local language, as it comes with all the necessary localization packages. But that should only be installed after the datepicker code has been integrated on a website.
If you have a website where you need to highlight some event dates or have a contact form where you want your users to select the date to get a call back from your sales or support team, then you can opt for a Multiday Calendar Datepicker jQuery plugin. With this plugin, you can offer your users to pick multiple dates and even months in go. With it, a user can easily select up to 12 days in one click. In addition to this, to make its interface intuitive and more appealing, it offers an animated style for datepicking.
As the name suggest it is only a simple events calendar, with some useful addition features, but the person who has to code such a calendar knows how hard they are to come by. Based on jQuery, Simple Events Calendar is a highly customizable unobtrusive calendar that can be used to efficiently highlight event dates. You can add or edit events in calendar and change the way that the calendar display the dates and the events. IN addition in this plugin you can disable the date picker, customize the hour format, or can be extended by customizing the coding of the plugin itself. The plugin also has support for multiple languages and can be used to create calendars in multiple languages.
Pickadate.js is a mobile friendly and responsive jQuery date picker tool that is both light and attractive. The plugin is equipped with customizable drop selectors, date formats, time intervals, time formats and many more features. In addition it comes with a very detailed feature guide that can be used to understand and customize each and every feature of the plugins. The plugins is build using LESS based style sheets and is built upon a GRUNT based built system. In addition the tool supports jQuery 1.7 and above, and can be easily extended to include addition features that you may want to include. This is possible because the tools use BEM style class naming in its coding.