Show Time: 30 jQuery Calendar Date Picker Plugins

 Posted in Freebies 711 days ago Written by: Valters Bergspics
  • Buffer
  • Pin It
  •  41

Today we will be featuring calendar date pickers to let you output planners, calendars even more easier, most of these date pickers are built on jQuery and jQuery UI (User Interface).

I would consider these date pickers as frameworks with great functionality, but most of them require modifying and some styling, but I think it’s really acceptable since each project needs it’s own design and you should change style of calendar plugin too. These plugins will help you and your visitors keep track what’s happening in specific project and help to organize time!

preview show time jquery calendar date picker plugins freebies

1. Create astonishing iCal-like calendars with jQuery

This is tutorial how to make kind a like iPhone calendar application.

iCal like Calendar calendar date picker freebies

Download NowView Example

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

View Demo

2.1. MagiCalender

 

View Demo

2. BlueShoes JS DatePicker Component

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.

Download Now | View Examples

3. Calendar – A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Download Now | View Example

4. jQuery Calendar Widget Plugin

jQuery Calendar Widget Plugin is a simple jQuery Calendar Widget Plugin with a month view. You can specify which month you would like to display or have it display the current month. With just 100 lines of Javascript code, this plugin is light-weight and perfect for its purpose.

Download Now | View Example

5. JavaScript Calendar Component

Calendar Component that is very customizable and extendable.

Features:

  • Create any numbers of months per calendar.
  • Set the weekend, days off, holidays (dates off), start day of the week.
  • Start and end date.
  • Multi selection with limits or without.
  • Skinnable (using CSS).
  • Can have any number of calendars in any page.
  • Optimized for best performance.

View Example

6. Simple Calendar Widget

This flexible, simple pop-up calendar is written to work across browsers. It’s fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years.

The optional input date determines the initial month displayed. The year can be in two or four digits while the month can be digits or a month name abbreviation that can easily be set up for any language. Any date or day of the week can be disabled (and re-enabled) using JavaScript on the calling page.

This is ideal for combination with server-side technologies to produce a professional application.

Download Now | View Example

7. DatePicker

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

Features:

  • Flat mode – as element in page
  • Multiple calendars in the component
  • Allows single, multiple or range selection
  • Mark dates as special, weekends, special days
  • Easy to customize the look by changing CSS
  • Localiation for months’ and days’ names
  • Custom day to start the week
  • Fits into the viewport

Download Now | View Example

8. Calendar System

Calendar System – the basic calendar.

Download Now | View Example

9. Tigra JavaScript Calendar

Tigra Calendar is a free cross-browser JavaScript Calendar control, it improves the user experience by enabling a drop-down calendar for date fields in HTML forms.

Download Now | View Example

10. Plans

One installation of plans can support many calendars. Calendars can share information with each other. Each calendar is managed independently (unique password, custom options, custom look & feel).

Multiple calendars running on the same installation of plans can be “embedded” in completely different websites. Plans uses a powerful and flexible recurring event model.

Plans supports multiple languages. Weeks can start on days other than Sunday. Plans supports arbitrary date formats (mm/dd/yy, dd/mm/yy, etc.) Plans can store data in flat files or an SQL database.

11. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

  • page up/down – previous/next month
  • ctrl+page up/down – previous/next year
  • ctrl+home – current month or open when closed
  • ctrl+left/right – previous/next day
  • ctrl+up/down – previous/next week
  • enter – accept the selected date
  • ctrl+end – close and erase the date
  • escape – close the datepicker without selection

Download Now | View Example

12. The sliding date-picker

This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates.

Download Now | View Example

13. FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Download Now | View Example

14. Unobtrusive Date-Picker Widget

  • Fully keyboard accessible
  • Multiple date formats and date dividers supported
  • Unobtrusive and nameSpace friendly
  • Fully skinnable with CSS
  • Both upper and lower date limits can be set
  • Certain days of the week can be disabled
  • Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
  • Includes “smart” localisation (16 languages currently available)
  • Bespoke days of the week can be highlighted
  • Works with single text inputs, split text inputs or select lists
  • It’s free to use, even commercially (Released under a CC share-alike license)

Download Now | View Example

15. Simple jQuery date-picker plugin

Features:

  • works on one or more text input elements (<input type="text" ... />)
  • highlights a preset date (first looking for a value in the input, then a passed option / default, then just selects today)
  • closes when either a date is picked, the “today” button is hit, or the “close” button is hit
  • allows fast navigation using a <select> field for months and years
  • advances and reverses months with a hit of the « or » buttons
  • automatically hides the « or » buttons when either the start or end of the date range is reached
  • and much more…

View Example

16. jQuery CalendarPicker

This component is a light-weight calendar/date-picker.

Features:

  • supports internationalization (supports do not necessary means it is implemented:-) )
  • supports changing current date
  • supports mouse wheel scrolling
  • supporting (deferred) callback on date selection
  • supports variable number of years, months and days
  • supports next/prev arrows

Download Now | View Example

17. Timeframe

Timeframe is open source, tested, and available for forking, pushing, and pulling at Github. It can select dates “from – to”.

Download Now | View Example

18. Date / Time Picker

Date / Time Picker is a easy date picker control. To open the calendar, click the icon at the right side of the input box.

Download Now | View Example

19. YUI Library: Calendar Control

