@syncfusion/ej2-calendars 20.3.59 → 20.4.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.59
+*  version : 20.4.40
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@20.3.56",
+  "_id": "@syncfusion/ej2-calendars@18.30.7",
   "_inBundle": false,
-  "_integrity": "sha512-Ruq5H/efzwn90dzWPXHtOMLKw0C0r9X4c56Wo/xC7kdvSez6OhDMH9ibbkzKzKu9RI42sZzk4I1qgdtKFPfBjA==",
+  "_integrity": "sha512-tDGyq6I+jfuzYUGXH7t5y5OIydy6bskD2G2BPK7n4SDhjclE4GW2mA3SIHvx1ZwtgPNdWPCPxHeWdQL7xDH0NA==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.3.56.tgz",
-  "_shasum": "81a48cf30eb42c22559d20b194d6baef18effc12",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-18.30.7.tgz",
+  "_shasum": "6dec75fe63027aeab8ab2417b2e50ceff68c68c0",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -44,17 +44,17 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-buttons": "~20.3.58",
-    "@syncfusion/ej2-inputs": "~20.3.57",
-    "@syncfusion/ej2-lists": "~20.3.56",
-    "@syncfusion/ej2-popups": "~20.3.59"
+    "@syncfusion/ej2-base": "~20.4.40",
+    "@syncfusion/ej2-buttons": "~20.4.40",
+    "@syncfusion/ej2-inputs": "~20.4.40",
+    "@syncfusion/ej2-lists": "~20.4.40",
+    "@syncfusion/ej2-popups": "~20.4.40"
   },
   "deprecated": false,
   "description": "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.",
   "devDependencies": {},
   "es2015": "./dist/es6/ej2-calendars.es5.js",
-  "homepage": "https://github.com/syncfusion/ej2-javascript-ui-controls#readme",
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.3.59",
+  "version": "20.4.40",
   "sideEffects": false
 }

package/src/calendar/calendar.js

@@ -289,9 +289,11 @@ var CalendarBase = /** @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;
     };
@@ -325,9 +327,11 @@ var CalendarBase = /** @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;
@@ -509,7 +513,7 @@ var CalendarBase = /** @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();
@@ -1134,9 +1138,6 @@ var CalendarBase = /** @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);
@@ -1442,7 +1443,9 @@ var CalendarBase = /** @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);
             }
@@ -1460,6 +1463,17 @@ var CalendarBase = /** @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) {
@@ -1764,10 +1778,12 @@ var CalendarBase = /** @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);
@@ -1790,10 +1806,12 @@ var CalendarBase = /** @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);

package/src/calendar/islamic.js

@@ -180,8 +180,11 @@ var Islamic = /** @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);
             }
@@ -202,7 +205,9 @@ var Islamic = /** @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;
@@ -292,12 +297,16 @@ var Islamic = /** @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;
@@ -305,11 +314,21 @@ var Islamic = /** @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++) {
@@ -323,6 +342,10 @@ var Islamic = /** @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
@@ -358,10 +381,6 @@ var Islamic = /** @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);
-                    if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
-                        || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
-                        addClass([tdEle], DISABLED);
-                    }
                 }
                 else if (!isNullOrUndefined(value) &&
                     (this.getIslamicDate(localDate)).year ===
@@ -377,6 +396,9 @@ var Islamic = /** @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);
+                }
                 tdEles.push(tdEle);
             }
         }

package/src/datepicker/datepicker.js

@@ -450,7 +450,9 @@ var DatePicker = /** @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);
@@ -582,10 +584,10 @@ var DatePicker = /** @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(' '));
                             }
@@ -594,19 +596,19 @@ var DatePicker = /** @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]);
                         }
                     }
                 }
@@ -618,7 +620,7 @@ var DatePicker = /** @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]);
                 }
             }
         }
@@ -730,12 +732,12 @@ var DatePicker = /** @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);
@@ -1374,7 +1376,9 @@ var DatePicker = /** @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);
         }
@@ -1404,15 +1408,21 @@ var DatePicker = /** @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]);
-            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 = [];
@@ -1870,7 +1880,7 @@ var DatePicker = /** @class */ (function (_super) {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;

package/src/daterangepicker/daterangepicker.d.ts

@@ -169,7 +169,6 @@ export declare class DateRangePicker extends CalendarBase {
     private mobileRangePopupWrap;
     protected isAngular: boolean;
     protected preventChange: boolean;
-    protected isPropChanged: boolean;
     /**
      * Gets or sets the start and end date of the Calendar.
      * {% codeBlock src='daterangepicker/value/index.md' %}{% endcodeBlock %}

package/src/daterangepicker/daterangepicker.js

@@ -147,7 +147,6 @@ var DateRangePicker = /** @class */ (function (_super) {
         _this.invalidValueString = null;
         _this.isAngular = false;
         _this.preventChange = false;
-        _this.isPropChanged = false;
         _this.dateRangeOptions = options;
         return _this;
     }
@@ -381,8 +380,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {
             var pro = _a[_i];
             if (pro.indexOf('data') === 0) {
-                this.firstHiddenChild.setAttribute(pro, attributes[pro]);
-                this.secondHiddenChild.setAttribute(pro, attributes[pro]);
+                this.firstHiddenChild.setAttribute(pro, attributes["" + pro]);
+                this.secondHiddenChild.setAttribute(pro, attributes["" + pro]);
             }
         }
     };
@@ -430,19 +429,19 @@ var DateRangePicker = /** @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]);
                     }
                 }
             }
@@ -453,7 +452,7 @@ var DateRangePicker = /** @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]);
                 }
             }
         }
@@ -1179,10 +1178,8 @@ var DateRangePicker = /** @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);
                 }
@@ -1190,10 +1187,7 @@ var DateRangePicker = /** @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);
                 }
@@ -1201,7 +1195,7 @@ var DateRangePicker = /** @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;
@@ -1428,7 +1422,11 @@ var DateRangePicker = /** @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);
@@ -3805,6 +3803,30 @@ var DateRangePicker = /** @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 = [];
@@ -4120,6 +4142,9 @@ var DateRangePicker = /** @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);
@@ -4329,13 +4354,7 @@ var DateRangePicker = /** @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([

package/src/datetimepicker/datetimepicker.js

@@ -162,6 +162,14 @@ var DateTimePicker = /** @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);
     };
     /**
@@ -582,7 +590,7 @@ var DateTimePicker = /** @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();
@@ -1460,7 +1468,7 @@ var DateTimePicker = /** @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;

package/src/maskbase/masked-date-time.js

@@ -175,6 +175,10 @@ var MaskedDateTime = /** @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;
@@ -183,6 +187,12 @@ var MaskedDateTime = /** @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();
         }
@@ -578,6 +588,10 @@ var MaskedDateTime = /** @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());
@@ -588,6 +602,13 @@ var MaskedDateTime = /** @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) {
@@ -595,6 +616,9 @@ var MaskedDateTime = /** @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);