Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Aug 29 2013

    18 Most Popular jQuery Datepicker and Calendar Plugins

    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

    date-picker-jQuery-plugin

    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.

    2: Date Range Picker

    date-range-picker-jQuery-plugin

    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).

    3: Date Picker – jQuery Plugin

    date-picker-jQuery-plugin

    If you are looking for a light weight datepicker or calendar jQuery plugin, then you should really opt for the Date Picker – jQuery Plugin, as it only weighs 55kb, and includes the jQuery, JavaScript and CSS files, along with the images, and instructions to use it. You can easily customize its overall appearance and enhance its functionality by customizing its CSS according to your needs.

    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.

    Features:

    • 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.

    4: MultiDatesPicker

    multi-dates-picker-jQuery-plugin

    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.

    5: oCalendar-jQuery Event Calendar

    oCalendar-jQuery-event-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.

    6: glDatePicker

    gldatepicker-jQuery-plugin

    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.

    Features:

    • 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.

    7: jQuery.minical

     jQuery Plugin

    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.

    8: jQueryMobile DateBox

    jQuery-mobile-date-box

    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.

    9: Bootstrap Datepicker

    bootstrap-datepicker-plugin

    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.

    10: Awesome Date-picker Mootools

    awesome-date-picker-mootools

    No matter if you are an expert in XHTML, CSS and JavaScript or not, as you really don’t need to be an expert to use this fascinating datepicker plugin on your website. It comes pre-packed with some of the most advanced features that you may ever get in a datepicker plugin. And to ensure that no user gets to face problems while installing in on his/her own or client’s website, it has a dedicated installation and usage guide, which tells you everything you need to know about it. With this plugin, you can integrate the calendar in three different UI format to give better user experience to your web visitors.

    11: Teamup Calendar

    teamup-calendar-plugin

    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.

    12: FullCalendar

    full-calendar-plugin

    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.

    13: jQuery Calendar Widget Plugin

    jQuery-calendar-widget-plugin

    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.

    14: Zebra_Datepicker

    zebra-datepicker-jQuery-plugin

    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.

    15: jQuery Datepicker

    jQuery-datepicker

    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.

    16: Multiday Calendar Datepicker JQuery Plugin

    multiday-calendar-datepicker-JQuery-plugin

    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.

    17: Simple Events Calendar

    simple-events-calendar-plugin

    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.

    18: Pickadate.js

    pickadate-jQuery-plugin

    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.

    Posted by ajeet Posted in: tools Comments: 1