@syncfusion/ej2-calendars
Version:
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
1,063 lines (1,061 loc) • 717 kB
JavaScript
import { Internationalization, isNullOrUndefined, Browser, attributes, closest, addClass, removeClass, rippleEffect, EventHandler, getValue, getDefaultDateObject, cldrData, detach, L10n, extend, KeyboardEvents, getUniqueID, Property, Event, NotifyPropertyChanges, Component, throwError, HijriParser, Touch, formatUnit, Animation, setValue, ChildProperty, merge, isUndefined, createElement, select, remove, prepend, Collection, append, setStyleAttribute } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { Input } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';
import { ListBase } from '@syncfusion/ej2-lists';
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
//class constant defination.
var OTHERMONTH = 'e-other-month';
var OTHERDECADE = 'e-other-year';
var ROOT = 'e-calendar';
var DEVICE = 'e-device';
var HEADER = 'e-header';
var RTL = 'e-rtl';
var CONTENT = 'e-content';
var CONTENTTABLE = 'e-calendar-content-table';
var YEAR = 'e-year';
var MONTH = 'e-month';
var DECADE = 'e-decade';
var ICON = 'e-icons';
var PREVICON = 'e-prev';
var NEXTICON = 'e-next';
var PREVSPAN = 'e-date-icon-prev';
var NEXTSPAN = 'e-date-icon-next ';
var ICONCONTAINER = 'e-icon-container';
var DISABLED = 'e-disabled';
var OVERLAY = 'e-overlay';
var WEEKEND = 'e-weekend';
var WEEKNUMBER = 'e-week-number';
var SELECTED = 'e-selected';
var FOCUSEDDATE = 'e-focused-date';
var FOCUSEDCELL = 'e-focused-cell';
var OTHERMONTHROW = 'e-month-hide';
var TODAY = 'e-today';
var TITLE = 'e-title';
var LINK = 'e-day';
var CELL = 'e-cell';
var WEEKHEADER = 'e-week-header';
var ZOOMIN = 'e-zoomin';
var FOOTER = 'e-footer-container';
var BTN = 'e-btn';
var FLAT = 'e-flat';
var CSS = 'e-css';
var PRIMARY = 'e-primary';
var DAYHEADERLONG = 'e-calendar-day-header-lg';
var dayMilliSeconds = 86400000;
var minutesMilliSeconds = 60000;
/**
*
* @private
*/
var CalendarBase = /** @__PURE__ @class */ (function (_super) {
__extends(CalendarBase, _super);
/**
* Initialized new instance of Calendar Class.
* Constructor for creating the widget
*
* @param {CalendarBaseModel} options - Specifies the CalendarBase model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
function CalendarBase(options, element) {
var _this = _super.call(this, options, element) || this;
_this.effect = '';
_this.isPopupClicked = false;
_this.isDateSelected = true;
_this.isTodayClicked = false;
_this.preventChange = false;
_this.previousDates = false;
return _this;
}
/**
* To Initialize the control rendering.
*
* @returns {void}
* @private
*/
CalendarBase.prototype.render = function () {
this.rangeValidation(this.min, this.max);
this.calendarEleCopy = this.element.cloneNode(true);
if (this.calendarMode === 'Islamic') {
if (+(this.min.setSeconds(0)) === +new Date(1900, 0, 1, 0, 0, 0)) {
this.min = new Date(1944, 2, 18);
}
if (+this.max === +new Date(2099, 11, 31)) {
this.max = new Date(2069, 10, 16);
}
}
this.globalize = new Internationalization(this.locale);
if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {
this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);
}
this.todayDisabled = false;
this.todayDate = new Date(new Date().setHours(0, 0, 0, 0));
if (this.getModuleName() === 'calendar') {
this.element.classList.add(ROOT);
if (this.enableRtl) {
this.element.classList.add(RTL);
}
if (Browser.isDevice) {
this.element.classList.add(DEVICE);
}
attributes(this.element, {
'data-role': 'calendar'
});
this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
this.element.setAttribute('tabindex', this.tabIndex);
}
else {
this.calendarElement = this.createElement('div');
this.calendarElement.classList.add(ROOT);
if (this.enableRtl) {
this.calendarElement.classList.add(RTL);
}
if (Browser.isDevice) {
this.calendarElement.classList.add(DEVICE);
}
attributes(this.calendarElement, {
'data-role': 'calendar'
});
}
if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
this.enabled = false;
}
this.createHeader();
this.createContent();
this.wireEvents();
};
CalendarBase.prototype.rangeValidation = function (min, max) {
if (isNullOrUndefined(min)) {
this.setProperties({ min: new Date(1900, 0, 1) }, true);
}
if (isNullOrUndefined(max)) {
this.setProperties({ max: new Date(2099, 11, 31) }, true);
}
};
CalendarBase.prototype.getDefaultKeyConfig = function () {
this.defaultKeyConfigs = {
controlUp: 'ctrl+38',
controlDown: 'ctrl+40',
moveDown: 'downarrow',
moveUp: 'uparrow',
moveLeft: 'leftarrow',
moveRight: 'rightarrow',
select: 'enter',
home: 'home',
end: 'end',
pageUp: 'pageup',
pageDown: 'pagedown',
shiftPageUp: 'shift+pageup',
shiftPageDown: 'shift+pagedown',
controlHome: 'ctrl+home',
controlEnd: 'ctrl+end',
altUpArrow: 'alt+uparrow',
spacebar: 'space',
altRightArrow: 'alt+rightarrow',
altLeftArrow: 'alt+leftarrow'
};
return this.defaultKeyConfigs;
};
CalendarBase.prototype.validateDate = function (value) {
this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(this.min))) }, true);
this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(this.max))) }, true);
this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));
if (!isNullOrUndefined(value) && this.min <= this.max && value >= this.min && value <= this.max) {
this.currentDate = new Date(this.checkValue(value));
}
};
CalendarBase.prototype.setOverlayIndex = function (popupWrapper, popupElement, modal, isDevice) {
if (isDevice && !isNullOrUndefined(popupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {
var index = parseInt(popupElement.style.zIndex, 10) ? parseInt(popupElement.style.zIndex, 10) : 1000;
modal.style.zIndex = (index - 1).toString();
popupWrapper.style.zIndex = index.toString();
}
};
CalendarBase.prototype.minMaxUpdate = function (value) {
if (!(+this.min <= +this.max)) {
this.setProperties({ min: this.min }, true);
addClass([this.element], OVERLAY);
}
else {
removeClass([this.element], OVERLAY);
}
this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;
this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;
if (+this.min <= +this.max && value && +value <= +this.max && +value >= +this.min) {
this.currentDate = new Date(this.checkValue(value));
}
else {
if (+this.min <= +this.max && !value && +this.currentDate > +this.max) {
this.currentDate = new Date(this.checkValue(this.max));
}
else {
if (+this.currentDate < +this.min) {
this.currentDate = new Date(this.checkValue(this.min));
}
}
}
};
CalendarBase.prototype.createHeader = function () {
var ariaPrevAttrs = {
'aria-disabled': 'false',
'aria-label': 'previous month'
};
var ariaNextAttrs = {
'aria-disabled': 'false',
'aria-label': 'next month'
};
var ariaTitleAttrs = {
'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title'
};
var tabIndexAttr = { 'tabindex': '0' };
this.headerElement = this.createElement('div', { className: HEADER });
var iconContainer = this.createElement('div', { className: ICONCONTAINER });
this.previousIcon = this.createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });
rippleEffect(this.previousIcon, {
duration: 400,
selector: '.e-prev',
isCenterRipple: true
});
attributes(this.previousIcon, ariaPrevAttrs);
attributes(this.previousIcon, tabIndexAttr);
this.nextIcon = this.createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });
rippleEffect(this.nextIcon, {
selector: '.e-next',
duration: 400,
isCenterRipple: true
});
if (this.getModuleName() === 'daterangepicker') {
attributes(this.previousIcon, { tabIndex: '-1' });
attributes(this.nextIcon, { tabIndex: '-1' });
}
attributes(this.nextIcon, ariaNextAttrs);
attributes(this.nextIcon, tabIndexAttr);
this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
attributes(this.headerTitleElement, ariaTitleAttrs);
attributes(this.headerTitleElement, tabIndexAttr);
this.headerElement.appendChild(this.headerTitleElement);
this.previousIcon.appendChild(this.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
this.nextIcon.appendChild(this.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
iconContainer.appendChild(this.previousIcon);
iconContainer.appendChild(this.nextIcon);
this.headerElement.appendChild(iconContainer);
if (this.getModuleName() === 'calendar') {
this.element.appendChild(this.headerElement);
}
else {
this.calendarElement.appendChild(this.headerElement);
}
this.adjustLongHeaderSize();
};
CalendarBase.prototype.createContent = function () {
this.contentElement = this.createElement('div', { className: CONTENT });
this.table = this.createElement('table', { attrs: { 'class': CONTENTTABLE, 'tabIndex': '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
if (this.getModuleName() === 'calendar') {
this.element.appendChild(this.contentElement);
}
else {
this.calendarElement.appendChild(this.contentElement);
}
this.contentElement.appendChild(this.table);
this.createContentHeader();
this.createContentBody();
if (this.showTodayButton) {
this.createContentFooter();
}
if (this.getModuleName() !== 'daterangepicker') {
EventHandler.add(this.table, 'focus', this.addContentFocus, this);
EventHandler.add(this.table, 'blur', this.removeContentFocus, this);
}
};
CalendarBase.prototype.addContentFocus = function (args) {
var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
if (!isNullOrUndefined(selectedDate)) {
selectedDate.classList.add(FOCUSEDCELL);
}
else if (!isNullOrUndefined(focusedDate)) {
focusedDate.classList.add(FOCUSEDCELL);
}
};
CalendarBase.prototype.removeContentFocus = function (args) {
var focusedDate = !isNullOrUndefined(this.tableBodyElement) ? this.tableBodyElement.querySelector('tr td.e-focused-date') : null;
var selectedDate = !isNullOrUndefined(this.tableBodyElement) ? this.tableBodyElement.querySelector('tr td.e-selected') : null;
if (!isNullOrUndefined(selectedDate)) {
selectedDate.classList.remove(FOCUSEDCELL);
}
else if (!isNullOrUndefined(focusedDate)) {
focusedDate.classList.remove(FOCUSEDCELL);
}
};
CalendarBase.prototype.getCultureValues = function () {
var culShortNames = [];
var cldrObj;
var dayFormat = !isNullOrUndefined(this.dayHeaderFormat) ? 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase() : null;
if ((this.locale === 'en' || this.locale === 'en-US') && !isNullOrUndefined(dayFormat)) {
cldrObj = (getValue(dayFormat, getDefaultDateObject()));
}
else {
cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
}
if (!isNullOrUndefined(cldrObj)) {
for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
var obj = _a[_i];
culShortNames.push(getValue(obj, cldrObj));
}
}
return culShortNames;
};
CalendarBase.prototype.toCapitalize = function (text) {
return !isNullOrUndefined(text) && text.length ? text[0].toUpperCase() + text.slice(1) : text;
};
CalendarBase.prototype.createContentHeader = function () {
if (this.getModuleName() === 'calendar') {
if (!isNullOrUndefined(this.element.querySelectorAll('.e-content .e-week-header')[0])) {
detach(this.element.querySelectorAll('.e-content .e-week-header')[0]);
}
}
else {
if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0])) {
detach(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0]);
}
}
var daysCount = 6;
var html = '';
if (this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {
this.setProperties({ firstDayOfWeek: 0 }, true);
}
this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER });
if (this.weekNumber) {
html += '<th class="e-week-number" aria-hidden="true"></th>';
if (this.getModuleName() === 'calendar') {
addClass([this.element], '' + WEEKNUMBER);
}
else {
addClass([this.calendarElement], '' + WEEKNUMBER);
}
}
var shortNames = this.getCultureValues().length > 0 &&
this.getCultureValues() ? this.shiftArray(((this.getCultureValues().length > 0 &&
this.getCultureValues())), this.firstDayOfWeek) : null;
if (!isNullOrUndefined(shortNames)) {
for (var days = 0; days <= daysCount; days++) {
html += '<th class="">' + this.toCapitalize(shortNames[days]) + '</th>';
}
}
html = '<tr>' + html + '</tr>';
this.tableHeadElement.innerHTML = html;
this.table.appendChild(this.tableHeadElement);
};
CalendarBase.prototype.createContentBody = function () {
if (this.getModuleName() === 'calendar') {
if (!isNullOrUndefined(this.element.querySelectorAll('.e-content tbody')[0])) {
detach(this.element.querySelectorAll('.e-content tbody')[0]);
}
}
else {
if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content tbody')[0])) {
detach(this.calendarElement.querySelectorAll('.e-content tbody')[0]);
}
}
switch (this.start) {
case 'Year':
this.renderYears();
break;
case 'Decade':
this.renderDecades();
break;
default:
this.renderMonths();
}
};
CalendarBase.prototype.updateFooter = function () {
this.todayElement.textContent = this.l10.getConstant('today');
this.todayElement.setAttribute('aria-label', this.l10.getConstant('today'));
this.todayElement.setAttribute('tabindex', '0');
};
CalendarBase.prototype.createContentFooter = function () {
if (this.showTodayButton) {
var minimum = new Date(+this.min);
var maximum = new Date(+this.max);
var l10nLocale = { today: 'Today' };
this.globalize = new Internationalization(this.locale);
this.l10 = new L10n(this.getModuleName(), l10nLocale, this.locale);
this.todayElement = this.createElement('button', { attrs: { role: 'button' } });
rippleEffect(this.todayElement);
this.updateFooter();
addClass([this.todayElement], [BTN, TODAY, FLAT, PRIMARY, CSS]);
if ((!(+new Date(minimum.setHours(0, 0, 0, 0)) <= +this.todayDate &&
+this.todayDate <= +new Date(maximum.setHours(0, 0, 0, 0)))) || (this.todayDisabled)) {
addClass([this.todayElement], DISABLED);
}
this.footer = this.createElement('div', { className: FOOTER });
this.footer.appendChild(this.todayElement);
if (this.getModuleName() === 'calendar') {
this.element.appendChild(this.footer);
}
if (this.getModuleName() === 'datepicker') {
this.calendarElement.appendChild(this.footer);
}
if (this.getModuleName() === 'datetimepicker') {
this.calendarElement.appendChild(this.footer);
}
if (!this.todayElement.classList.contains(DISABLED)) {
EventHandler.add(this.todayElement, 'click', this.todayButtonClick, this);
}
}
};
CalendarBase.prototype.wireEvents = function (id, ref, keyConfig, moduleName) {
EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);
this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
if (this.getModuleName() === 'calendar') {
this.keyboardModule = new KeyboardEvents(this.element, {
eventName: 'keydown',
keyAction: this.keyActionHandle.bind(this),
keyConfigs: this.defaultKeyConfigs
});
}
else {
this.keyboardModule = new KeyboardEvents(this.calendarElement, {
eventName: 'keydown',
keyAction: this.keyActionHandle.bind(this),
keyConfigs: this.defaultKeyConfigs
});
}
};
CalendarBase.prototype.dateWireEvents = function (id, ref, keyConfig, moduleName) {
this.defaultKeyConfigs = this.getDefaultKeyConfig();
this.defaultKeyConfigs = extend(this.defaultKeyConfigs, keyConfig);
this.serverModuleName = moduleName;
};
CalendarBase.prototype.todayButtonClick = function (e, value, isCustomDate) {
if (this.showTodayButton) {
if (this.currentView() === this.depth) {
this.effect = '';
}
else {
this.effect = 'e-zoomin';
}
if (this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
this.navigateTo(this.depth, new Date(this.checkValue(value)), isCustomDate);
}
else {
this.navigateTo('Month', new Date(this.checkValue(value)), isCustomDate);
}
}
};
CalendarBase.prototype.resetCalendar = function () {
this.calendarElement && detach(this.calendarElement);
this.tableBodyElement && detach(this.tableBodyElement);
this.table && detach(this.table);
this.tableHeadElement && detach(this.tableHeadElement);
this.nextIcon && detach(this.nextIcon);
this.previousIcon && detach(this.previousIcon);
this.footer && detach(this.footer);
this.todayElement = null;
this.renderDayCellArgs = null;
this.calendarElement = this.tableBodyElement = this.footer = this.tableHeadElement =
this.nextIcon = this.previousIcon = this.table = null;
};
CalendarBase.prototype.keyActionHandle = function (e, value, multiSelection) {
if (this.calendarElement === null && e.action === 'escape') {
return;
}
var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
var selectedDate;
if (multiSelection) {
if (!isNullOrUndefined(focusedDate) && +value === parseInt(focusedDate.getAttribute('id').split('_')[0], 10)) {
selectedDate = focusedDate;
}
else {
selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
}
}
else {
selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
}
var view = this.getViewNumber(this.currentView());
var depthValue = this.getViewNumber(this.depth);
var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
this.effect = '';
switch (e.action) {
case 'moveLeft':
if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
this.keyboardNavigate(-1, view, e, this.max, this.min);
e.preventDefault();
}
break;
case 'moveRight':
if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
this.keyboardNavigate(1, view, e, this.max, this.min);
e.preventDefault();
}
break;
case 'moveUp':
if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
if (view === 0) {
this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
}
else {
this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
}
e.preventDefault();
}
break;
case 'moveDown':
if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
if (view === 0) {
this.keyboardNavigate(7, view, e, this.max, this.min);
}
else {
this.keyboardNavigate(4, view, e, this.max, this.min);
}
e.preventDefault();
}
break;
case 'select':
if (e.target === this.headerTitleElement) {
this.navigateTitle(e);
}
else if (e.target === this.previousIcon && !e.target.className.includes(DISABLED)) {
this.navigatePrevious(e);
}
else if (e.target === this.nextIcon && !e.target.className.includes(DISABLED)) {
this.navigateNext(e);
}
else if (e.target === this.todayElement && !e.target.className.includes(DISABLED)) {
this.todayButtonClick(e, value);
if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
if (this.isAngular) {
this.inputElement.focus();
}
else {
this.element.focus();
}
}
}
else {
var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
if (levelRestrict) {
// eslint-disable-next-line radix
var d = new Date(parseInt('' + (element).id, 0));
this.selectDate(e, d, (element));
if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
if (this.isAngular) {
this.inputElement.focus();
}
else {
this.element.focus();
}
}
}
else {
if (!e.target.className.includes(DISABLED)) {
this.contentClick(null, --view, (element), value);
}
}
}
}
break;
case 'controlUp':
this.title();
e.preventDefault();
break;
case 'controlDown':
if (!isNullOrUndefined(focusedDate) && !levelRestrict || !isNullOrUndefined(selectedDate) && !levelRestrict) {
this.contentClick(null, --view, (focusedDate || selectedDate), value);
}
e.preventDefault();
break;
case 'home':
this.currentDate = this.firstDay(this.currentDate);
detach(this.tableBodyElement);
if (view === 0) {
this.renderMonths(e);
}
else if (view === 1) {
this.renderYears(e);
}
else {
this.renderDecades(e);
}
e.preventDefault();
break;
case 'end':
this.currentDate = this.lastDay(this.currentDate, view);
detach(this.tableBodyElement);
if (view === 0) {
this.renderMonths(e);
}
else if (view === 1) {
this.renderYears(e);
}
else {
this.renderDecades(e);
}
e.preventDefault();
break;
case 'pageUp':
this.addMonths(this.currentDate, -1);
this.navigateTo('Month', this.currentDate);
e.preventDefault();
break;
case 'pageDown':
this.addMonths(this.currentDate, 1);
this.navigateTo('Month', this.currentDate);
e.preventDefault();
break;
case 'shiftPageUp':
this.addYears(this.currentDate, -1);
this.navigateTo('Month', this.currentDate);
e.preventDefault();
break;
case 'shiftPageDown':
this.addYears(this.currentDate, 1);
this.navigateTo('Month', this.currentDate);
e.preventDefault();
break;
case 'controlHome':
this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));
e.preventDefault();
break;
case 'controlEnd':
this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
e.preventDefault();
break;
case 'tab':
if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.todayElement) {
e.preventDefault();
if (this.isAngular) {
this.inputElement.focus();
}
else {
this.element.focus();
}
this.hide();
}
break;
case 'shiftTab':
if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
e.preventDefault();
if (this.isAngular) {
this.inputElement.focus();
}
else {
this.element.focus();
}
this.hide();
}
break;
case 'escape':
if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && (e.target === this.headerTitleElement || e.target === this.previousIcon || e.target === this.nextIcon || e.target === this.todayElement)) {
this.hide();
}
break;
}
};
CalendarBase.prototype.keyboardNavigate = function (number, currentView, e, max, min) {
var date = new Date(this.checkValue(this.currentDate));
switch (currentView) {
case 2:
this.addYears(this.currentDate, number);
if (this.isMonthYearRange(this.currentDate)) {
detach(this.tableBodyElement);
this.renderDecades(e);
}
else {
this.currentDate = date;
}
break;
case 1:
this.addMonths(this.currentDate, number);
if (this.calendarMode === 'Gregorian') {
if (this.isMonthYearRange(this.currentDate)) {
detach(this.tableBodyElement);
this.renderYears(e);
}
else {
this.currentDate = date;
}
}
else {
if (this.isMonthYearRange(this.currentDate)) {
detach(this.tableBodyElement);
this.renderYears(e);
}
else {
this.currentDate = date;
}
}
break;
case 0:
this.addDay(this.currentDate, number, e, max, min);
if (this.isMinMaxRange(this.currentDate)) {
detach(this.tableBodyElement);
this.renderMonths(e);
}
else {
this.currentDate = date;
}
break;
}
};
/**
* Initialize the event handler
*
* @param {Date} value - Specifies value of date.
* @returns {void}
* @private
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
CalendarBase.prototype.preRender = function (value) {
var _this = this;
this.navigatePreviousHandler = this.navigatePrevious.bind(this);
this.navigateNextHandler = this.navigateNext.bind(this);
this.defaultKeyConfigs = this.getDefaultKeyConfig();
this.navigateHandler = function (e) {
_this.triggerNavigate(e);
};
};
CalendarBase.prototype.minMaxDate = function (localDate) {
var currentDate = new Date(new Date(+localDate).setHours(0, 0, 0, 0));
var minDate = new Date(new Date(+this.min).setHours(0, 0, 0, 0));
var maxDate = new Date(new Date(+this.max).setHours(0, 0, 0, 0));
if (+currentDate === +minDate || +currentDate === +maxDate) {
if (+localDate < +this.min) {
localDate = new Date(+this.min);
}
if (+localDate > +this.max) {
localDate = new Date(+this.max);
}
}
return localDate;
};
CalendarBase.prototype.renderMonths = function (e, value, isCustomDate) {
var numCells = this.weekNumber ? 8 : 7;
var tdEles;
if (this.calendarMode === 'Gregorian') {
tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate, e);
}
else {
tdEles = !isNullOrUndefined(this.islamicModule) ? this.islamicModule.islamicRenderDays(this.currentDate, value) : null;
}
this.createContentHeader();
if (this.calendarMode === 'Gregorian') {
this.renderTemplate(tdEles, numCells, MONTH, e, value);
}
else if (!isNullOrUndefined(this.islamicModule)) {
this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);
}
};
CalendarBase.prototype.renderDays = function (currentDate, value, multiSelection, values, isTodayDate, e) {
var tdEles = [];
var cellsCount = 42;
var todayDate = isTodayDate ? new Date(+currentDate) : this.getDate(new Date(), this.timezone);
var localDate = new Date(this.checkValue(currentDate));
var minMaxDate;
var currentMonth = localDate.getMonth();
this.titleUpdate(currentDate, 'days');
var d = localDate;
localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
while (localDate.getDay() !== this.firstDayOfWeek) {
this.setStartDate(localDate, -1 * dayMilliSeconds);
}
for (var day = 0; day < cellsCount; ++day) {
var weekEle = this.createElement('td', { className: CELL });
var weekAnchor = this.createElement('span');
if (day % 7 === 0 && this.weekNumber) {
// 6 days are added to get Last day of the week and 3 days are added to get middle day of the week.
var numberOfDays = this.weekRule === 'FirstDay' ? 6 : (this.weekRule === 'FirstFourDayWeek' ? 3 : 0);
var finalDate = new Date(localDate.getFullYear(), localDate.getMonth(), (localDate.getDate() + numberOfDays));
weekAnchor.textContent = '' + this.getWeek(finalDate);
weekEle.appendChild(weekAnchor);
addClass([weekEle], '' + WEEKNUMBER);
tdEles.push(weekEle);
}
minMaxDate = new Date(+localDate);
localDate = this.minMaxDate(localDate);
var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };
var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
var tdEle = this.dayCell(localDate);
var title = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'full' });
var dayLink = this.createElement('span');
dayLink.textContent = this.globalize.formatDate(localDate, { format: 'd', type: 'date', skeleton: 'yMd' });
var disabled = (this.min > localDate) || (this.max < localDate);
if (disabled) {
addClass([tdEle], DISABLED);
addClass([tdEle], OVERLAY);
}
else {
dayLink.setAttribute('title', '' + title);
}
if (currentMonth !== localDate.getMonth()) {
addClass([tdEle], OTHERMONTH);
dayLink.setAttribute('aria-disabled', 'true');
}
if (localDate.getDay() === 0 || localDate.getDay() === 6) {
addClass([tdEle], WEEKEND);
}
tdEle.appendChild(dayLink);
this.renderDayCellArgs = {
date: localDate,
isDisabled: false,
element: tdEle,
isOutOfRange: disabled
};
var argument = this.renderDayCellArgs;
this.renderDayCellEvent(argument);
if (argument.isDisabled) {
var selectDate = new Date(this.checkValue(value));
var argsDate = new Date(this.checkValue(argument.date));
if (multiSelection) {
if (!isNullOrUndefined(values) && values.length > 0) {
for (var index = 0; index < values.length; index++) {
var localDateString = +new Date(this.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd' }));
var tempDateString = +new Date(this.globalize.formatDate(values[index], { type: 'date', skeleton: 'yMd' }));
if (localDateString === tempDateString) {
values.splice(index, 1);
index = -1;
}
}
}
}
else if (selectDate && +selectDate === +argsDate) {
this.setProperties({ value: null }, true);
}
}
if (this.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {
addClass([tdEle], DISABLED);
addClass([tdEle], OVERLAY);
dayLink.setAttribute('aria-disabled', 'true');
if (+this.renderDayCellArgs.date === +this.todayDate) {
this.todayDisabled = true;
}
}
var otherMnthBool = tdEle.classList.contains(OTHERMONTH);
var disabledCls = tdEle.classList.contains(DISABLED);
if (!disabledCls) {
EventHandler.add(tdEle, 'click', this.clickHandler, this);
}
// to set the value as null while setting the disabled date onProperty change.
// if (args.isDisabled && +this.value === +args.date) {
// this.setProperties({ value: null }, true);
// }
var currentTarget = void 0;
if (!isNullOrUndefined(e) && e.type === 'click') {
currentTarget = e.currentTarget;
}
if (multiSelection && !isNullOrUndefined(values) && !disabledCls) {
for (var tempValue = 0; tempValue < values.length; tempValue++) {
var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
var formatOptions = { format: null, type: 'date', skeleton: 'short', calendar: type };
var localDateString = this.globalize.formatDate(localDate, formatOptions);
var tempDateString = this.globalize.formatDate(values[tempValue], formatOptions);
if ((localDateString === tempDateString && this.getDateVal(localDate, values[tempValue]))
|| (this.getDateVal(localDate, value))) {
addClass([tdEle], SELECTED);
}
if (!isNullOrUndefined(currentTarget) && currentTarget.innerText === tdEle.innerText &&
this.previousDates && tdEle.classList.contains(SELECTED) && currentTarget.classList.contains(SELECTED)) {
removeClass([tdEle], SELECTED);
this.previousDates = false;
var copyValues = this.copyValues(values);
for (var i = 0; i < copyValues.length; i++) {
var type_1 = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
var formatOptions_1 = { format: null, type: 'date', skeleton: 'short', calendar: type_1 };
var localDateString_1 = this.globalize.formatDate(date, formatOptions_1);
var tempDateString_1 = this.globalize.formatDate(copyValues[i], formatOptions_1);
if (localDateString_1 === tempDateString_1) {
var index = copyValues.indexOf(copyValues[i]);
copyValues.splice(index, 1);
values.splice(index, 1);
}
}
this.setProperties({ values: copyValues }, true);
}
else {
this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
}
}
if (values.length <= 0) {
this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
}
}
else if (!disabledCls && this.getDateVal(localDate, value)) {
addClass([tdEle], SELECTED);
}
this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
if (!isNullOrUndefined(date) && date.getFullYear() === todayDate.getFullYear() && date.getMonth() === todayDate.getMonth()
&& date.getDate() === todayDate.getDate()) {
addClass([tdEle], TODAY);
}
tdEles.push(this.renderDayCellArgs.element);
localDate = new Date(+minMaxDate);
this.addDay(localDate, 1, null, this.max, this.min);
}
return tdEles;
};
CalendarBase.prototype.updateFocus = function (otherMonth, disabled, localDate, tableElement, currentDate) {
if (currentDate.getDate() === localDate.getDate() && !otherMonth && !disabled) {
addClass([tableElement], FOCUSEDDATE);
}
else {
// eslint-disable-next-line radix
if (currentDate >= this.max && parseInt(tableElement.id, 0) === +this.max && !otherMonth && !disabled) {
addClass([tableElement], FOCUSEDDATE);
}
// eslint-disable-next-line radix
if (currentDate <= this.min && parseInt(tableElement.id, 0) === +this.min && !otherMonth && !disabled) {
addClass([tableElement], FOCUSEDDATE);
}
}
};
CalendarBase.prototype.renderYears = function (e, value) {
this.removeTableHeadElement();
var numCells = 4;
var tdEles = [];
var valueUtil = isNullOrUndefined(value);
var curDate = new Date(this.checkValue(this.currentDate));
var mon = curDate.getMonth();
var yr = curDate.getFullYear();
var localDate = curDate;
var curYrs = localDate.getFullYear();
var minYr = new Date(this.checkValue(this.min)).getFullYear();
var minMonth = new Date(this.checkValue(this.min)).getMonth();
var maxYr = new Date(this.checkValue(this.max)).getFullYear();
var maxMonth = new Date(this.checkValue(this.max)).getMonth();
localDate.setMonth(0);
this.titleUpdate(this.currentDate, 'months');
localDate.setDate(1);
for (var month = 0; month < 12; ++month) {
var tdEle = this.dayCell(localDate);
var dayLink = this.createElement('span');
var localMonth = (value && (value).getMonth() === localDate.getMonth());
var select = (value && (value).getFullYear() === yr && localMonth);
var title = this.globalize.formatDate(localDate, { type: 'date', format: 'MMM y' });
dayLink.textContent = this.toCapitalize(this.globalize.formatDate(localDate, {
format: null, type: 'dateTime', skeleton: 'MMM'
}));
if ((this.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {
addClass([tdEle], DISABLED);
}
else if (!valueUtil && select) {
addClass([tdEle], SELECTED);
}
else {
if (localDate.getMonth() === mon && this.currentDate.getMonth() === mon) {
addClass([tdEle], FOCUSEDDATE);
}
}
localDate.setDate(1);
localDate.setMonth(localDate.getMonth() + 1);
if (!tdEle.classList.contains(DISABLED)) {
EventHandler.add(tdEle, 'click', this.clickHandler, this);
dayLink.setAttribute('title', '' + title);
}
tdEle.appendChild(dayLink);
tdEles.push(tdEle);
}
this.renderTemplate(tdEles, numCells, YEAR, e, value);
};
CalendarBase.prototype.renderDecades = function (e, value) {
this.removeTableHeadElement();
var numCells = 4;
var yearCell = 12;
var tdEles = [];
var localDate = new Date(this.checkValue(this.currentDate));
localDate.setMonth(0);
localDate.setDate(1);
var localYr = localDate.getFullYear();
var startYr = new Date(localDate.setFullYear((localYr - localYr % 10)));
var endYr = new Date(localDate.setFullYear((localYr - localYr % 10 + (10 - 1))));
var startFullYr = startYr.getFullYear();
var endFullYr = endYr.getFullYear();
var startHdrYr = this.globalize.formatDate(startYr, {
format: null, type: 'dateTime', skeleton: 'y'
});
var endHdrYr = this.globalize.formatDate(endYr, { format: null, type: 'dateTime', skeleton: 'y' });
this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);
var start = new Date(localYr - (localYr % 10) - 1, 0, 1);
var startYear = start.getFullYear();
for (var rowIterator = 0; rowIterator < yearCell; ++rowIterator) {
var year = startYear + rowIterator;
localDate.setFullYear(year);
var tdEle = this.dayCell(localDate);
var dayLink = this.createElement('span');
dayLink.textContent = this.globalize.formatDate(localDate, {
format: null, type: 'dateTime', skeleton: 'y'
});
if ((year < startFullYr) || (year > endFullYr)) {
addClass([tdEle], OTHERDECADE);
dayLink.setAttribute('aria-disabled', 'true');
if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
addClass([tdEle], SELECTED);
}
if (year < new Date(this.checkValue(this.min)).getFullYear() ||
year > new Date(this.checkValue(this.max)).getFullYear()) {
addClass([tdEle], DISABLED);
}
}
else if (year < new Date(this.checkValue(this.min)).getFullYear() ||
year > new Date(this.checkValue(this.max)).getFullYear()) {
addClass([tdEle], DISABLED);
}
else if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
addClass([tdEle], SELECTED);
}
else {
if (localDate.getFullYear() === this.currentDate.getFullYear() && !tdEle.classList.contains(DISABLED)) {
addClass([tdEle], FOCUSEDDATE);
}
}
if (!tdEle.classList.contains(DISABLED)) {
EventHandler.add(tdEle, 'click', this.clickHandler, this);
dayLink.setAttribute('title', '' + dayLink.textContent);
}
tdEle.appendChild(dayLink);
tdEles.push(tdEle);
}
this.renderTemplate(tdEles, numCells, 'e-decade', e, value);
};
CalendarBase.prototype.dayCell = function (localDate) {
var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
var dateFormatOptions = { skeleton: 'full', type: 'dateTime', calendar: type };
var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
var value;
if (!isNullOrUndefined(date)) {
value = date.valueOf();
}
var attrs = {
className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false' }
};
return this.createElement('td', attrs);
};
CalendarBase.prototype.firstDay = function (date) {
var collection = this.currentView() !== 'Decade' ? this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')') :
this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '');
if (collection.length) {
for (var i = 0; i < collection.length; i++) {
if (!collection[i].classList.contains(DISABLED)) {
// eslint-disable-next-line radix
date = new Date(parseInt(collection[i].id, 0));
break;