ch.Datepicker

Description

Datepicker lets you select dates.

How-to

// Create a new Datepicker.
var datepicker = new ch.Datepicker($el, [options]);

// Create a new Datepicker with jQuery or Zepto.
var datepicker = $(selector).datepicker();

// Create a new Datepicker with custom options.
var datepicker = $(selector).datepicker({
    "format": "MM/DD/YYYY",
    "selected": "2011/12/25",
    "from": "2010/12/25",
    "to": "2012/12/25",
    "monthsNames": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "weekdays": ["Su", "Mo", "Tu", "We", "Thu", "Fr", "Sa"]
});

Parameters

• $el - jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector to create an instance of ch.Datepicker.
• options - Object : Options to customize an instance.
  • format - String : Sets the date format. Default: "DD/MM/YYYY".
  • selected - String : Sets a date that should be selected by default. Default: "today".
  • from - String : Set a minimum selectable date. The format of the given date should be "YYYY/MM/DD".
  • to - String : Set a maximum selectable date. The format of the given date should be "YYYY/MM/DD".
  • monthsNames - Array : A collection of months names. Default: ["Enero", ... , "Diciembre"].
  • weekdays - Array : A collection of weekdays. Default: ["Dom", ... , "Sab"].
• conf.hiddenby - Boolean : Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers".
• options.context - jQuerySelector | ZeptoSelector : It's a reference to position and size of element that will be considered to carry out the position.
• options.side - String : The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom".
• options.align - String : The align options where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "center".
• options.offsetX - Number : Distance to displace the target horizontally.
• options.offsetY - Number : Distance to displace the target vertically.
• options.position - String : The type of positioning used. You must use: "absolute" or "fixed". Default: "absolute".

Extends

• ch.Widget

Properties

.$trigger jQuerySelector | ZeptoSelector

The datepicker trigger.

.field HTMLElement

The datepicker input field.

.uid Number

A unique id to identify the instance of a widget.

.Widget#name String

The name of a widget.

// You can reach the instance associated.
var widget = $(selector).data(name);

Methods

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys a Datepicker instance.

// Destroying an instance of Datepicker.
datepicker.destroy();

.getToday() → {String}

Returns date of today

// Get the date of today.
var today = datepicker.getToday();

.hide() → {datepicker}

Hides the datepicker.

// Shows a datepicker.
datepicker.hide();

.nextMonth() → {datepicker}

Moves to the next month.

// Moves to the next month.
datepicker.nextMonth();

.nextYear() → {datepicker}

Move to the next year.

// Moves to the next year.
datepicker.nextYear();

.prevMonth() → {datepicker}

Move to the previous month.

// Moves to the prev month.
datepicker.prevMonth();

.prevYear() → {datepicker}

Move to the previous year.

// Moves to the prev year.
datepicker.prevYear();

.reset() → {datepicker}

Reset the Datepicker to date of today

// Resset the datepicker
datepicker.reset();

.select(date) → {datepicker|String}

Selects a specific date or returns the selected date.

• date - String : A given date to select. The format of the given date should be "YYYY/MM/DD".

// Returns the selected date.
datepicker.select();

// Select a specific date.
datepicker.select('2014/05/28');

.setFrom(date) → {datepicker}

Set a minimum selectable date.

• date - String : A given date to set as minimum selectable date. The format of the given date should be "YYYY/MM/DD".

// Set a minimum selectable date.
datepicker.setFrom('2010/05/28');

.setTo(date) → {datepicker}

Set a maximum selectable date.

• date - String : A given date to set as maximum selectable date. The format of the given date should be "YYYY/MM/DD".

// Set a maximum selectable date.
datepicker.setTo('2014/05/28');

.show() → {datepicker}

Shows the datepicker.

// Shows a datepicker.
datepicker.show();

.emit(event, var_args)

Execute each item in the listener collection in order with the specified data.

• event - String : The name of the event you want to emit.
• var_args - Object : Data to pass to the listeners.

// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
widget.emit('ready', 'param1', 'param2');

.getListeners(event) → {Array}

Returns all listeners from the collection for a specified event.

• event - String : The event name.

// Returns listeners from 'ready' event.
widget.getListeners('ready');

.off(event, listener) → {Object}

Removes a listener from the collection for a specified event.

• event - String : Event name.
• listener - Function : Listener function.

// Will remove event listener to 'ready' event.
widget.off('ready', listener);

.on(event, listener, once)

Adds a listener to the collection for a specified event.

• event - String : The event name to subscribe.
• listener - Function : Listener function.
• once - Boolean : Indicate if a listener function will be called only one time.

// Will add an event listener to 'ready' event.
widget.on('ready', listener);

.once(event, listener) → {Object}

Adds a listener to the collection for a specified event to will execute only once.

• event - String : Event name.
• listener - Function : Listener function.

// Will add an event handler to 'contentLoad' event once.
widget.once('contentLoad', listener);

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an instance of Widget and remove its data from asociated element.

// Destroying an instance of Widget.
widget.destroy();

.disable() → {instance}

Disables an instance of Widget.

// Disabling an instance of Widget.
widget.disable();

.enable() → {instance}

Enables an instance of Widget.

// Enabling an instance of Widget.
widget.enable();

.require() → {instance}

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your widget.
// For example you should require the collpasible abitliy.
var widget = new Widget(element, options);
widget.require('Collapsible');

Events

'destroy'

Emits when a widget is destroyed.

// Subscribe to "destroy" event.
widget.on('destroy', function () {
 // Some code here!
});

'disable'

Emits when a widget is disable.

// Subscribe to "disable" event.
widget.on('disable', function () {
 // Some code here!
});

'enable'

Emits when a widget is enable.

// Subscribe to "enable" event.
widget.on('enable', function () {
 // Some code here!
});

'hide'

Event emitted when a datepicker is hidden.

// Subscribe to "hide" event.
datepicker.on('hide', function () {
    // Some code here!
});

'nextmonth'

Event emitted when a next month is shown.

// Subscribe to "nextmonth" event.
datepicker.on('nextmonth', function () {
    // Some code here!
});

'nextyear'

Event emitted when a next year is shown.

// Subscribe to "nextyear" event.
datepicker.on('nextyear', function () {
    // Some code here!
});

'prevmonth'

Event emitted when a previous month is shown.

// Subscribe to "prevmonth" event.
datepicker.on('prevmonth', function () {
    // Some code here!
});

'prevyear'

Event emitted when a previous year is shown.

// Subscribe to "prevyear" event.
datepicker.on('prevyear', function () {
    // Some code here!
});

'ready'

Event emitted when the widget is ready to use.

// Subscribe to "ready" event.
datepicker.on('ready', function () {
    // Some code here!
});

'reset'

Event emitter when the datepicker is reseted.

// Subscribe to "reset" event.
datepicker.on('reset', function () {
    // Some code here!
});

'select'

Event emitted when a date is selected.

// Subscribe to "select" event.
datepicker.on('select', function () {
    // Some code here!
});

'show'

Event emitted when a datepicker is shown.

// Subscribe to "show" event.
datepicker.on('show', function () {
    // Some code here!
});