For a couple of days, I have been working on finding the best-looking and the most customizable calendar and datepicker controls. Previously, I wrote about two calendar controls: iCal like Calendar with jQuery and FullCalendar - jQuery Event Calendar with Ajax.
The jQuery UI Datepicker is a highly configurable jQuery datepicker plugin. The date format and language can be formatted, the selectable date ranges can be restricted and optional buttons and other navigation options can be added easily.
jQuery UI's Datpicker Plugin
By default, the datepicker is tied to a standard form input field. Focus on the input opens an interactive calendar in a small overlay. Choosing a date, clicking elsewhere on the page or hitting the Esc key closes the control. If a date is chosen, feedback is shown as the input's value. It can also be used as an inline calendar, by simply attaching the datepicker to a div or span.
You can also use keyboard shortcuts to control 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
jQuery UI's Datpicker Plugin enables multiple month display
The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures.
More details can be found here.
Want automatic updates?
Subscribe to our RSS feed
Get Email Updates
sent directly to your inbox!