A easy to use jQuery datepicker is essential for user experience when building complex forms with date input. Not only because it is faster for visitors but also because entering dates is not trivial at all. Date formats are different and there is a potential risk that the data picked up is not right.

With a jQuery datepicker you can typically enrich your forms in matter of minutes and your users will love it. Most commonly date pickers are designed to open up a click-able calendar popup once users activate a date form field. Once users click the preferred date it will be transferred automatically to the field and is ready for being submitted. Depending on your needs you may go for simple and lightweigth jQuery datepicker plugins that load fast or those that are highly flexible and with tons of features. In this article you should be able to find what you need and I will also give a few tips to help you choose the right jQuery datepicker script. Please note that some are free and a few are premium (typically with a cost below $5). Besides pure date picker scrips you may also consider looking for the more feature rich jQuery calendar plugins.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Tips for choosing a jQuery Datepicker

Before choosing and starting to implement a datepicker scrips please go through these tips

  • Check if there are recent updates and active support: There is always a risk that plugins are suddenly not supported any more and this may introduce unnecessary trouble to your project.
  • Be clear on requirements and choose the right jQuery datepicker type: Some datepicker script are specifically designed for making it easy to add a simple solution to help users pick a date. However other scripts may include tons of features and parameters you can use to fine tune the date picker. For many a simple lightweight script that works right away may be best.
  • A specific area to take serious is the date formats and how they are configured. For multi language sites this can be critical for the function of the date picker.
  • Consider your needs for layout and design. Make sure the plugin is flexible enough and that there are some good examples or a decent documentation to help you in the implementation phase.
  • Programmatic control. Make sure you have the functions and hooks needed to setup (e.g. preloading data) and control the script to make it work with the other form elements.

Now to the jQuery Datepicker Scripts

jdPicker – the ultimate jQuery date picker

jdPicker is a free non obstructive jQuery plugin that enables you to simply add a folding calendar to the HTML input you want your users to select a date in.

In other words it’s a fully customizable jQuery date picker (hence the name) which already embeds a many options and will continue to progress that way.

MORE INFO / DEMO

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

date-range-picker

Really cool jQuery datepicker script with date range picking features.

MORE INFO / DEMO

Calendar – date picker – date field

A field that opens a calendar where you can pick a date. The date that you picked will be entered in the inputbox. Works with jQuery and php class. It is possible to update the layout and text in the popup.

MORE INFO / DEMO by CodeCanyon (premium plugin)

jQuery Datepicker

jquery datepicker

A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required.

MORE INFO / DEMO

jQuery DatePicker

image

Simple jQuery UI date picker extension to allow user to choose date ranges. When user chooses a date, a hidden form is submitted. Uses jQuery 1.6 and jQuery UI 1 .8. Tested in and compatible with IE 6 -9, Firefox, Safari, Chrome, and Opera.

MORE INFO / DEMO by CodeCanyon (premium plugin)

Date Picker jQuery Plugin

Date Picker component with a lot of options and easy to fit in your web application. 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 etc.

MORE INFO / DEMO

Timeline calendar

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.

MORE INFO / DEMO by CodeCanyon (premium plugin)

Zebra_Datepicker, a lightweight datepicker jQuery plugin

Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Users can easily jump between months and years due to the datepicker’s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker’s options.

MORE INFO / DEMO

Timeframe, (JavaScript Datepicker)

Timeframe is an open source JavaScript date picker.

MORE INFO / DEMO

JSCalendar (JavaScript)

image

JSCalendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. By using it, you can set up the coolest calendar in the shortest amount of time.

MORE INFO / DEMO by CodeCanyon (premium plugin)

Datepicker Control, (JavaScript Datepicker)

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.

MORE INFO / DEMO

Multiday Calendar Datepicker JQuery Plugin

multiday

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

MORE INFO / DEMO

jQuery.calendar/datepicker

jquery calendar picker

This component is a light-weight jquery Calendar/datepicker. Some features worth mentioning could be: 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

MORE INFO / DEMO

oClock – Analog Time Picker

oClock is a shiny analog time picker that provides user select time easily. It converts your inputs into an analog clock like date pickers does.

MORE INFO / DEMO by CodeCanyon (premium plugin)

Simple JQuery Datepicker

image

 

Pretty neat jquery Calendar datepicker which works on one or more text input elements and is easy styled with CSS. It is very easy to use this datepicker – just choose your year and month first and then pick some day

MORE INFO / DEMO

jQuery UI Datepicker

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

MORE INFO / DEMO

jQuery Calendar datepicker plug-in

jquery date picker

This jQuery datepicker allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.

MORE INFO / DEMO

simple jQuery datepicker plugin

Simple plugin that works on one or more text input elements (<input type=”text” … />)

Unobtrusive Datepicker Widget Update

unobtrusive date picker

A datePicker ( jquery Calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.

MORE INFO / DEMO

[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]

Author : Lars Vraa

[exec]the_author_description();[/exec]

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares
WordPress Appliance - Powered by TurnKey Linux