10 Useful Date Picker for web development

May 16, 2009 in Web Development by mupet

List of beautiful datepickers and calendars for web that you can use for your 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

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