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
Demo
Download
Date Picker is available under the terms of the GNU General Public License.
Source:
- datepicker.js
- datepicker.css
- calendar.png - a default calendar 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
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
- 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).
- locale - a locale string that determines which language and date format to use. Defaults to "en_US".
- 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.
Example:
new Control.DatePicker('my_datepicker', {icon: '/images/calendar.png'});
Example using time picker:
new Control.DatePicker('my_datepicker', {icon: '/images/calendar.png',
timePicker: true, timePickerAdjacent: true});