wmdeit_kaform/addons/datepicker/kube.datepicker.js

808 lines
22 KiB
JavaScript
Raw Normal View History

2020-02-20 13:45:47 +00:00
(function($K)
{
var datepickerId = 0;
$K.add('module', 'datepicker', {
translations: {
en: {
"days": [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
"months": ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
"months-short": ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
},
init: function(app, context)
{
this.app = app;
this.$doc = app.$doc;
this.$win = app.$win;
this.$body = app.$body;
this.lang = app.lang;
this.animate = app.animate;
// defaults
var defaults = {
year: false,
month: false,
day: false,
format: '%d.%m.%Y', // %d, %m, %F, %M, %Y
embed: false,
target: false,
selectYear: false,
sundayFirst: false,
startDate: false, // string
endDate: false, // string
animationOpen: 'slideDown',
animationClose: 'slideUp',
};
// context
this.context = context;
this.params = context.getParams(defaults);
this.$element = context.getElement();
this.$target = context.getTarget();
// local
this.uuid = datepickerId++;
this.namespace = '.kube.datepicker-' + this.uuid;
this.dateRegexp = /^(.*?)(\/|\.|,|\s|\-)(.*?)(?:\/|\.|,|\s|\-)(.*?)$/;
this.value = '';
this.today = {};
this.current = {};
this.next = {};
this.prev = {};
this.selected = {};
},
// public
start: function()
{
this.$element.attr('uuid', this.uuid);
// start / end date
this._buildStartEndDate();
// create datepicker
this.$datepicker = $K.create('class.datepicker.box', this.app, this);
this.$datepicker.build();
// append
if (this.params.embed)
{
this.build();
this.update();
this.$datepicker.addClass('is-embed');
this.$element.append(this.$datepicker);
}
else
{
this.$datepicker.addClass('is-hidden');
this.$body.append(this.$datepicker);
this.$element.on('click' + this.namespace, this._open.bind(this));
}
},
stop: function()
{
this._disableEvents();
this.$datepicker.remove();
this.$element.off(this.namespace);
this.$element.removeClass('datepicker-in');
},
build: function()
{
this._buildValue();
this._buildTodayDate();
this._buildSelectedDate();
this._buildCurrentDate();
},
update: function()
{
this._buildPrevNextDate();
this.$grid = $K.create('class.datepicker.grid', this.app, this);
this.$grid.build();
this.$datepicker.setControls(this.prev, this.next);
this.$datepicker.setMonth(this.lang.get('months')[this.current.month]);
this.$datepicker.setYear(this.current.year);
this.$datepicker.setGrid(this.$grid);
},
// SET
setDate: function(e)
{
e.preventDefault();
var $item = $K.dom(e.target);
if ($item.attr('data-disabled') === true) return this._close();
var obj = {
day: $item.attr('data-day'),
month: $item.attr('data-month'),
year: $item.attr('data-year')
};
var date = this._convertDateToFormat(obj);
if (this.params.embed === false)
{
var $target = (this.$target.length !== 0) ? this.$target : this.$element;
if ($target.get().tagName === 'INPUT')
{
$target.val(date);
}
else
{
$target.text(date);
}
this._close();
}
this.app.broadcast('datepicker.set', this, date, obj);
},
setNextMonth: function(e)
{
e.preventDefault();
this.current = this.next;
this.update();
},
setPrevMonth: function(e)
{
e.preventDefault();
this.current = this.prev;
this.update();
},
setYear: function()
{
this.current.year = this.$datepicker.getYearFromSelect();
this.selected.day = false;
this.$datepicker.setYear(this.current.year);
this.update();
},
// BUILD
_buildValue: function()
{
var $target = (this.$target.length !== 0) ? this.$target : this.$element;
this.value = ($target.get().tagName === 'INPUT') ? $target.val() : $target.text().trim();
},
_buildTodayDate: function()
{
var date = new Date();
this.today = {
year: date.getFullYear(),
month: parseInt(date.getMonth() + 1),
day: parseInt(date.getDate())
};
},
_buildSelectedDate: function()
{
this.selected = this._parseDateString(this.value);
// set from params
if (this.value === '')
{
this.selected.year = (this.params.year) ? this.params.year : this.selected.year;
this.selected.month = (this.params.month) ? parseInt(this.params.month) : this.selected.month;
this.selected.day = false;
}
},
_buildCurrentDate: function()
{
this.current = this.selected;
},
_buildPrevNextDate: function()
{
// prev
var date = this._getPrevYearAndMonth(this.current.year, this.current.month);
this.prev = {
year: date.year,
month: date.month
};
// next
var date = this._getNextYearAndMonth(this.current.year, this.current.month);
this.next = {
year: date.year,
month: date.month
};
},
_buildStartEndDate: function()
{
this.params.startDate = (this.params.startDate) ? this._parseDateString(this.params.startDate) : false;
this.params.endDate = (this.params.endDate) ? this._parseDateString(this.params.endDate) : false;
},
_buildPosition: function()
{
this.position = {};
var pos = this.$element.offset();
var height = this.$element.innerHeight();
var width = this.$element.innerWidth();
var datepickerWidth = this.$datepicker.innerWidth();
var datepickerHeight = this.$datepicker.innerHeight();
var windowWidth = this.$win.width();
var documentHeight = this.$doc.height();
var right = 0;
var left = pos.left;
var top = pos.top + height + 1;
this.position.type = 'left';
if ((left + datepickerWidth) > windowWidth)
{
this.position.type = 'right';
right = (windowWidth - (left + width));
}
if ((top + datepickerHeight) > documentHeight)
{
this.params.animationOpen = 'show';
this.params.animationClose = 'hide';
top = (top - datepickerHeight - height - 2);
}
this.position.top = top;
this.position.left = left;
this.position.right = right;
},
// OPEN
_open: function(e)
{
if (e) e.preventDefault();
if (this._isOpened()) return;
this._closeAll();
this.app.broadcast('datepicker.open', this);
this.build();
this.update();
this._buildPosition();
this._setPosition();
this.animate.run(this.$datepicker, this.params.animationOpen, this._opened.bind(this));
},
_opened: function()
{
this._enableEvents();
this.$element.addClass('datepicker-in');
this.$datepicker.addClass('is-open');
this.app.broadcast('datepicker.opened', this);
},
_isOpened: function()
{
return this.$datepicker.hasClass('is-open');
},
// CLOSE
_close: function(e)
{
if (e && $K.dom(e.target).closest('.datepicker').length !== 0)
{
return;
}
if (!this._isOpened()) return;
this.app.broadcast('datepicker.close', this);
this.animate.run(this.$datepicker, this.params.animationClose, this._closed.bind(this));
},
_closed: function()
{
this._disableEvents();
this.$datepicker.removeClass('is-open');
this.$element.removeClass('datepicker-in');
this.app.broadcast('datepicker.closed', this);
},
_closeAll: function()
{
$K.dom('.datepicker.is-open').each(function(node)
{
var $el = $K.dom(node);
var id = $el.attr('data-uuid');
this.$doc.off('.kube.datepicker-' + id);
this.$win.off('.kube.datepicker-' + id);
$el.removeClass('is-open');
$el.addClass('is-hidden');
}.bind(this));
$K.dom('.datepicker-in').removeClass('datepicker-in');
},
// EVENTS
_handleKeyboard: function(e)
{
if (e.which === 27) this._close();
},
_enableEvents: function()
{
this.$doc.on('keyup' + this.namespace, this._handleKeyboard.bind(this));
this.$doc.on('click' + this.namespace + ' touchstart' + this.namespace, this._close.bind(this));
this.$win.on('resize' + this.namespace, this._resizePosition.bind(this));
},
_disableEvents: function()
{
this.$doc.off(this.namespace);
this.$win.off(this.namespace);
},
// POSITION
_resizePosition: function()
{
this._buildPosition();
this._setPosition();
},
_setPosition: function()
{
var left = 'auto';
var right = this.position.right + 'px';
if (this.position.type === 'left')
{
left = this.position.left + 'px',
right = 'auto';
}
this.$datepicker.css({ top: this.position.top + 'px', left: left, right: right });
},
// PARSE
_parseDateString: function(str)
{
var obj = {};
var date = str.match(this.dateRegexp);
var format = this.params.format.match(this.dateRegexp);
obj.year = (date === null) ? this.today.year : parseInt(date[4]);
if (format[1] === '%m' || format[1] === '%M' || format[1] === '%F')
{
obj.month = (date === null) ? this.today.month : this._parseMonth(format[1], date[1]);
obj.day = (date === null) ? false : parseInt(date[3]);
}
else
{
obj.month = (date === null) ? this.today.month : this._parseMonth(format[3], date[3]);
obj.day = (date === null) ? false : parseInt(date[1]);
}
obj.splitter = (date === null) ? '.' : date[2];
return obj;
},
_parseMonth: function(type, month)
{
var index = parseInt(month);
if (type === '%M') index = this.lang.get('months-short').indexOf(month);
else if (type === '%F') index = this.lang.get('months').indexOf(month);
return index;
},
// CONVERT
_convertDateToFormat: function(obj)
{
var formated = this.params.format.replace('%d', obj.day);
formated = formated.replace('%F', this.lang.get('months')[obj.month]);
formated = formated.replace('%m', this._addZero(obj.month));
formated = formated.replace('%M', this.lang.get('months-short')[obj.month]);
formated = formated.replace('%Y', obj.year);
return formated;
},
_addZero: function(str)
{
str = Number(str);
return (str < 10) ? '0' + str : str;
},
// GET
_getPrevYearAndMonth: function(year, month)
{
var date = {
year: year,
month: parseInt(month) - 1
};
if (date.month <= 0)
{
date.month = 12;
date.year--;
}
return date;
},
_getNextYearAndMonth: function(year, month)
{
var date = {
year: year,
month: parseInt(month) + 1
};
if (date.month > 12)
{
date.month = 1;
date.year++;
}
return date;
}
});
})(Kube);
(function($K)
{
$K.add('class', 'datepicker.box', {
extends: ['dom'],
init: function(app, datepicker)
{
this.app = app;
this.lang = app.lang;
this.datepicker = datepicker;
this.params = datepicker.params;
this.namespace = datepicker.namespace;
this.selected = datepicker.selected;
},
build: function()
{
this._buildBox();
this._buildHead();
this._buildControlPrev();
this._buildMonthBox();
this._buildControlNext();
this._buildWeekdays();
this._buildBody();
},
getYearFromSelect: function()
{
return Number(this.$yearSelect.val());
},
setMonth: function(month)
{
this.$month.html(month);
},
setYear: function(year)
{
this.$yearValue.html(year);
if (this.params.selectYear && this.$yearSelect)
{
this.$yearSelect.val(year);
}
},
setGrid: function($grid)
{
this.$dbody.html('');
this.$dbody.append($grid);
},
setControls: function(prev, next)
{
var buildDate = function(obj, d)
{
d = (d) ? d : obj.day;
return new Date(obj.year + '/' + obj.month + '/' + d);
}
if (this.params.startDate)
{
var datePrev = buildDate(prev, 31);
var start = buildDate(this.params.startDate);
var fn = (start.getTime() > datePrev.getTime()) ? 'hide' : 'show';
this.$prev[fn]();
}
if (this.params.endDate)
{
var dateNext = buildDate(next, 1);
var end = buildDate(this.params.endDate);
var fn = (end.getTime() < dateNext.getTime()) ? 'hide' : 'show';
this.$next[fn]();
}
},
// private
_buildBox: function()
{
this.parse('<div>');
this.addClass('datepicker');
},
_buildHead: function()
{
this.$head = $K.dom('<div class="datepicker-head">');
this.append(this.$head);
},
_buildControlPrev: function()
{
this.$prev = $K.dom('<span class="datepicker-control datepicker-control-prev" />').html('&lt;');
this.$prev.on('click' + this.namespace, this.datepicker.setPrevMonth.bind(this.datepicker));
this.$head.append(this.$prev);
},
_buildControlNext: function()
{
this.$next = $K.dom('<span class="datepicker-control datepicker-control-next" />').html('&gt;');
this.$next.on('click' + this.namespace, this.datepicker.setNextMonth.bind(this.datepicker));
this.$head.append(this.$next);
},
_buildMonthBox: function()
{
this.$monthBox = $K.dom('<div class="datepicker-month-box">');
this.$head.append(this.$monthBox);
this._buildMonth();
this._buildYear();
this._buildYearSelect();
},
_buildMonth: function()
{
this.$month = $K.dom('<span />');
this.$monthBox.append(this.$month);
},
_buildYear: function()
{
this.$year = $K.dom('<span />');
this.$yearValue = $K.dom('<span />');
this.$year.append(this.$yearValue);
this.$monthBox.append(this.$year);
},
_buildYearSelect: function()
{
if (!this.params.selectYear) return;
var now = new Date();
var start = (this.params.startDate) ? this.params.startDate.year : (now.getFullYear() - 99);
var end = (this.params.endDate) ? this.params.endDate.year : now.getFullYear();
if ((end - start) < 2)
{
return;
}
this.$yearSelect = $K.dom('<select />');
this.$year.append(this.$yearSelect);
this.$year.append('<span class="datepicker-select-year-caret" />');
this.$year.addClass('datepicker-select-year');
for (var i = start; i <= end; i++)
{
var $option = $K.dom('<option value="' + i + '">' + i + '</option>');
this.$yearSelect.append($option);
}
this.$yearSelect.on('change' + this.namespace, this.datepicker.setYear.bind(this.datepicker));
},
_buildWeekdays: function()
{
this.$weekdays = $K.dom('<div class="datepicker-weekdays">');
var result = [];
if (this.params.sundayFirst)
{
var last = this.lang.get('days').slice(6);
result = this.lang.get('days').slice(0, 6);
result.unshift(last[0]);
}
else
{
result = this.lang.get('days');
}
for (var i = 0; i < result.length; i++)
{
var tr = $K.dom('<span>').html(result[i]);
this.$weekdays.append(tr);
}
this.append(this.$weekdays);
},
_buildBody: function()
{
this.$dbody = $K.dom('<div class="datepicker-body">');
this.append(this.$dbody);
}
});
})(Kube);
(function($K)
{
$K.add('class', 'datepicker.grid', {
extends: ['dom'],
init: function(app, datepicker)
{
this.app = app;
this.lang = app.lang;
this.datepicker = datepicker;
this.params = datepicker.params;
this.namespace = datepicker.namespace;
this.today = datepicker.today;
this.selected = datepicker.selected;
this.current = datepicker.current;
this.prev = datepicker.prev;
this.next = datepicker.next;
// local
this.daysInMonth = [0,31,28,31,30,31,30,31,31,30,31,30,31];
},
build: function()
{
this.parse('<div class="datepicker-grid">');
var daysInCurrentMonth = this._getDaysInCurrentMonth();
var daysInPrevMonth = this._getDaysInPrevMonth();
var daysInNextMonth = this._getDaysInNextMonth();
// start index
var d = new Date(this.current.year, this.current.month - 1, 1);
var startIndex = (this.params.sundayFirst) ? d.getDay() + 1 : ((!d.getDay()) ? 7 : d.getDay());
var daysPrevMonthStart = daysInPrevMonth - startIndex + 2;
var startCurrent = 8 - startIndex;
var y = 1, c = 1, obj;
for (var z = 0; z < 6; z++)
{
var tr = $K.dom('<div class="datepicker-row">');
for (var i = 0; i < 7; i++)
{
if (z === 0)
{
var dayPrev = daysPrevMonthStart + i;
if (dayPrev > daysInPrevMonth)
{
// current day
obj = this._buildGridObj(i, y, this.current, false, false);
y++;
}
else
{
// prev day
obj = this._buildGridObj(i, dayPrev, this.prev, false, true);
}
}
else if (y > daysInCurrentMonth)
{
// next day
obj = this._buildGridObj(i, c, this.next, true, false);
c++;
}
else
{
// current day
obj = this._buildGridObj(i, y, this.current, false, false);
y++;
}
tr.append(this._buildGridDay(obj));
}
this.append(tr);
}
},
// private
_buildGridObj: function(i, day, date, next, prev)
{
return {
day: day,
next: next,
prev: prev,
year: date.year,
month: date.month,
date: this._getGridDay(date.year, date.month, day),
selected: this._isSelectedDate(date.year, date.month, day),
today: this._isTodayDate(date.year, date.month, day),
weekend: (i > 4),
disabled: this._isDisabledDate(date.year, date.month, day)
};
},
_buildGridDay: function(obj)
{
var td = $K.dom('<div class="datepicker-cell">');
if (obj.next || obj.prev)
{
td.addClass('is-out');
}
if (obj.selected) td.addClass('is-selected');
if (obj.today) td.addClass('is-today');
if (obj.weekend && this.params.weekend) td.addClass('is-weekend');
if (obj.disabled) td.addClass('is-disabled');
var $item = $K.dom('<a>');
$item.html(obj.day);
$item.attr('href', '#');
$item.attr('data-disabled', obj.disabled);
$item.attr('data-date', obj.date);
$item.attr('data-day', obj.day);
$item.attr('data-month', obj.month);
$item.attr('data-year', obj.year);
$item.on('click', this.datepicker.setDate.bind(this.datepicker));
return td.append($item);
},
_isSelectedDate: function(year, month, day)
{
return (this.selected.year === year && this.selected.month === month && this.selected.day === day);
},
_isTodayDate: function(year, month, day)
{
return (this.today.year === year && this.today.month === month && this.today.day === day);
},
_isDisabledDate: function(year, month, day)
{
var date = new Date(year + '/' + month + '/' + day);
if (this.params.startDate)
{
var dateStart = new Date(this.params.startDate.year + '/' + this.params.startDate.month + '/' + this.params.startDate.day);
if (date.getTime() < dateStart.getTime())
{
return true;
}
}
if (this.params.endDate)
{
var dateEnd = new Date(this.params.endDate.year + '/' + this.params.endDate.month + '/' + this.params.endDate.day);
if (date.getTime() > dateEnd.getTime())
{
return true;
}
}
return false;
},
_getGridDay: function(year, month, day)
{
return year + '-' + month + '-' + day;
},
_getDaysInCurrentMonth: function()
{
return this._getDaysInMonth(this.current.year, this.current.month);
},
_getDaysInPrevMonth: function()
{
return this._getDaysInMonth(this.prev.year, this.prev.month);
},
_getDaysInNextMonth: function()
{
return this._getDaysInMonth(this.next.year, this.next.month);
},
_getDaysInMonth: function (year, month)
{
return (((0 === (year%4)) && ((0 !== (year%100)) || (0 === (year%400)))) && (month === 1)) ? 29 : this.daysInMonth[month];
}
});
})(Kube);