JQuery Plugins | Calendars, Date Picker and Time Formatting Plugins

Jane — Mon, 04 Jan 2010 09:05:01 +0000

jQuery is one of the most popular Javascript library. Itâ€™s easy to use, flexible, and most of all thereâ€™s a lot of jQuery tutorials and plugins available out which ease the the creation of dynamic effects and web controls. jQuery has become one of the most used JavaScript libraries today and can be found in the core of popular products like WordPress, joomla and Drupal.

Recently, we reviewed couple of jQuery calendar, datePicker/dateSelector and timestamp formatting plugins. It is time to compile these widely used jQuery date/time plugins in a post. So this post is a collection of amazing jQuery Calendar, DatePicker and timestamp formatting plugins.

1. FullCalendar – jQuery Event Calendar with Drag’n Drop, Ajax Fetching and Google Calendar Integration

FullCalendar is a jQuery calendar plugin that provides full-sized, drag and drop capable calendar. It utilizes Ajax to fetch events on the fly. It is easily configurable to use custom feed format and also has an extension for Google Calendar. The calendar is highly customizable and has support for user event triggering for window resize, loading, day click, event click, event drop, etc.

FullCalendar – jQuery Calendar Plugin with Drag’n Drop and Ajax Capabilities

2. jQuery Weekly Calendar – An Easy to Implement Google Calendar like jQuery Calendar Plugin

jQuery Week Calendar is another jQuery Calendar plugin similar to FullCalendar. It provides a simple and flexible way of including a weekly calendar control in to your web pages. It is an extension of jQuery and jQuery IU plugin. jQuery Week Calendar is similar to Google calendar.

jQuery Week Calendar Plugin – A Google Calendar Like Week Calendar

The plugin is compatible with Firefox 3.x, Safari 3.1+, Internet Explorer 7+ and Google Chrome. The look and feel of the plugin is simple but easily editable by adding stylesheet that overrides colors.

3. jQuery Datepicker Plugin – Highly Configurable Datepicker from jQuery UI

The jQuery UI Datepicker is a highly configurable jQuery datepicker plugin. The date format and language can be formatted, the selectable date ranges Â can be restricted and optional buttons and other navigation options can be added easily.

jQuery UI’s Datpicker Plugin

By default, the datepicker is tied to a standard form input field. Focus on the input opens an interactive calendar in a small overlay. Choosing a date, clicking elsewhere on the page or hitting the Esc key closes the control. If a date is chosen, feedback is shown as the input’s value. It can also be used as an inline calendar, by simply attaching the datepicker to a div or span.

jQuery UI’s Datpicker Plugin enables multiple month display

4. jQuery Date Range Selector – An Easy to Implement jQuery Date Range Selector Plugin

Filamentgroup’s Date Range Picker control simplifies selecting a range of values where the data set is very large or the high or the low end is unknown by “All dates before…” and “All dates after…” links. It also automatically controls the number of calendars needed for choosing a range. For example: you only need one calendar to choose “All dates before”, but you need two calendars to select a custom date range.

jQuery Date Range Picker Plugin by FilamentGroup

5. jQuery Multiday Datepicker – jQuery Calendar Plugin for Selecting Consecutive Days/a>

jQuery Multiday Calendar Datepicker Plugin is an animated datepicker calendar for multi-day selection with multi-month display. It allows selection of pre-specified number of consecutive days by providing a sequence of side by side residing months.

jQuery Mutlday Calendar Plugin enables selection of pre-specified number of consecutive days

6. Astonishing iCal like jQuery Calendar Plugin

Astonishing iCal like Calendar is built with CSS and jQuery. It features a lightweight Coda-like effect for event descriptions.

iCal style calendar with jQuery

7. CuteTime – User Friendly, Readable Timestamp Formatting

CuteTime is a jQuery plugin that provides easy conversion of timestamps to formats much cuter. It also has the ability to dynamically update and/or automatically update timestamps on a controlled interval.

While there are other similar tools out there written in JavaScript, PHP and C#, this plugin does exactly what it promisis.

If used as function, a string containing a cuter version of the provided time stamp is returned.

Instead of formal time formatting, Twitter uses more readable timestamp formatting

8. TimeAgo – jQuery Plugin for User Friendly Time Formatting with Multilanguage Support

Timeago makes user-friendly time formatting easier by supporting automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”)

Timeago makes user-friendly time formatting easier by supporting automatically updating fuzzy timestamps.

With Timeago’s automatic updating feature, you take full advantage of page caching in your web applications since the timestamp formatting is done in client side. Also, Timeago refreshes timestamps automatically to avoid timestamps dated “1 minute ago” even though the page was opened 10 minutes ago.

Timeago jQuery Plugin can be used via selectors. In this case, it replaces the text of the provided element with a class of timeago and an ISO 8601 timestamp in the title. If used as function, a string containing a formatted version of the provided time stamp is returned.

ResourcesMix.info » jQuery