@syncfusion/ej2-calendars 20.3.56 → 20.4.38

package/dist/es6/ej2-calendars.es5.js

@@ -136,6 +136,9 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
                 'data-role': 'calendar'
             });
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.createHeader();
         this.createContent();
         this.wireEvents();
@@ -285,9 +288,11 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         else {
             cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
         }
-        for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
-            var obj = _a[_i];
-            culShortNames.push(getValue(obj, cldrObj));
+        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;
     };
@@ -321,9 +326,11 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         // eslint-disable-next-line max-len
-        var shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);
-        for (var days = 0; days <= daysCount; days++) {
-            html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>';
+        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;
@@ -505,7 +512,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
                 e.preventDefault();
                 break;
             case 'controlDown':
-                if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {
+                if (!isNullOrUndefined(focusedDate) && !levelRestrict || !isNullOrUndefined(selectedDate) && !levelRestrict) {
                     this.contentClick(null, --view, (focusedDate || selectedDate), value);
                 }
                 e.preventDefault();
@@ -1130,9 +1137,6 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             case 0:
                 detach(this.tableBodyElement);
                 this.renderMonths(e, null, isCustomDate);
-                if (multiSelection && !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0])) {
-                    this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);
-                }
                 break;
             case 1:
                 detach(this.tableBodyElement);
@@ -1438,7 +1442,9 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         if (this.getModuleName() === 'calendar' && this.element) {
-            EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
+            if (!isNullOrUndefined(this.headerTitleElement)) {
+                EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
+            }
             if (this.todayElement) {
                 EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);
             }
@@ -1456,6 +1462,17 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         if (this.element) {
             this.element.innerHTML = '';
         }
