Using DatePicker

Call the date picker via javascript, all options are optional:

$('#datepicker-calendar').DatePicker(options)

Options

Name type default description
date Date | int | String | Array null The currently selected date(s). This can be: a single date, an array of two dates (sets a range when 'mode' is 'range'), or an array of any number of dates (selects all dates when 'mode' is 'multiple'. The supplied dates can be any one of: Date object, milliseconds (as from date.getTime(), date.valueOf()), or a date string parseable by Date.parse().
current Date | int | String today Optional date which determines the current calendar month/year. This can be one of: Date object, milliseconds (as from date.getTime(), date.valueOf()), or a date string parseable by Date.parse(). Defaults to todays date.
inline boolean false true causes the datepicker calendar to be appended to the DatePicker element and shown on the page, false binds the DatePicker to an event on the trigger element
mode String 'single' Date selection mode, one of 'single', 'range' or 'multiple'. Default 'single'. 'Single' allows the selection of a single date, 'range' allows the selection of range of dates, and 'multiple' allows the selection of any number of individual dates.
calendars int 1 Number of side-by-side calendars.
starts int 0 The day that starts the week, where 0: Sunday, 1: Monday, 2: Tuesday, 3: Wednesday, 4: Thursday, 5: Friday, 6: Saturday. Defaults to Sunday.
prev String '◀' Previous link text. Default '◀' (Unicode left arrow).
next String '▶' Next link text. Default '▶' (Unicode right arrow)
view String 'days' Initial calendar view, one of 'days', 'months' or 'years'.
position String 'bottom' Date picker's position relative to the trigger element (non inline mode only), one of 'top', 'left', 'right' or 'bottom'.
showOn String 'focus' The trigger event used to show a non-inline calendar. Defaults to 'focus' which is useful when the trigger element is a text input, can also be 'click' for instance if the trigger element is a button or some text element.
locale hash English Locale text for day/month names: provide a hash with keys 'daysMin', 'months' and 'monthsShort'.

Events

Supply a callback function as an option when the DatePicker is created. Example usage:

$('#datepicker-calendar').DatePicker(onBeforeShow: function(el) { alert('About to show!') })
Name Signature Return description
onRenderCell function(HTMLDivElement, Date) hash Invoked prior to the rendering of each date cell, which allows control over the styling of the cell via the returned hash. The first argument is the datepicker-containing element, the second is the date to be rendered. This function should return a hash, which may contain the following attributes:
  • selected if true, date will be selected
  • disabled if true, date cell will be disabled
  • className css class name to add to the cell.
onChange function(Date | Array, HTMLElement) void Invoked when a date is selected, with this bound to the HTMLElement that DatePicker was invoked upon. The first argument represents the date(s) currently selected: when calendar mode is 'single' this is a single Date object. When calendar mode is 'range', this is an array containing a 'from' and 'to' Date objects. When calendar mode is 'multiple' this is an array of Date objects (or empty array if the only selected date is unselected). The second argument is the element that DatePicker() was invoked upon.
onBeforeShow function(HTMLDivElement) boolean Invoked before a non-inline datepicker is shown, with this bound to the HTMLElement that DatePicker() was invoked upon, ie the trigger element. The argument is the datepicker container element. This function should return a boolean, where true allows the datepicker to be shown and false does not.
onAfterShow function(HTMLDivElement) void Invoked after a non-inline datepicker is shown, with this bound to the HTMLElement that DatePicker() was invoked upon, ie the trigger element. The argument is the datepicker container element.
onBeforeHide function(HTMLDivElement) boolean Invoked before a non-inline datepicker is hidden, with this bound to the HTMLElement that DatePicker was invoked upon, ie the trigger element. The argument is the datepicker container element. This function should return a boolean, where true allows the datepicker to be hidden while false does not.
onAfterHide function(HTMLDivElement) void Invoked after a non-inline datepicker is hidden, with this bound to the HTMLElement that DatePicker() was invoked upon, ie the trigger element. The argument is the datepicker container element.

Methods

The following methods may be invoked on the HTMLElement that DatePicker is tied to.

.DatePicker(options)

Creates and initializes the DatePicker. Accepts an optional options hash.

$('#datepicker-calendar').DatePicker({
  options
})

.DatePickerHide()

Manually hides the DatePicker, applicable only when the picker is not inline.

$('#datepicker-calendar').DatePickerHide()

.DatePickerShow()

Manually shows the DatePicker, applicable only when the picker is not inline.

$('#datepicker-calendar').DatePickerShow()

.DatePickerSetDate(date, shiftTo)

Manually sets the DatePicker current date, and optionally shifts the current calendar to that date.

Arguments
Name type description
date Date | int | String | Array Sets the currently selected date(s). This can be: a single date, an array of two dates (sets a range when mode is 'range'), or an array of any number of dates (selects all dates when mode is 'multiple'. The supplied dates can be any one of: Date object, milliseconds (as from date.getTime(), date.valueOf()), or a date string parseable by Date.parse().
shiftTo boolean if true, shifts the visible calendar to the newly set date(s)
$('#datepicker-calendar').DatePickerSetDate(new Date(), true)

.DatePickerGetDate() : Array

Returns the currently selected date(s) and the datepicker element. An array is returned where the first element is the selected date(s). When calendar mode is 'single' this is a single date object, or null if no date is selected. When calendar mode is 'range', this is an array containing a 'from' and 'to' date objects, or empty array if no date range is selected. When calendar mode is 'multiple' this is an array of Date objects, or the empty array if no date is selected. The second element is the HTMLElement that DatePicker() was invoked upon.

$('#datepicker-calendar').DatePickerGetDate()

.DatePickerClear()

Manually clears any currently selected date(s).

$('#datepicker-calendar').DatePickerClear()