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

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);