Documentation

Use Case

Default

You can use calendar plugin to insert single line, Easy .

$('.calendar').pignoseCalendar();

Set initialize date.

You can set initialize date to giving date option.

// This calendar is starting date to '2017-09-01'.
$('.calendar').pignoseCalendar({
    date: moment('2017-09-01')
});

Events

select

The default event to catch date changes.

$('.calendar').pignoseCalendar({
    select: function(date, context) { 
        /**
         * @params this Element
         * @params date moment[]
         * @params context PignoseCalendarContext
         * @returns void
         */

         // this is selected button Element.
         var $this = $(this);

         // You can get target element in `context` variable, This element is same `$(this)`.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;

         // Selected dates (start date, end date) is passed at first parameter, And this parameters are moment type.
         // If you unselected date, It will be `null`.
         console.log(date[0], date[1]);
    }
});

click

click event has difference when compare with select,

click catch only clicking some date button.

select catch date changes event and pass the selected dates.

$('.calendar').pignoseCalendar({
    click: function(event, context) { 
        /**
         * @params this Element
         * @params event MouseEvent
         * @params context PignoseCalendarContext
         * @returns void
         */

         // this is clicked button Element.
         var $this = $(this);

         // You can access event parameter.
         event.preventDefault();

         // You can get target element in `context` variable, This element is same `$(this)`.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;
    }
});

apply

apply event only working to modal type datepicker.

modal type means, When your calendar target element is <input /> or If you give modal: true option, It will be modal type.

$('.calendar').pignoseCalendar({
    apply: function(date, context) {
        /**
         * @params this Element
         * @params date moment[]
         * @params context PignoseCalendarContext
         * @returns void
         */

         // this is clicked button Element.
         var $this = $(this);

         // You can get target element in `context` variable, This element is same `$(this)`.
         var $element = context.element;

         // You can also get calendar element, It is calendar view DOM.
         var $calendar = context.calendar;

         // Selected dates (start date, end date) is passed at first parameter, And this parameters are moment type.
         // If you unselected date, It will be `null`.
         console.log(date[0], date[1]);
    }
});

Options