Datepicker
A calendar with huge customization options and a variety of ways to display it.
Usage
Here is a simple example of using the datepicker module. When you click on the input, a calendar will appear to select the date.
<input type="text" data-kube="datepicker">
Datepicker works for any elements, as well as for input. Try clicking on the date.
<span data-kube="datepicker" data-format="%F %d, %Y">July 10, 2018</span>
This example shows how to use the trigger element to call datepicker.
// Trigger <a href="#" data-kube="datepicker" data-target="#mytarget" class="icon-kube-calendar"></a> // Target <input type="text" id="mytarget">
The example below shows how to run datepicker as an embed element.
<div data-kube="datepicker" data-embed="true"></div>
Settings
year
Type: Boolean
Number
Default: false
This setting sets the current year of datepicker.
<input type="text" data-year="2010" data-kube="datepicker">
month
Type: Boolean
Number
Default: false
This setting sets the current month of datepicker.
<input type="text" data-year="2010" data-month="10" data-kube="datepicker">
format
Type: String
Default: '%d.%m.%Y'
This setting sets the date format with the following variables:
%d - day of the month %m - a numeric month %F - a full text of a month, such as January or September %M - a short text of a month, three letters %Y - a full numeric year, four digits
<input type="text" data-kube="datepicker" data-format="%F %d, %Y">
embed
Type: Boolean
Default: false
This setting shows the datepicker as embedded element.
<input type="text" data-embed="true" data-kube="datepicker">
target
Type: Boolean
String
Default: false
This option allows to specify the target element where the datepicker sets the date.
// Trigger <a href="#" data-kube="datepicker" data-target="#mytarget" class="icon-kube-calendar"></a> // Target <input type="text" id="mytarget">
selectYear
Type: Boolean
Default: false
This option allows to show the year select in the datepicker.
<input type="text" data-select-year="true" data-kube="datepicker">
sundayFirst
Type: Boolean
Default: false
This setting allows to show Sunday as the first day of week.
<input type="text" data-sunday-first="true" data-kube="datepicker">
startDate
Type: Boolean
String
Default: false
This setting sets from which date you can select the day in datepicker.
The start date format depends on the specified one in the data-format
setting.
By default it is like: 4.07.2018 (dd.mm.yyyy).
<input type="text" data-start-date="4.07.2018" data-kube="datepicker"> <input type="text" data-start-date="July 4, 2018" data-format="%F %d, %Y" data-kube="datepicker">
endDate
Type: Boolean
String
Default: false
This setting sets until which date you can select the day in datepicker.
The end date format depends on the specified one in the data-format
setting.
By default it is like: 14.07.2018 (dd.mm.yyyy).
<input type="text" data-end-date="14.07.2018" data-kube="datepicker"> <input type="text" data-end-date="July 14, 2018" data-format="%F %d, %Y" data-kube="datepicker">
Events
Event | Description |
---|---|
open |
This event fires immediately when the open instance method is called. |
opened |
This event is fired when the datepicker has been opened, will wait for CSS animation to complete. |
close |
This event fires immediately when the close instance method is called. |
closed |
This event is fired when the datepicker has been closed, will wait for CSS animation to complete. |
set |
This event fires when you select a date from the datepicker. Returns the date string with specified format and the date as object with keys: day , month , year .
|
Catch events in your module:
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { datepicker: { set: function(sender, date, obj) { console.log(date); console.log(obj.day, obj.month, obj.year); } } } }); })(Kube);
Catch events from a specific datepicker
Set an ID for the datepicker:
<input type="text" id="mydatepicker" data-kube="datepicker">
Or set data-name
attribute:
<input type="text" data-name="mydatepicker" data-kube="datepicker">
Catch events in your module by the specified ID or data-name:
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { datepicker: { set: function(sender, date, obj) { if (sender._id === 'mydatepicker') { console.log(date); console.log(obj.day, obj.month, obj.year); } } } } }); })(Kube);