15+ Useful jQuery Datepicker Roundup

August 26, 2012 · 9 comments

by Lars

jquery-datepicker

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.


ElegantThemes
ThemeForest

Advertisement

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

image

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

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

jquery-datepicker[3]

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

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

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)

blueshoes-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 - 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

image

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

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 9 comments… read them below or add one }

naqqash June 26, 2013 at 12:08 pm

Respected sir i am using both datepicker and form validation plugin libraries on same page but these libraries didn’t perform any thing but when i remove datepicker libraries then the form validation libraries works well and same as other please give me some suggestions by which i could use both libraries on same page

Reply

Mauricio Magnani Jr March 5, 2013 at 9:36 pm

Thanks!

Reply

Dubai website design February 23, 2013 at 11:47 am

Nice post, it looks very helpful for developers. Thanks lars to share.

Reply

guide to buying sports memorabilia and autographed baseballs August 26, 2012 at 3:17 pm

Great post. I will be dealing with a few of these issues as well.
.

Reply

Dinh July 23, 2012 at 6:30 am

I’m sorry, could anyone please show me how to get values from textboxs that set by analog time picker? I can not get the values so that I can save to database.
my code is:

aspx page:

function pageLoad() {
$(document).ready(function () {
$(“#txtStartTime”).oClock({
format: ’12′
//,
// defaultDayPeriod: ‘AM’,
// minInterval: ’1′
});
$(“#txtEndTime”).oClock({
format: ’12′
});
});
}

code behind is:

evDto.TimeEnd = txtEndTime.Value;

————
when I debuging, timepicker is appear and I can pick the time, but in code behine the txtEndtime.value is blank “”

Thank you and would greatly appreciatate for your help!

Reply

Kurumsal Yaz?l?m July 4, 2012 at 7:49 am

thanx for post.
does any one know jq ui alternatid dynamic multiple date picker ?

Reply

Stefan Gabos January 10, 2012 at 7:32 am
Silviu November 11, 2011 at 3:40 pm

This can be added to this list: http://www.eyecon.ro/datepicker/
Thanks to Stefan :)

Reply

Lars August 24, 2012 at 2:09 pm

sure looks great!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics