Date / Time Picker

Rating: 4.4/5 (31 votes)

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:

Demo

Date only:


Date and time, horizontal layout:


Date and time, vertical layout, localized (es_AR):

Download

Date Picker is available under the terms of the GNU General Public License.

Source:

Global dependencies for all controls:

Usage

Constructor:

var picker = new Control.DatePicker(element, options);

Parameters:

Additional Options:

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});