@syncfusion/ej2-calendars 20.3.56 → 20.4.38

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

@@ -121,6 +121,9 @@ let CalendarBase = class CalendarBase extends Component {
                 'data-role': 'calendar'
             });
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.createHeader();
         this.createContent();
         this.wireEvents();
@@ -270,8 +273,10 @@ let CalendarBase = class CalendarBase extends Component {
         else {
             cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
         }
-        for (const obj of Object.keys(cldrObj)) {
-            culShortNames.push(getValue(obj, cldrObj));
+        if (!isNullOrUndefined(cldrObj)) {
+            for (const obj of Object.keys(cldrObj)) {
+                culShortNames.push(getValue(obj, cldrObj));
+            }
         }
         return culShortNames;
     }
@@ -305,9 +310,11 @@ let CalendarBase = class CalendarBase extends Component {
             }
         }
         // eslint-disable-next-line max-len
-        const shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);
-        for (let days = 0; days <= daysCount; days++) {
-            html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>';
+        const shortNames = this.getCultureValues().length > 0 && this.getCultureValues() ? this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek) : null;
+        if (!isNullOrUndefined(shortNames)) {
+            for (let days = 0; days <= daysCount; days++) {
+                html += '<th  class="">' + this.toCapitalize(shortNames[days]) + '</th>';
+            }
         }
         html = '<tr>' + html + '</tr>';
         this.tableHeadElement.innerHTML = html;
@@ -489,7 +496,7 @@ let CalendarBase = class CalendarBase extends Component {
                 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();
@@ -1113,9 +1120,6 @@ let CalendarBase = class CalendarBase extends Component {
             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);
@@ -1420,7 +1424,9 @@ let CalendarBase = class CalendarBase extends Component {
             }
         }
         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);
             }
@@ -1438,6 +1444,17 @@ let CalendarBase = class CalendarBase extends Component {
         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.destroy();
     }
     title(e) {
@@ -1742,10 +1759,12 @@ let CalendarBase = class CalendarBase extends Component {
     }
     previousIconHandler(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);
@@ -1768,10 +1787,12 @@ let CalendarBase = class CalendarBase extends Component {
     }
     nextIconHandler(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);
@@ -2728,8 +2749,11 @@ class Islamic {
                 }
                 break;
             case 'Decade': {
-                const prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
+                let startIslamicYear = 1361;
+                let gregorianValue = HijriParser.toGregorian(startIslamicYear, 1, 1);
+                let prevDecadeCompare = this.hijriCompareDecade(date, this.calendarInstance.min) < 1;
                 const 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);
             }
@@ -2750,7 +2774,9 @@ class Islamic {
                 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;
@@ -2840,12 +2866,16 @@ class Islamic {
         let endFullYr = endYr.getFullYear();
         let startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
         let endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
+        let 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;
         }
-        let 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;
@@ -2853,11 +2883,21 @@ class Islamic {
                     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++) {
@@ -2871,6 +2911,10 @@ class Islamic {
                     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
@@ -2906,10 +2950,6 @@ class Islamic {
                 else if (year < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
                     || year > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
                     addClass([tdEle], DISABLED$1);
-                    if (year < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
-                        || year > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
-                        addClass([tdEle], DISABLED$1);
-                    }
                 }
                 else if (!isNullOrUndefined(value) &&
                     (this.getIslamicDate(localDate)).year ===
@@ -2925,6 +2965,9 @@ class Islamic {
                     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);
             }
         }
@@ -3147,6 +3190,9 @@ let DatePicker = class DatePicker extends Calendar {
         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);
     }
@@ -3491,7 +3537,9 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     unBindEvents() {
-        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);
@@ -3622,10 +3670,10 @@ let DatePicker = class DatePicker extends Calendar {
     updateHtmlAttributeToWrapper() {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
-                if (!isNullOrUndefined(this.htmlAttributes[key])) {
+                if (!isNullOrUndefined(this.htmlAttributes[`${key}`])) {
                     if (containerAttr.indexOf(key) > -1) {
                         if (key === 'class') {
-                            const updatedClassValues = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                            const updatedClassValues = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                             if (updatedClassValues !== '') {
                                 addClass([this.inputWrapper.container], updatedClassValues.split(' '));
                             }
@@ -3634,19 +3682,19 @@ let DatePicker = class DatePicker extends Calendar {
                             let 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}`]);
                         }
                     }
                 }
@@ -3657,7 +3705,7 @@ let DatePicker = class DatePicker extends Calendar {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (containerAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -3769,12 +3817,12 @@ let DatePicker = class DatePicker extends Calendar {
         this.isPopupClicked = false;
     }
     documentHandler(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();
         }
         const 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);
@@ -3938,7 +3986,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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') {
@@ -4410,7 +4458,9 @@ let DatePicker = class DatePicker extends Calendar {
     destroy() {
         this.unBindEvents();
         super.destroy();
-        this.keyboardModules.destroy();
+        if (!isNullOrUndefined(this.keyboardModules)) {
+            this.keyboardModules.destroy();
+        }
         if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
             super.destroy();
         }
@@ -4440,15 +4490,21 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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;
     }
     ensureInputAttribute() {
         const prop = [];
@@ -4904,7 +4960,7 @@ let DatePicker = class DatePicker extends Calendar {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -5123,7 +5179,6 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.invalidValueString = null;
         this.isAngular = false;
         this.preventChange = false;
-        this.isPropChanged = false;
         this.dateRangeOptions = options;
     }
     /**
@@ -5145,6 +5200,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         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();
     }
     /**
@@ -5352,8 +5410,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         for (const pro of Object.keys(attributes$$1)) {
             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}`]);
             }
         }
     }
@@ -5400,19 +5458,19 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        const updatedClassValue = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -5422,7 +5480,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttr.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -6055,7 +6113,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         return ele;
     }
     navInCalendar(e, isLeftCalendar, leftLimit, rightLimit, ele) {
-        const view = this.getViewNumber(this.currentView());
+        let view = this.getViewNumber(this.currentView());
         let date;
         const min = this.min;
         let max;
@@ -6145,10 +6203,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             case 'tab':
                 if (this.tabKeyValidation(ele, LEFTCALENDER)) {
                     ele = this.keyCalendarUpdate(false, ele, false);
-                    const 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);
                 }
@@ -6156,10 +6212,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             case 'shiftTab':
                 if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
                     ele = this.keyCalendarUpdate(true, ele, false);
-                    const 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);
                 }
