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

datepickerjquery 10 Useful Date Picker for web development

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

jquerymootols 10 Useful Date Picker for web development

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

vista 10 Useful Date Picker for web development

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

jquerydatepicker 10 Useful Date Picker for web development

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

yui 10 Useful Date Picker for web development
View Demo

6. Unobtrusive Date-Picker Widget

widget 10 Useful Date Picker for web development

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

View Demo

7. jPint Web-Based iPhone Dev

jpent 10 Useful Date Picker for web development

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

ext 10 Useful Date Picker for web development

View calendar entries in a daily/weekly/monthly/quarterly/yearly overview.
View Demo
strong>9. Scal
scal 10 Useful Date Picker for web developmentA Simple Javascript Calendar Based on Prototype
View Demo

10. jsCalendar

jscal 10 Useful Date Picker for web development

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

Incoming search terms for the article:

Related Posts

CalendarPicker - Lightweight jQuery Calendar

jsDatePick - Simple Date Picker Calendar

2 Comments

  1. d1ve2blu3

    05.19.2009

    nice info gan

  2. Thanks for the list! I’m a big fan of the jQuery plugins. The code used in those plugins is always more efficient and effective than your “usual” Javascript calendars. I’ll be sure to check out a few.
    Martijn van Turnhout@Webdesign Roosendaal´s last blog ..Professionele presentatie bouwbureau Holm de Jong My ComLuv Profile