@syncfusion/ej2-calendars 20.2.46 → 20.3.47

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

@@ -69,6 +69,7 @@ let CalendarBase = class CalendarBase extends Component {
         this.isTodayClicked = false;
         this.preventChange = false;
         this.isAngular = false;
+        this.previousDates = false;
     }
     /**
      * To Initialize the control rendering.
@@ -117,7 +118,7 @@ let CalendarBase = class CalendarBase extends Component {
                 this.calendarElement.classList.add(DEVICE);
             }
             attributes(this.calendarElement, {
-                'role': 'calendar'
+                'data-role': 'calendar'
             });
         }
         this.createHeader();
@@ -245,7 +246,7 @@ let CalendarBase = class CalendarBase extends Component {
     }
     createContent() {
         this.contentElement = this.createElement('div', { className: CONTENT });
-        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });
+        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
         if (this.getModuleName() === 'calendar') {
             this.element.appendChild(this.contentElement);
         }
@@ -634,7 +635,7 @@ let CalendarBase = class CalendarBase extends Component {
         const numCells = this.weekNumber ? 8 : 7;
         let tdEles;
         if (this.calendarMode === 'Gregorian') {
-            tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate);
+            tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate, e);
         }
         else {
             tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);
@@ -647,7 +648,7 @@ let CalendarBase = class CalendarBase extends Component {
             this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);
         }
     }
-    renderDays(currentDate, value, multiSelection, values, isTodayDate) {
+    renderDays(currentDate, value, multiSelection, values, isTodayDate, e) {
         const tdEles = [];
         const cellsCount = 42;
         const todayDate = isTodayDate ? new Date(+currentDate) : this.getDate(new Date(), this.timezone);
@@ -738,6 +739,10 @@ let CalendarBase = class CalendarBase extends Component {
             // if (args.isDisabled && +this.value === +args.date) {
             //     this.setProperties({ value: null }, true);
             // }
+            let currentTarget;
+            if (!isNullOrUndefined(e) && e.type == 'click') {
+                currentTarget = e.currentTarget;
+            }
             if (multiSelection && !isNullOrUndefined(values) && !disabledCls) {
                 for (let tempValue = 0; tempValue < values.length; tempValue++) {
                     const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
@@ -748,6 +753,22 @@ let CalendarBase = class CalendarBase extends Component {
                         || (this.getDateVal(localDate, value))) {
                         addClass([tdEle], SELECTED);
                     }
+                    if (!isNullOrUndefined(currentTarget) && currentTarget.innerText === tdEle.innerText && this.previousDates && currentTarget.classList.contains(SELECTED)) {
+                        removeClass([tdEle], SELECTED);
+                        this.previousDates = false;
+                        const copyValues = this.copyValues(values);
+                        for (let i = 0; i < copyValues.length; i++) {
+                            const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
+                            const formatOptions = { format: null, type: 'date', skeleton: 'short', calendar: type };
+                            const localDateString = this.globalize.formatDate(date, formatOptions);
+                            const tempDateString = this.globalize.formatDate(copyValues[i], formatOptions);
+                            if (localDateString === tempDateString) {
+                                const index = copyValues.indexOf(copyValues[i]);
+                                copyValues.splice(index, 1);
+                            }
+                        }
+                        this.setProperties({ values: copyValues }, true);
+                    }
                     else {
                         this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
                     }
@@ -855,7 +876,6 @@ let CalendarBase = class CalendarBase extends Component {
             const year = startYear + rowIterator;
             localDate.setFullYear(year);
             const tdEle = this.dayCell(localDate);
-            attributes(tdEle, { 'role': 'gridcell' });
             const dayLink = this.createElement('span');
             dayLink.textContent = this.globalize.formatDate(localDate, {
                 format: null, type: 'dateTime', skeleton: 'y'
@@ -896,7 +916,7 @@ let CalendarBase = class CalendarBase extends Component {
         const date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
         const value = date.valueOf();
         const attrs = {
-            className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }
+            className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false' }
         };
         return this.createElement('td', attrs);
     }
@@ -970,7 +990,7 @@ let CalendarBase = class CalendarBase extends Component {
         let row = count;
         let rowIterator = 0;
         for (let dayCell = 0; dayCell < elements.length / count; ++dayCell) {
-            trEle = this.createElement('tr', { attrs: { 'role': 'row' } });
+            trEle = this.createElement('tr');
             for (rowIterator = 0 + rowIterator; rowIterator < row; rowIterator++) {
                 if (!elements[rowIterator].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowIterator].children[0])) {
                     addClass([elements[rowIterator].children[0]], [LINK]);
@@ -2186,8 +2206,8 @@ let Calendar = class Calendar extends CalendarBase {
     renderMonths(e, value, isCustomDate) {
         super.renderMonths(e, this.value, isCustomDate);
     }
-    renderDays(currentDate, value, isMultiSelect, values, isCustomDate) {
-        const tempDays = super.renderDays(currentDate, this.value, this.isMultiSelection, this.values, isCustomDate);
+    renderDays(currentDate, value, isMultiSelect, values, isCustomDate, e) {
+        const tempDays = super.renderDays(currentDate, this.value, this.isMultiSelection, this.values, isCustomDate, e);
         if (this.isMultiSelection) {
             super.validateValues(this.isMultiSelection, this.values);
         }
@@ -2225,9 +2245,14 @@ let Calendar = class Calendar extends CalendarBase {
         if (eve.classList.contains(OTHERMONTH)) {
             if (this.isMultiSelection) {
                 const copyValues = this.copyValues(this.values);
-                copyValues.push(this.getIdValue(e, null));
-                this.setProperties({ values: copyValues }, true);
-                this.setProperties({ value: this.values[this.values.length - 1] }, true);
+                if (copyValues.toString().indexOf(this.getIdValue(e, null).toString()) === -1) {
+                    copyValues.push(this.getIdValue(e, null));
+                    this.setProperties({ values: copyValues }, true);
+                    this.setProperties({ value: this.values[this.values.length - 1] }, true);
+                }
+                else {
+                    this.previousDates = true;
+                }
             }
             else {
                 this.setProperties({ value: this.getIdValue(e, null) }, true);
@@ -2876,14 +2901,14 @@ class Islamic {
                 dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'y', calendar: 'islamic' });
                 if (islamicDate.year === parseInt(startHdrYr) - 1 || (year < startFullYr) || (year > endFullYr) && islamicDate.year !== parseInt(endHdrYr)) {
                     addClass([tdEle], OTHERMONTH$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 (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 ===
@@ -3117,6 +3142,10 @@ let DatePicker = class DatePicker extends Calendar {
     render() {
         this.initialize();
         this.bindEvents();
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        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');
+        }
         this.renderComplete();
         this.setTimeZone(this.serverTimezoneOffset);
     }
@@ -3180,10 +3209,9 @@ let DatePicker = class DatePicker extends Calendar {
     }
     createInput() {
         const ariaAttrs = {
-            'aria-live': 'assertive', 'aria-atomic': 'true',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
+            'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-expanded': 'false',
+            'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',
+            'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
         };
         if (this.getModuleName() === 'datepicker') {
             const l10nLocale = { placeholder: this.placeholder };
@@ -4381,8 +4409,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         const ariaAttrs = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         };
         if (this.inputElement) {
@@ -4706,11 +4733,15 @@ let DatePicker = class DatePicker extends Calendar {
     setAriaAttributes() {
         if (this.isCalendar()) {
             Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
-            attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
+            attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
+            if (this.value) {
+                attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
+            }
         }
         else {
             Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     }
     errorClass() {
@@ -4833,11 +4864,18 @@ let DatePicker = class DatePicker extends Calendar {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                    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');
+                    }
                     break;
                 case 'floatLabelType':
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'enableMask':
                     if (this.enableMask) {
@@ -4859,7 +4897,7 @@ let DatePicker = class DatePicker extends Calendar {
                     }
                     break;
             }
-            if (!this.isDynamicValueChanged) {
+            if (!this.isDynamicValueChanged && !this.isIconClicked) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;
@@ -5078,6 +5116,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.invalidValueString = null;
         this.isAngular = false;
         this.preventChange = false;
+        this.isPropChanged = false;
         this.dateRangeOptions = options;
     }
     /**
@@ -5095,6 +5134,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        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');
+        }
         this.renderComplete();
     }
     /**
@@ -7240,7 +7283,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.enableRtl) {
             this.calendarElement.classList.add(RTL$1);
         }
-        attributes(this.calendarElement, { 'role': 'calendar' });
+        attributes(this.calendarElement, { 'data-role': 'calendar' });
         super.createHeader();
         super.createContent();
     }
@@ -7798,7 +7841,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });
             const listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);
-            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });
+            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
             this.presetElement.appendChild(listTag);
             this.popupWrapper.appendChild(this.presetElement);
             const customElement = this.presetElement.querySelector('#custom_range');
@@ -7858,7 +7901,13 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             enableRtl: this.enableRtl,
             zIndex: this.zIndex,
             open: () => {
-                attributes(this.inputElement, { 'aria-expanded': 'true' });
+                attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
+                if (this.value) {
+                    attributes(this.inputElement, { 'aria-activedescendant': this.inputElement.id });
+                }
+                else {
+                    this.inputElement.removeAttribute('aria-activedescendant');
+                }
                 addClass([this.inputWrapper.buttons[0]], ACTIVE$1);
                 if (!this.isMobile) {
                     if (this.cancelButton) {
@@ -7906,6 +7955,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             },
             close: () => {
                 attributes(this.inputElement, { 'aria-expanded': 'false' });
+                this.inputElement.removeAttribute('aria-owns');
+                this.inputElement.removeAttribute('aria-activedescendant');
                 removeClass([this.inputWrapper.buttons[0]], ACTIVE$1);
                 if (this.isRangeIconClicked) {
                     this.inputWrapper.container.children[1].focus();
@@ -8172,7 +8223,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         const target = e.target;
         if (!this.inputWrapper.container.contains(target) ||
-            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]') && e.type === 'mousedown')) {
+            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]') && e.type !== 'mousedown')) {
             if (e.type !== 'touchstart' && ((e.type === 'mousedown') ||
                 this.closeEventArgs && !this.closeEventArgs.cancel)) {
                 e.preventDefault();
@@ -8211,9 +8262,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             buttons: [DATERANGEICON]
         }, this.createElement);
         attributes(this.inputElement, {
-            'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',
-            'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',
-            'role': 'combobox', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
+            'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',
+            'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         });
         Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
@@ -8644,9 +8694,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.unBindEvents();
         this.hide(null);
         const ariaAttrs = {
-            'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',
-            'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',
-            'role': 'combobox', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
+            'tabindex': '0', 'aria-expanded': 'false', 'role': 'combobox',
+            'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'aria-invalid': 'false', 'spellcheck': 'false'
         };
         if (this.inputElement) {
@@ -9002,12 +9051,13 @@ 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);
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                    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');
+                    }
                     break;
                 case 'separator':
                     this.previousEleValue = this.inputElement.value;
@@ -9021,7 +9071,6 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement);
-                    this.inputElement.setAttribute('aria-readonly', '' + this.readonly);
                     this.setRangeAllowEdit();
                     break;
                 case 'cssClass':
@@ -9199,6 +9248,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'start':
                     this.setProperties({ start: newProp.start }, true);
@@ -9208,7 +9260,13 @@ 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;
         }
     }
 };
@@ -9513,6 +9571,9 @@ let TimePicker = class TimePicker extends Component {
         this.anchor = this.inputElement;
         this.inputElement.setAttribute('value', this.inputElement.value);
         this.inputEleValue = this.getDateObject(this.inputElement.value);
+        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');
+        }
         this.renderComplete();
     }
     setTimeAllowEdit() {
@@ -9658,9 +9719,10 @@ let TimePicker = class TimePicker extends Component {
         }, this.createElement);
         this.inputWrapper.container.style.width = this.setWidth(this.width);
         attributes(this.inputElement, {
-            'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'
+            'aria-autocomplete': 'list', 'tabindex': '0',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
+            'aria-disabled': 'false', 'aria-invalid': 'false'
         });
         if (!this.isNullOrEmpty(this.inputStyle)) {
             Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);
@@ -9761,9 +9823,10 @@ let TimePicker = class TimePicker extends Component {
         this.hide();
         this.unBindEvents();
         const ariaAttribute = {
-            'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'
+            'aria-autocomplete': 'list', 'tabindex': '0',
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
+            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
+            'aria-disabled': 'true', 'aria-invalid': 'false'
         };
         if (this.inputElement) {
             Input.removeAttributes(ariaAttribute, this.inputElement);
@@ -9863,7 +9926,7 @@ let TimePicker = class TimePicker extends Component {
             }, close: () => {
                 removeClass([this.inputWrapper.buttons[0]], SELECTED$4);
                 this.unWireListEvents();
-                this.inputElement.setAttribute('aria-activedescendant', 'null');
+                this.inputElement.removeAttribute('aria-activedescendant');
                 remove(this.popupObj.element);
                 this.popupObj.destroy();
                 this.popupWrapper.innerHTML = '';
@@ -10352,6 +10415,8 @@ let TimePicker = class TimePicker extends Component {
                     this.popupObj.hide(new Animation(animModel));
                     removeClass([this.inputWrapper.container], [ICONANIMATION]);
                     attributes(this.inputElement, { 'aria-expanded': 'false' });
+                    this.inputElement.removeAttribute('aria-owns');
+                    this.inputElement.removeAttribute('aria-activedescendant');
                     EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
                 }
                 if (Browser.isDevice && this.modal) {
@@ -11114,11 +11179,11 @@ let TimePicker = class TimePicker extends Component {
         this.clearIconState();
     }
     setActiveDescendant() {
-        if (!isNullOrUndefined(this.selectedElement)) {
+        if (!isNullOrUndefined(this.selectedElement) && this.value) {
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });
         }
         else {
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     }
     removeSelection() {
@@ -11207,7 +11272,7 @@ let TimePicker = class TimePicker extends Component {
         return value;
     }
     createListItems() {
-        this.listWrapper = this.createElement('div', { className: CONTENT$2, attrs: { 'tabindex': '0' } });
+        this.listWrapper = this.createElement('div', { className: CONTENT$2, attrs: { 'tabindex': '-1' } });
         let start;
         const interval = this.step * 60000;
         const listItems = [];
@@ -11237,7 +11302,7 @@ let TimePicker = class TimePicker extends Component {
             }
         };
         this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);
-        attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });
+        attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
         append([this.listTag], this.listWrapper);
     }
     documentClickHandler(event) {
@@ -11449,6 +11514,7 @@ let TimePicker = class TimePicker extends Component {
                     }
                     this.setActiveDescendant();
                     attributes(this.inputElement, { 'aria-expanded': 'true' });
+                    attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
                     addClass([this.inputWrapper.container], FOCUS);
                     EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);
                     this.setOverlayIndex(this.mobileTimePopupWrap, this.popupObj.element, this.modal, Browser.isDevice);
@@ -11561,7 +11627,6 @@ let TimePicker = class TimePicker extends Component {
             switch (prop) {
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
-                    this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);
@@ -11616,6 +11681,10 @@ let TimePicker = class TimePicker extends Component {
                 case 'width':
                     setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });
                     this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                    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');
+                    }
                     break;
                 case 'format':
                     this.setProperties({ format: newProp.format }, true);
@@ -11666,6 +11735,9 @@ let TimePicker = class TimePicker extends Component {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'strictMode':
                     this.invalidValueString = null;
@@ -11941,13 +12013,11 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
         const ariaAttribute = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',
-            'aria-haspopup': 'true', 'aria-activedescendant': 'null',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',
-            'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'
+            'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'
         };
         if (this.inputElement) {
             Input.removeAttributes(ariaAttribute, this.inputElement);
-            this.inputElement.removeAttribute('aria-placeholder');
         }
         if (this.isCalendar()) {
             if (this.popupWrapper) {
@@ -12012,6 +12082,10 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 this.inputElement.tabIndex = -1;
             }
         }
+        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        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-date-time-icon');
+        }
         this.renderComplete();
     }
     setValue() {
@@ -12357,6 +12431,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 }
                 addClass([this.inputWrapper.container], [ICONANIMATION$1]);
                 attributes(this.inputElement, { 'aria-expanded': 'true' });
+                attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
                 EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);
             }
         });
@@ -12420,7 +12495,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             }, close: () => {
                 removeClass([this.timeIcon], ACTIVE$2);
                 this.unWireTimeListEvents();
-                this.inputElement.setAttribute('aria-activedescendant', 'null');
+                this.inputElement.removeAttribute('aria-activedescendant');
                 remove(this.popupObject.element);
                 this.popupObject.destroy();
                 this.dateTimeWrapper.innerHTML = '';
@@ -12636,11 +12711,11 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
     }
     setTimeActiveDescendant() {
-        if (!isNullOrUndefined(this.selectedElement)) {
+        if (!isNullOrUndefined(this.selectedElement) && this.value) {
             attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });
         }
         else {
-            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
+            this.inputElement.removeAttribute('aria-activedescendant');
         }
     }
     addTimeSelection() {
@@ -12798,6 +12873,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             this.popupObject.hide(new Animation(animModel));
             this.inputWrapper.container.classList.remove(ICONANIMATION$1);
             attributes(this.inputElement, { 'aria-expanded': 'false' });
+            this.inputElement.removeAttribute('aria-owns');
             EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
         }
     }
@@ -13183,7 +13259,6 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
-                    this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);
                     break;
                 case 'enabled':
                     Input.setEnabled(this.enabled, this.inputElement);
@@ -13197,6 +13272,10 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+                    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-date-time-icon');
+                    }
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement);
@@ -13205,6 +13284,9 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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-date-time-icon');
+                    }
                     break;
                 case 'scrollTo':
                     if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {
@@ -13235,7 +13317,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     super.onPropertyChanged(newProp, oldProp);
                     break;
             }
-            if (!this.isDynamicValueChanged) {
+            if (!this.isDynamicValueChanged && !this.isIconClicked) {
                 this.hide(null);
             }
             this.isDynamicValueChanged = false;