@@ -6167,7 +6220,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     firstCellToFocus(calendar) {
-        const focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        const 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)');
         const focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
         const currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
         const focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
@@ -6394,7 +6447,11 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const leftHeader = this.leftCalendar.querySelector('.e-header');
         const isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
         const isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
-        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+        const isRightYear = rightHeader ? rightHeader.classList.contains('e-year') : false;
+        const isLeftYear = leftHeader ? leftHeader.classList.contains('e-year') : false;
+        const isRightDecade = rightHeader ? rightHeader.classList.contains('e-decade') : false;
+        const isLeftDecade = leftHeader ? leftHeader.classList.contains('e-decade') : false;
+        return isLeftCalendar && (isLeftMonth || isLeftYear || isLeftDecade) && (isRightMonth || isRightYear || isRightDecade) && !this.isMobile;
     }
     keyNavigation(calendar, e) {
         this.bindCalendarCellEvents(calendar);
@@ -8755,6 +8812,30 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             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;
     }
     ensureInputAttribute() {
         const attr = [];
@@ -9067,6 +9148,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const format = { format: this.formatString, type: 'date', skeleton: 'yMd' };
         for (const prop of Object.keys(newProp)) {
             const openPopup = ['maxDays', 'minDays', 'value'];
+            if (openPopup.indexOf(prop) < 0) {
+                this.hide(null);
+            }
             switch (prop) {
                 case 'width':
                     this.setEleWidth(this.width);
@@ -9276,13 +9360,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     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;
         }
     }
 };
@@ -9590,6 +9668,9 @@ let TimePicker = class TimePicker extends Component {
         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();
     }
     setTimeAllowEdit() {
@@ -9874,6 +9955,11 @@ let TimePicker = class TimePicker extends Component {
         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;
     }
     ensureInputAttribute() {
         const propertyList = [];
@@ -9985,19 +10071,19 @@ let TimePicker = class TimePicker extends Component {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(key) > -1) {
                     if (key === 'class') {
-                        const updatedClassesValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        const updatedClassesValue = (this.htmlAttributes[`${key}`].replace(/\s+/g, ' ')).trim();
                         if (updatedClassesValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         let 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}`]);
                     }
                 }
             }
@@ -10007,7 +10093,7 @@ let TimePicker = class TimePicker extends Component {
         if (!isNullOrUndefined(this.htmlAttributes)) {
             for (const key of Object.keys(this.htmlAttributes)) {
                 if (wrapperAttributes.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes[`${key}`]);
                 }
             }
         }
@@ -10720,7 +10806,7 @@ let TimePicker = class TimePicker extends Component {
             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) {
@@ -11082,7 +11168,7 @@ let TimePicker = class TimePicker extends Component {
         return elementIndex;
     }
     keyHandler(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;
         }
         const count = this.timeCollections.length;
@@ -11329,7 +11415,7 @@ let TimePicker = class TimePicker extends Component {
     }
     documentClickHandler(event) {
         const 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();
         }
@@ -12049,6 +12135,14 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             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.destroy();
     }
     /**
@@ -12077,6 +12171,9 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         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.updateHtmlAttributeToElement();
         this.checkAttributes(false);
         const localeText = { placeholder: this.placeholder };
@@ -12465,7 +12562,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             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();
@@ -13339,7 +13436,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     super.onPropertyChanged(newProp, oldProp);
                     break;
             }
-            if (!this.isDynamicValueChanged && !this.isIconClicked) {
+            if (!this.isDynamicValueChanged) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -13649,6 +13746,10 @@ class MaskedDateTime {
         }
         if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {
             let start = this.parent.inputElement.selectionStart;
+            let formatText = '';
+            if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+                formatText = this.hiddenMask[start];
+            }
             this.dateAlteration(args.e.key === ARROWDOWN ? true : false);
             let inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
             this.isHiddenMask = true;
@@ -13657,6 +13758,12 @@ class MaskedDateTime {
             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();
         }
@@ -14050,6 +14157,10 @@ class MaskedDateTime {
     maskInputHandler() {
         let start = this.parent.inputElement.selectionStart;
         let selectionChar = this.previousHiddenMask[start - 1];
+        let formatText = '';
+        if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+            formatText = this.hiddenMask[start];
+        }
         let inputValue;
         this.differenceCheck();
         inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
@@ -14060,6 +14171,13 @@ class MaskedDateTime {
         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) {
@@ -14067,6 +14185,9 @@ class MaskedDateTime {
             this.isNavigate = this.isDeletion = false;
             this.navigateSelection(isbackward);
         }
+        if (this.isDeleteKey) {
+            this.isDeletion = false;
+        }
         this.isDeleteKey = false;
         // this.setSelection(selectionChar);
         // this.navigateSelection(inputValue);