Calendar

Default

Calendar module uses two other components, table and popup.


$("#mycalendar").calendar({
  type: "date",
  className: {
     prevIcon: "icon icon-arrow-left-122",
     nextIcon: "icon icon-arrow-right-122"
  }
});

<div id="mycalendar" class="calendar-sq">
    <input type="text" value="" required placeholder="enter date" >
</div>

Range Calendar

To link the two calendars you need to do it like this::


<div id="rangestart" class="calendar-sq">
    <input type="text" value="" required placeholder="enter date" >
</div>

<div id="rangeend" class="calendar-sq">
    <input type="text" value="" required placeholder="enter date" >
</div>

$('#rangestart').calendar({
    type: 'date',
    endCalendar: $('#rangeend'),
    //inline: true,
    className: {
        prevIcon: "icon icon-arrow-left-122",
        nextIcon: "icon icon-arrow-right-122"
    }
});

$('#rangeend').calendar({
    type: 'date',
    startCalendar: $('#rangestart'),
    //inline: true,
    className: {
        prevIcon: "icon icon-arrow-left-122",
        nextIcon: "icon icon-arrow-right-122"
    }
});

Formatting Time

To format the date we do it like this: 


<div id="newformat" class="calendar-sq" >
    <input type="text" value="" required placeholder="enter date" >
</div>


$('#newformat').calendar({
    type: 'date',
    className: {
        prevIcon: "icon icon-arrow-left-122",
        nextIcon: "icon icon-arrow-right-122"
    },
    monthFirst: false,
    formatter: {
        date: function (date, settings) {
            if (!date) return '';
            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();
            if (month < 9) {
                return day + ' - 0' + month;
            } else {
                return day + ' - ' + month;
            }
        }
    }
});