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.

July 10, 2018
<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);