This is another example of easy date picker. Calendar has three required dependencies: the YAHOO Global object, the Event Utility, and the DOM Collection.

Download Now | View Example

19.1. PHP Event Calendar

PHP Event Calendar is a MySQL Database driven script that displays events on your website quickly and easily through a traditional calendar UI. It can be integrated into any existing PHP page within minutes using a simple file include.

It features a simple yet advanced Administration Panel with secure login sessions, from within this you have full control over your calendar events and gives the ability to Add Events, Search & Edit Events, Delete Events from your calendar and so forth.

View Demo

20. Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a former version.

Download NowView Example

21. The New Coolest DHTML Calendar

Download Now | View Example

22. jMonthCalendar

jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Download Now | View Example

23. VCalendar

VCalendar (Virtual Web Calendar) is an open source Web calendar application for posting and maintaining events and schedules online, in calendar format. This is an excellent and free solution for use by online Web communities and any commercial and non-commercial organizations. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET (C#); with potential for adding more technologies in the future.

Download Now | View Example

24. PHP Calendar

All day and month names are automatically generated specific to your locale. Allows you to choose what day your weeks start on.

Download Now | View Example

25. Multiday Calendar Datepicker JQuery Plugin

Multiday Calendar Datepicker JQuery Plugin is a nicely animated calendar datepicker for multi-day selection with multi-month display. Allows for a sequence of months to reside side by side and for the user to select a number of consecutive days. This is great for lodging reservation systems, ticket purchasing systems, etc.

Download Now: JS file and CSS file | View Example

26. Easy PHP Calendar

The Easy PHP Calendar is a powerful PHP calendar script that is easily integrated into web sites and is simple to customize. This attractive, full-featured calendar is suitable for display on a calendar of events page, home page, or any other page that needs a calendar.

Download Now | View Example

27. jQuery Date Input

Date Input is a no frills date picker plugin for jQuery. It is lightweight, fast and pretty by default.

Download Now | View Example

28. jQuery DatePicker

jQuery DatePicker is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.

Download Now | View Example

29. dynDateTime

This jQuery plugin makes it easy to add date and time selection to textfield inputs. This supports date and time, and renders the value to a single field in a configurable format.

Download Now | View Example

30. Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Download Now | View Example

 Did you enjoy this article and found it useful?

Valters is 17 years old freelancer from Latvia. His experience in web-building is about 3 years - PHP, xHTML, CSS. He enjoys web-building with different languages. You can follow him on Twitter.
Free Website
 

 41 Brilliant Comments - Join Discussion Now!

  • Shazzad

    Posted 55 days ago
    41

    Hi there, great list of calender plugin. However, i was looking for some kind of week date picker. As like we see on Facebook page availability selector. Is that possible to found ?

  • Jim White

    Posted 70 days ago
    40

    What an innovation. Not anywhere in the entire world. Keep growing and remember, “one step at a time”

  • Prince

    Posted 70 days ago
    39

    Exquisite!

  • priya

    Posted 73 days ago
    38

    I need a calendar in which only 90 days should be enabled from the today’s date. Pls help me out..

  • Litus Info Sys

    Posted 73 days ago
    37

    The EZ Time JS widget takes the bare minimum input and properly formats and validates it. It automatically corrects/removes invalid characters. It is 100% keyboard based being aimed at high productivity for trained users while other Javascript ‘Time Pickers’ require tedious and slow clicking, dragging, and mouse movements which hamper productivity.

    EZ Time JS was developed specifically for serious, heavy loads of data entry and is perfect for scheduling work.

    Here are examples of what you can do:

    INPUT –> OUTPUT
    8 –> 08:00 AM
    515p –> 05:15 PM
    12f –> 12:15 AM –notice the use of shortcut codes, ie., f = 15

    You can leave out spaces and the colon.

    EZ Time JS makes entering time extremely easy.

  • Kursad

    Posted 93 days ago
    36

    Very nice.

  • narowal

    Posted 138 days ago
    34

    hi allz you can find more for this topics. i have found some special for you. visit: http://meranarowal.blogspot.com

    Thnx
    Regards
    Narowal

    • narowal

      Posted 138 days ago
      35

      reply this post for feedback. and tell how to improve this blog.

  • praveen

    Posted 158 days ago
    33

    Hi, this is very useful info, is there any option of, if i want to know the date of after 30 or 60 or 280 days, including all the days ?pls if anthing like with this option pls pls let me know
    Thanks

  • esgee

    Posted 232 days ago
    32

    I have 3 fields that are used to setup an input form.
    [day] [month] [year] (in fact 5 with [hour]:[minutes] also :-)

    Are any of these datepickers compatible to input these 3 fields in 1 selection?
    They all work with 1 date field, right?

  • pankaj

    Posted 248 days ago
    31

    This article is very good !!!!

  • duydong

    Posted 255 days ago
    30

    wow. i like it

  • kamran

    Posted 295 days ago
    29

    hi i need a date picker just like facebook any link or help please!!!

  • Levi

    Posted 323 days ago
    28

    If you’re developing for touchscreens try this component
    http://code.google.com/p/mobiscroll/

    It was specially designed for touch devices, works well on android, iOS. jQuery ThemeRoller ready!

  • G.G.R Singh

    Posted 332 days ago
    27

    Many many Thanks ………………

1 2
US