4.4
Rating: 4.4/5 (815 votes)

Date Picker

A date picker control. To open the calendar, click the input box.

Key features:

  • Restrict date selection (min/max)
  • Date range selection
  • Date/time combination selection
  • Keyboard navigation (arrow keys, page up/page down, etc.)
  • Option to post dates to the server as a UNIX timestamp (milliseconds since 1/1/1970)

Note: Date Picker has been redesigned, and no longer supports standalone time picking. For a standalone time picker, see the Time Picker control.

Demo

Date only:

Date and time:

Date and time, localized (es_AR):

Date range picker:
to
Date range panel (try click-and-drag):


No range selected

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> // transform() calls can be chained together Protoplasm.use('datepicker') .transform('input.datepicker') .transform('input.datepicker_es', { 'locale': 'es_AR' }); </script> </head> <body> <input type="text" name="date" class="datepicker" /> </body> </html>

Usage

To create date pickers out of all elements that match a given CSS rule:

Protoplasm.use('datepicker').transform(selector[, options]);

Parameters:

Parameter Required Description
selector yes A CSS rule matching the text inputs to turn into date pickers
options no An object (hash) containing name/value pairs of additional options.

Available options:
icon The icon to display in the right side of the input box
monthCount The number of calendar months to display at one time
layout Layout mode for multiple calendars: 'horizontal' (default) or 'vertical'
range Use date range selection instead of a single date. Requires multiple <input> elements (see rangeEnd below).
rangeEnd The element for storing a date range's end date in. If a rangeEnd element is not specified, it will automatically look for one as a next sibling of element.
minDate The minimum date that is allowed to be selected
maxDate The maximum date that is allowed to be selected
locale A locale string that determines which language and date format to use. Defaults to "en_US". For more details, see the Localization section below.
manual Allow manual date entry by typing (default true)
epoch The date posted to the server will be as a unix
timePicker A boolean value determining whether to display the time picker. Defaults to false.
use24hrs A boolean value determining whether to display the time in AM/PM or 24 hour notation. Defaults to false.
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.

Manual Creation

If you want more control over creation and destruction of the date picker, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:

Protoplasm.use('datepicker');

To create a date picker:

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

To destroy the date picker:

picker.destroy();

For more details, see the API documentation for Control.DatePicker.

Localization

DatePicker bundles in support for es_*, de_*, and en_* locales by default. However, there are additional locales available that will be loaded on demand if requested via the locale option. The current list of available locales is:

  • cs_CZ: Czech
  • el_GR: Greek
  • fr_FR: French
  • it_IT: Italian
  • lt_LT: Lithuanian
  • nl_NL: Dutch
  • pl_PL: Polish
  • pt_BR: Brazilian Portuguese
  • ru_RU: Russian

You can use these locales just like any of the included ones, but be aware that it will make an additional request to the server to load the locale definition.

If you need to create a new locale, it should follow the structure shown below, and saved to a file at <protoplasm.js-dir>/datepicker/locales/<locale-code>.js.

/* File: datepicker/locales/es_ES.js */ Control.DatePicker.Locale['es_ES'] = { dateTimeFormat: 'dd-MM-yyyy HH:mm:ss', dateFormat: 'dd-MM-yyyy', use24hrs: false, firstWeekDay: 1, weekend: [0,6], language: 'es' }; // If your locale uses a bundled language (es, de, en), you can omit this section. 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', '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".

All of the locales above are contributed by Protoplasm users, so please send in any new locales you create so they can be added to the library. If you see any errors in the above locales, please contact me.