10 Useful Date Picker for web development

List of beautiful datepickers and calendars for web that you can use for your web development.

1. jQuery UI Datepicker plugin

The jQuery UI Datepicker is a highly configurable plugin. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. 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

View Demo

2. 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. This calender was completely re-written for Mootools.

Features

• Style-able and semantic XHTML
• Future / past calendar restrictions (and more)
• Highly configurable use of inputs and selects
• Multi-calendar support (with padding)
• Variable navigation options
• Multi-lingual and fancy date formatting

View Demo

3. Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

Features

• Authentic Vista look-and-feel
  • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
  • Smooth transition animations
• Customizable features
• Lightweight

View Demo

4. Date Picker - jQuery plugin

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

View Demo

5. YUI Calender

View Demo

6. Unobtrusive Date-Picker Widget

An attempt at writing a datePicker (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.

Feature

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

View Demo

7. jPint Web-Based iPhone Dev

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.
Supported Environments

• iPhone
• Safari and Firefox as a standard web page
• Google Gadgets for the aforementioned browsers
• Coming soon: Internet Explorer

View Demo

8. Extension:Calendar

View calendar entries in a daily/weekly/monthly/quarterly/yearly overview.
View Demo
strong>9. Scal
A Simple Javascript Calendar Based on Prototype
View Demo

10. jsCalendar

This tool is easy to use and is well documented. It has several high quality color themes and it’s translated into a lot of languages.
View Demo