Date / Time Picker
A date picker control. To open the calendar, click the icon at the right side of the input box. While open, you can use keyboard controls to navigate the datepicker:
- Right arrow: next day
- Left arrow: previous day
- Down arrow: next week
- Up arrow: previous week
- Page down: next month
- Page up: previous month
- Enter: select date
- Esc: cancel selection and close datepicker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.
Demo
Download
Date Picker is available under the terms of the GNU General Public License.
Source:
- datepicker.js - the datepicker source code
- datepicker.css - a default stylesheet
- calendar.png - a default calendar icon
- clock.png - a default clock icon
- prototype-date-extensions.js - date-related extensions to the Prototype library
Global dependencies for all controls:
- Prototype - an excellent Javascript object library
- prototype-base-extensions.js - extensions to the Prototype library
User-contributed Locales:
Usage
Constructor:
var picker = new Control.DatePicker(element, options);
Parameters:
- element - The CSS id of the <input> element
- options - an object with name/value pairs of additional options
Additional Options:
- icon - the icon to display in the right side of the input box
- datePicker - a boolean value determining whether to display the date picker. Defaults to true.
- timePicker - a boolean value determining whether to display the time picker. Defaults to false.
- timePickerAdjacent - a boolean value determining whether to display the time picker next to the date picker (true) or under it (false, default).
- use24hrs - a boolean value determining whether to display the time in AM/PM or 24 hour notation. Defaults to false.
- locale - a locale string that determines which language and date format to use. Defaults to "en_US".
- onSelect - A function to call when the user selects a date. The date object is passed as a parameter.
- onHover - A function to call when the active date changes (when using keyboard navigation). The date object is passed as a parameter.
- Other options currently undocumented
Locales:
DatePicker currently includes support for es_*, de_*, and en_*, but additional locales are easy to add by the user. To add a new locale, after including datepicker.js, see the following example:
Control.DatePicker.Locale['es_ES'] = {
dateTimeFormat: 'dd-MM-yyyy HH:mm',
dateFormat: 'dd-MM-yyyy',
firstWeekDay: 1,
weekend: [0,6],
language: 'es'};
To add a new language, after including datepicker.js, see the following example:
Control.DatePicker.Language['es'] = {
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
'Julio', 'Augosto', 'Septiembre', 'Octubre', 'Novimbre',
'Diciembre'],
days: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
strings: {
'Now': 'Ahora',
'Today': 'Hoy',
'Time': 'Hora',
'Exact minutes': 'Minuto exacto',
'Select Date and Time': 'Selecciona Dia y Hora',
'Open calendar': 'Abre calendario'
}
};
After including the previous code, you could then use the locale "es_ES".
To add new locales that use a combination of a default locale date format ("eu", "us", or "iso8601") and an existing language, you can use the following shortcut:
with (Control.DatePicker) Locale['en_GB'] = i18n.createLocale('eu', 'en');
This would create a new locale that uses Euro-style date formats, with an English interface.
Examples
Create a default datepicker:
new Control.DatePicker('my_datepicker', {icon: '/images/calendar.png'});
Create a date/time picker:
new Control.DatePicker('my_datepicker', {icon: '/images/calendar.png',
timePicker: true, timePickerAdjacent: true});
Example of how to create a datepicker for every text input with a CSS class of "datepicker":
<script language="javascript">
function createPickers() {
$(document.body).select('input.datepicker').each(
function(e) {
new Control.DatePicker(e, { 'icon': '/images/calendar.png' });
}
);
}
Event.observe(window, 'load', createPickers);
</script>