+        this.todayElement = null;
+        this.tableBodyElement = null;
+        this.renderDayCellArgs = null;
+        this.headerElement = null;
+        this.nextIcon = null;
+        this.table = null;
+        this.tableHeadElement = null;
+        this.previousIcon = null;
+        this.headerTitleElement = null;
+        this.footer = null;
+        this.contentElement = null;
         _super.prototype.destroy.call(this);
     };
     CalendarBase.prototype.title = function (e) {
@@ -1760,10 +1777,12 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
     };
     CalendarBase.prototype.previousIconHandler = function (disabled) {
         if (disabled) {
-            EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
-            addClass([this.previousIcon], '' + DISABLED);
-            addClass([this.previousIcon], '' + OVERLAY);
-            this.previousIcon.setAttribute('aria-disabled', 'true');
+            if (!isNullOrUndefined(this.previousIcon)) {
+                EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
+                addClass([this.previousIcon], '' + DISABLED);
+                addClass([this.previousIcon], '' + OVERLAY);
+                this.previousIcon.setAttribute('aria-disabled', 'true');
+            }
         }
         else {
             EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
@@ -1786,10 +1805,12 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
     };
     CalendarBase.prototype.nextIconHandler = function (disabled) {
         if (disabled) {
-            EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
-            addClass([this.nextIcon], DISABLED);
-            addClass([this.nextIcon], OVERLAY);
-            this.nextIcon.setAttribute('aria-disabled', 'true');
+            if (!isNullOrUndefined(this.previousIcon)) {
+                EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
+                addClass([this.nextIcon], DISABLED);
+                addClass([this.nextIcon], OVERLAY);
+                this.nextIcon.setAttribute('aria-disabled', 'true');
+            }
         }
         else {
             EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
@@ -2751,8 +2772,11 @@ var Islamic = /** @__PURE__ @class */ (function () {
                 }
                 break;
             case 'Decade': {
+                var startIslamicYear = 1361;
+                var gregorianValue = HijriParser.toGregorian(startIslamicYear, 1, 1);
                 var prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
                 var nextDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.max) > -1;
+                prevDecadeCompare = HijriParser.toGregorian(this.calendarInstance.headerTitleElement.textContent.split('-')[0].trim(), 1, 1).getFullYear() === gregorianValue.getFullYear() ? true : prevDecadeCompare;
                 this.calendarInstance.previousIconHandler(prevDecadeCompare);
                 this.calendarInstance.nextIconHandler(nextDecadeCompare);
             }
@@ -2773,7 +2797,9 @@ var Islamic = /** @__PURE__ @class */ (function () {
                 break;
             case 'Decade':
                 this.calendarInstance.nextIconClicked = true;
-                islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
+                if (islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1) {
+                    islamicDate.year = islamicDate.year - this.calendarInstance.headerElement.textContent.split('-')[0].trim() === 1 ? islamicDate.year + 1 : islamicDate.year;
+                }
                 this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 10, islamicDate.month, 1);
                 this.calendarInstance.switchView(view);
                 break;
@@ -2863,12 +2889,16 @@ var Islamic = /** @__PURE__ @class */ (function () {
         var endFullYr = endYr.getFullYear();
         var startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
         var endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
+        var splityear = this.calendarInstance.headerElement.textContent.split('-');
+        if ((!isNullOrUndefined(e) && (splityear[0] !== startHdrYr) && e.action === 'home') || (!isNullOrUndefined(e) && e.type === 'keydown' && e.action === 'end')) {
+            startHdrYr = this.calendarInstance.headerElement.textContent.split('-')[0].trim();
+            endHdrYr = this.calendarInstance.headerElement.textContent.split('-')[1].trim();
+        }
         if (this.calendarInstance.islamicPreviousHeader) {
             startHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[0].trim();
             endHdrYr = this.calendarInstance.islamicPreviousHeader.split('-')[1].trim();
             this.calendarInstance.islamicPreviousHeader = null;
         }
-        var splityear = this.calendarInstance.headerElement.textContent.split('-');
         if (this.calendarInstance.previousIconClicked) {
             for (var i = 0; i <= splityear.length; i++) {
                 endHdrYr = endHdrYr - splityear[i] === 2 || splityear[i] - endHdrYr === 2 ? (parseInt(endHdrYr) + 1).toString() : endHdrYr - splityear[i] === 3 || splityear[i] - endHdrYr === 3 ? (parseInt(endHdrYr) + 2).toString() : endHdrYr - splityear[i] === 4 || splityear[i] - endHdrYr === 4 ? (parseInt(endHdrYr) + 3).toString() : endHdrYr - splityear[i] === 5 || splityear[i] - endHdrYr === 5 ? (parseInt(endHdrYr) + 4).toString() : endHdrYr;
@@ -2876,11 +2906,21 @@ var Islamic = /** @__PURE__ @class */ (function () {
                     endHdrYr = (parseInt(endHdrYr) - 1).toString();
                 }
             }
+            if (endHdrYr - splityear[i] === 8 || splityear[i] - endHdrYr === 8) {
+                endHdrYr = (parseInt(endHdrYr) - 9).toString();
+                startHdrYr = (parseInt(endHdrYr) - 9).toString();
+            }
+            if (endHdrYr - splityear[i] === 7 || splityear[i] - endHdrYr === 7) {
+                endHdrYr = (parseInt(endHdrYr) - 8).toString();
+                startHdrYr = (parseInt(endHdrYr) - 9).toString();
+            }
             startHdrYr = endHdrYr - startHdrYr === 10
                 ? (parseInt(startHdrYr) + 1).toString() : endHdrYr - startHdrYr === 11
                 ? (parseInt(startHdrYr) + 2).toString() : endHdrYr - startHdrYr === 12
                 ? (parseInt(startHdrYr) + 3).toString() : startHdrYr;
-            startHdrYr = endHdrYr - startHdrYr === 8 ? (parseInt(startHdrYr) - 1).toString() : startHdrYr;
+            if (endHdrYr - startHdrYr === 8) {
+                startHdrYr = (parseInt(startHdrYr) - 1).toString();
+            }
         }
         if (this.calendarInstance.nextIconClicked) {
             for (var i = 0; i <= splityear.length; i++) {
@@ -2894,6 +2934,10 @@ var Islamic = /** @__PURE__ @class */ (function () {
                     startHdrYr = (parseInt(startHdrYr) + 2).toString();
                 }
             }
+            if (startHdrYr - this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim() > 1) {
+                startHdrYr = (parseInt(this.calendarInstance.headerTitleElement.textContent.split('-')[1].trim()) + 1).toString();
+                endHdrYr = (parseInt(startHdrYr) + 9).toString();
+            }
             endHdrYr = endHdrYr - startHdrYr === 10 ? (parseInt(endHdrYr) - 1).toString() : endHdrYr;
             endHdrYr = endHdrYr - startHdrYr === 7
                 ? (parseInt(endHdrYr) + 2).toString() : endHdrYr - startHdrYr === 8
@@ -2929,10 +2973,6 @@ var Islamic = /** @__PURE__ @class */ (function () {
                 else if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
                     || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
                     addClass([tdEle], DISABLED$1);
-                    if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
-                        || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
-                        addClass([tdEle], DISABLED$1);
-                    }
                 }
                 else if (!isNullOrUndefined(value) &&
                     (this.getIslamicDate(localDate)).year ===
@@ -2948,6 +2988,9 @@ var Islamic = /** @__PURE__ @class */ (function () {
                     EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);
                 }
                 tdEle.appendChild(dayLink);
+                if ((!isNullOrUndefined(e) && e.action === 'home' && islamicDate.year.toString() === startHdrYr) || (!isNullOrUndefined(e) && e.action === 'end' && islamicDate.year.toString() === endHdrYr)) {
+                    addClass([tdEle], FOCUSEDDATE$1);
+                }
                 tdEles.push(tdEle);
             }
         }
@@ -3187,6 +3230,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.renderComplete();
         this.setTimeZone(this.serverTimezoneOffset);
     };
@@ -3532,7 +3578,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DatePicker.prototype.unBindEvents = function () {
-        EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
+        }
         EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
@@ -3664,10 +3712,10 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
-                if (!isNullOrUndefined(this.htmlAttributes[key])) {
+                if (!isNullOrUndefined(this.htmlAttributes["" + key])) {
                     if (containerAttr.indexOf(key) > -1) {
                         if (key === 'class') {
-                            var updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                            var updatedClassValues = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
                             if (updatedClassValues !== '') {
                                 addClass([this.inputWrapper.container], updatedClassValues.split(' '));
                             }
@@ -3676,19 +3724,19 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                             var setStyle = this.inputWrapper.container.getAttribute(key);
                             if (!isNullOrUndefined(setStyle)) {
                                 if (setStyle.charAt(setStyle.length - 1) === ';') {
-                                    setStyle = setStyle + this.htmlAttributes[key];
+                                    setStyle = setStyle + this.htmlAttributes["" + key];
                                 }
                                 else {
-                                    setStyle = setStyle + ';' + this.htmlAttributes[key];
+                                    setStyle = setStyle + ';' + this.htmlAttributes["" + key];
                                 }
                             }
                             else {
-                                setStyle = this.htmlAttributes[key];
+                                setStyle = this.htmlAttributes["" + key];
                             }
                             this.inputWrapper.container.setAttribute(key, setStyle);
                         }
                         else {
-                            this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                            this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                         }
                     }
                 }
@@ -3700,7 +3748,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (containerAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -3812,12 +3860,12 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         this.isPopupClicked = false;
     };
     DatePicker.prototype.documentHandler = function (e) {
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
+        if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
             e.preventDefault();
         }
         var target = e.target;
-        if (!(closest(target, '.e-datepicker.e-popup-wrapper'))
+        if (!(closest(target, '.e-datepicker.e-popup-wrapper')) && !isNullOrUndefined(this.inputWrapper)
             && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)
             && (!target.classList.contains('e-day'))) {
             this.hide(e);
@@ -3981,7 +4029,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         }
         if ((this.getModuleName() === 'datetimepicker')) {
             if (this.checkDateValue(this.globalize.parseDate(this.inputElement.value, dateOptions))) {
-                date = this.globalize.parseDate(this.inputElement.value, dateOptions);
+                date = this.globalize.parseDate(this.inputElement.value.toLocaleUpperCase(), dateOptions);
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
@@ -4456,7 +4504,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     DatePicker.prototype.destroy = function () {
         this.unBindEvents();
         _super.prototype.destroy.call(this);
-        this.keyboardModules.destroy();
+        if (!isNullOrUndefined(this.keyboardModules)) {
+            this.keyboardModules.destroy();
+        }
         if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
             _super.prototype.destroy.call(this);
         }
@@ -4486,15 +4536,21 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.ngTag === null) {
             if (this.inputElement) {
-                this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
+                if (!isNullOrUndefined(this.inputWrapper)) {
+                    this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
+                }
                 removeClass([this.inputElement], [INPUTROOT]);
             }
             removeClass([this.element], [ROOT$1]);
-            detach(this.inputWrapper.container);
+            if (!isNullOrUndefined(this.inputWrapper)) {
+                detach(this.inputWrapper.container);
+            }
         }
         if (this.formElement) {
             EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);
         }
+        this.inputWrapper = null;
+        this.keyboardModules = null;
     };
     DatePicker.prototype.ensureInputAttribute = function () {
         var prop = [];
@@ -4952,7 +5008,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -5191,7 +5247,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         _this.invalidValueString = null;
         _this.isAngular = false;
         _this.preventChange = false;
-        _this.isPropChanged = false;
         _this.dateRangeOptions = options;
         return _this;
     }
@@ -5214,6 +5269,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.renderComplete();
     };
     /**
@@ -5422,8 +5480,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(attributes$$1); _i < _a.length; _i++) {
             var pro = _a[_i];
             if (pro.indexOf('data') === 0) {
-                this.firstHiddenChild.setAttribute(pro, attributes$$1[pro]);
-                this.secondHiddenChild.setAttribute(pro, attributes$$1[pro]);
+                this.firstHiddenChild.setAttribute(pro, attributes$$1["" + pro]);
+                this.secondHiddenChild.setAttribute(pro, attributes$$1["" + pro]);
             }
         }
     };
@@ -5471,19 +5529,19 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                 var key = _a[_i];
                 if (wrapperAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        var updatedClassValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var dateRangeStyle = this.inputWrapper.container.getAttribute(key);
-                        dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        dateRangeStyle = !isNullOrUndefined(dateRangeStyle) ? (dateRangeStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.inputWrapper.container.setAttribute(key, dateRangeStyle);
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -5494,7 +5552,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (wrapperAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -6220,10 +6278,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             case 'tab':
                 if (this.tabKeyValidation(ele, LEFTCALENDER)) {
                     ele = this.keyCalendarUpdate(false, ele, false);
-                    var focusedCell = ele.querySelector('.e-focused-date');
-                    if (isNullOrUndefined(focusedCell)) {
-                        this.currentDate = this.firstCellToFocus(this.rightCalendar);
-                    }
+                    this.currentDate = this.firstCellToFocus(this.rightCalendar);
+                    view = this.getViewNumber(this.currentView());
                     this.keyboardNavigate(0, view, e, max, min);
                     this.keyNavigation(ele, e);
                 }
@@ -6231,10 +6287,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             case 'shiftTab':
                 if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
                     ele = this.keyCalendarUpdate(true, ele, false);
-                    var focusedCell = ele.querySelector('.e-focused-date');
-                    if (isNullOrUndefined(focusedCell)) {
-                        this.currentDate = this.firstCellToFocus(this.leftCalendar);
-                    }
+                    this.currentDate = this.firstCellToFocus(this.leftCalendar);
                     this.keyboardNavigate(0, view, e, max, min);
                     this.keyNavigation(ele, e);
                 }
@@ -6242,7 +6295,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DateRangePicker.prototype.firstCellToFocus = function (calendar) {
-        var focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        var focusAbleEle = this.getViewNumber(this.currentView()) === 2 ? calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-year)') : calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
         var focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
         var currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
         var focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
@@ -6469,7 +6522,11 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         var leftHeader = this.leftCalendar.querySelector('.e-header');
         var isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
         var isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
-        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+        var isRightYear = rightHeader ? rightHeader.classList.contains('e-year') : false;
+        var isLeftYear = leftHeader ? leftHeader.classList.contains('e-year') : false;
+        var isRightDecade = rightHeader ? rightHeader.classList.contains('e-decade') : false;
+        var isLeftDecade = leftHeader ? leftHeader.classList.contains('e-decade') : false;
+        return isLeftCalendar && (isLeftMonth || isLeftYear || isLeftDecade) && (isRightMonth || isRightYear || isRightDecade) && !this.isMobile;
     };
     DateRangePicker.prototype.keyNavigation = function (calendar, e) {
         this.bindCalendarCellEvents(calendar);
@@ -8846,6 +8903,30 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.inputElement.setAttribute('name', this.element.getAttribute('data-name'));
             this.inputElement.removeAttribute('data-name');
         }
+        this.closeEventArgs = null;
+        this.leftCalendar = null;
+        this.rightTitle = null;
+        this.leftTitle = null;
+        this.openEventArgs = null;
+        this.leftCalNextIcon = null;
+        this.rightCalendar = null;
+        this.closeEventArgs = null;
+        this.rightCalPrevIcon = null;
+        this.leftCalPrevIcon = null;
+        this.popupKeyboardModule = null;
+        this.cancelButton = null;
+        this.applyButton = null;
+        this.calendarElement = null;
+        this.leftKeyboardModule = null;
+        this.rightCalNextIcon = null;
+        this.leftCalNextIcon = null;
+        this.btnKeyboardModule = null;
+        this.rightKeyboardModule = null;
+        this.leftKeyboardModule = null;
+        this.presetKeyboardModule = null;
+        this.liCollections = null;
+        this.popupObj = null;
+        this.popupWrapper = null;
     };
     DateRangePicker.prototype.ensureInputAttribute = function () {
         var attr = [];
@@ -9161,6 +9242,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             var openPopup = ['maxDays', 'minDays', 'value'];
+            if (openPopup.indexOf(prop) < 0) {
+                this.hide(null);
+            }
             switch (prop) {
                 case 'width':
                     this.setEleWidth(this.width);
@@ -9370,13 +9454,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                     this.setProperties({ depth: newProp.depth }, true);
                     this.refreshChange();
                     break;
-                default:
-                    this.isPropChanged = true;
-            }
-            if (openPopup.indexOf(prop) < 0 && !this.isPropChanged) {
-                this.hide(null);
             }
-            this.isPropChanged = false;
         }
     };
     __decorate$2([
@@ -9705,6 +9783,9 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.renderComplete();
     };
     TimePicker.prototype.setTimeAllowEdit = function () {
@@ -9989,6 +10070,11 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         if (this.formElement) {
             EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
         }
+        this.rippleFn = null;
+        this.openPopupEventArgs = null;
+        this.selectedElement = null;
+        this.listTag = null;
+        this.liCollections = null;
     };
     TimePicker.prototype.ensureInputAttribute = function () {
         var propertyList = [];
@@ -10102,19 +10188,19 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
                 var key = _a[_i];
                 if (wrapperAttributes.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassesValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        var updatedClassesValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
                         if (updatedClassesValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var timeStyle = this.inputWrapper.container.getAttribute(key);
-                        timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.inputWrapper.container.setAttribute(key, timeStyle);
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -10125,7 +10211,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (wrapperAttributes.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -10839,7 +10925,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
             this.inputEvent.destroy();
         }
         EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);
-        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {
+        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);
         }
         if (this.formElement) {
@@ -11202,7 +11288,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         return elementIndex;
     };
     TimePicker.prototype.keyHandler = function (event) {
-        if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
+        if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper) && this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
             return;
         }
         var count = this.timeCollections.length;
@@ -11450,7 +11536,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
     };
     TimePicker.prototype.documentClickHandler = function (event) {
         var target = event.target;
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
+        if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
@@ -12188,6 +12274,14 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             this.keyboardHandler.destroy();
         }
         this.unBindInputEvents();
+        this.liCollections = null;
+        this.rippleFn = null;
+        this.selectedElement = null;
+        this.listTag = null;
+        this.timeIcon = null;
+        this.popupObject = null;
+        this.preventArgs = null;
+        this.keyboardModule = null;
         _super.prototype.destroy.call(this);
     };
     /**
@@ -12216,6 +12310,9 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         this.cloneElement = this.element.cloneNode(true);
         this.dateTimeFormat = this.cldrDateTimeFormat();
         this.initValue = this.value;
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         _super.prototype.updateHtmlAttributeToElement.call(this);
         this.checkAttributes(false);
         var localeText = { placeholder: this.placeholder };
@@ -12605,7 +12702,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             event.preventDefault();
         }
         if (!(closest(target, '[id="' + (this.popupObject && this.popupObject.element.id + '"]'))) && target !== this.inputElement
-            && target !== this.timeIcon && target !== this.inputWrapper.container) {
+            && target !== this.timeIcon && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container) {
             if (this.isTimePopupOpen()) {
                 this.hide(event);
                 this.focusOut();
@@ -13483,7 +13580,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                     _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -13794,6 +13891,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         }
         if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {
             var start = this.parent.inputElement.selectionStart;
+            var formatText = '';
+            if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+                formatText = this.hiddenMask[start];
+            }
             this.dateAlteration(args.e.key === ARROWDOWN ? true : false);
             var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
             this.isHiddenMask = true;
@@ -13802,6 +13903,12 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
             this.previousHiddenMask = this.hiddenMask;
             this.previousValue = inputValue;
             this.parent.inputElement.value = inputValue;
+            for (var i = 0; i < this.hiddenMask.length; i++) {
+                if (formatText === this.hiddenMask[i]) {
+                    start = i;
+                    break;
+                }
+            }
             this.parent.inputElement.selectionStart = start;
             this.validCharacterCheck();
         }
@@ -14196,6 +14303,10 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
     MaskedDateTime.prototype.maskInputHandler = function () {
         var start = this.parent.inputElement.selectionStart;
         var selectionChar = this.previousHiddenMask[start - 1];
+        var formatText = '';
+        if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+            formatText = this.hiddenMask[start];
+        }
         var inputValue;
         this.differenceCheck();
         inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
@@ -14206,6 +14317,13 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         this.previousHiddenMask = this.hiddenMask;
         this.previousValue = inputValue;
         this.parent.inputElement.value = inputValue;
+        this.parent.inputElement.value = inputValue;
+        for (var i = 0; i < this.hiddenMask.length; i++) {
+            if (formatText === this.hiddenMask[i]) {
+                start = i;
+                break;
+            }
+        }
         this.parent.inputElement.selectionStart = start;
         this.validCharacterCheck();
         if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {
@@ -14213,6 +14331,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
             this.isNavigate = this.isDeletion = false;
             this.navigateSelection(isbackward);
         }
+        if (this.isDeleteKey) {
+            this.isDeletion = false;
+        }
         this.isDeleteKey = false;
         // this.setSelection(selectionChar);
         // this.navigateSelection(inputValue);