ch.Datepicker
Description
Datepicker lets you select dates.
How-to
// Create a new Datepicker.
var datepicker = new ch.Datepicker([selector], [options]);
// Create a new Datepicker with custom options.
var datepicker = new ch.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
- HTMLElement : A HTMLElement 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"]. -
hiddenby
- Boolean : Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointers". -
context
- HTMLElement : It's a reference to position and size of element that will be considered to carry out the position. -
side
- String : The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom". -
align
- String : The align options where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "center". -
offsetX
- Number : Distance to displace the target horizontally. -
offsetY
- Number : Distance to displace the target vertically. -
position
- String : The type of positioning used. You must use: "absolute" or "fixed". Default: "absolute".
-
Extends
Properties
.Component#name
String
The name of a component.
.Datepicker#name
String
The name of the component.
// You can reach the associated instance.
var datepicker = $(selector).data('datepicker');
.field
HTMLElement
The datepicker input field.
.trigger
HTMLElement
The datepicker trigger.
.uid
Number
A unique id to identify the instance of a component.
Methods
-
date
- String : A given date to select. The format of the given date should be "YYYY/MM/DD". -
date
- String : A given date to set as minimum selectable date. The format of the given date should be "YYYY/MM/DD". -
date
- String : A given date to set as maximum selectable date. The format of the given date should be "YYYY/MM/DD".
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys an instance of Component and remove its data from asociated element.
// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;
.disable() → {component}
Disables an instance of Component.
// Disabling an instance of Component.
component.disable();
.enable() → {component}
Enables an instance of Component.
// Enabling an instance of Component.
component.enable();
.require() → {component}
Adds functionality or abilities from other classes.
// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');
.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.
// Returns the selected date.
datepicker.select();
// Select a specific date.
datepicker.select('2014/05/28');
.setFrom(date) → {datepicker}
Set a minimum selectable date.
// Set a minimum selectable date.
datepicker.setFrom('2010/05/28');
.setTo(date) → {datepicker}
Set a maximum selectable date.
// Set a maximum selectable date.
datepicker.setTo('2014/05/28');
.show() → {datepicker}
Shows the datepicker.
// Shows a datepicker.
datepicker.show();
Events
'destroy'
Emits when a component is destroyed.
// Subscribe to "destroy" event.
component.on('destroy', function () {
// Some code here!
});
'disable'
Emits when a component is disable.
// Subscribe to "disable" event.
component.on('disable', function () {
// Some code here!
});
'enable'
Emits when a component is enabled.
// Subscribe to "enable" event.
component.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 component 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!
});