Beautiful datepickers and calendars for web developers

Datepickers and calendars are elements you need often to implement in web applications with some advanced features. Starting from zero can be a very hard work, expecially if you don't have big familiarity with Javascript.

This list include some of my preferred simple to implement and customize datepickers and calendars, for beginner and professional web developers. I suggest you to try in order to simplify your developing process and save a lot of time reusing code already written. The result is really amazing!

1. jQuery datepicker
This is a default datepicker implemented using jQuery UI which is tied to a standard form input. The calendar opens in a small overlay onFocus and closes automatically onBlur if a date if selected. You can also use the keyboard 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


2. jQuery Date Picker plugin
This is an other interesting jquery datepicker 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
- Localiation for months' and days' names
- Custom day to start the week
- Fits into the viewport

3. Calendar 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 implemented and completely re-written for Mootools.

This class include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Take a look about how Calendar might enhance the accessibility, usability and validation of form elements on your website.


4. YUI Calendar
YUI Calendar uses Yahoo! UI library to implement a default calendar you can use as datepicker. It's very simple to implement, highly customizable and the final result is clean and elegant.
This basic example walks you through the steps needed to get a default Calendar up and running. It covers the set of file dependencies which need to be included as well as the basic markup and JS code required to get you started.


5. Unobtrusive Date-Picker Widget
This elegant datePicker 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. Take a look here for the demo.

A quick feature list:

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


6. Scal
Scal is a simple, javascript calendar/date picker based on the Prototype js library, simple to implement and to customize using default themes or creating custom themes changing CSS some lines of CSS code.

7. Ext JS Extension:Calendar
Ext JS Extension:Calendar is a daily, weekly, monthly, quarterly, yearly calendar extension which you can use to implement very complex applications Google Calendar or Outlook Calendar like.


8. jPint
jPint is a set of libraries designed by Journyx to allow developers to build web-based applications that look and feel as much like native iPhone apps as possible, while retaining the ability for those apps to be used by people who, for whatever reason, don't actually have an iPhone handy. Take a look at this nice iPhone like calendar.