Call the date picker via javascript, all options are optional:
$('#datepicker-calendar').DatePicker(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'. |
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:
|
| 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. |
The following methods may be invoked on the HTMLElement that DatePicker is tied to.
Creates and initializes the DatePicker. Accepts an optional options hash.
$('#datepicker-calendar').DatePicker({
options
})
Manually hides the DatePicker, applicable only when the picker is not inline.
$('#datepicker-calendar').DatePickerHide()
Manually shows the DatePicker, applicable only when the picker is not inline.
$('#datepicker-calendar').DatePickerShow()
Manually sets the DatePicker current date, and optionally shifts the current calendar to that date.
| 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)
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()
Manually clears any currently selected date(s).
$('#datepicker-calendar').DatePickerClear()