@syncfusion/ej2-calendars 20.2.46 → 20.2.50

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.
@@ -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);
                     }
@@ -2186,8 +2207,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 +2246,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);
@@ -3117,6 +3143,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);
     }
@@ -4833,11 +4863,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) {
@@ -5095,6 +5132,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();
     }
     /**
@@ -9008,6 +9049,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             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;
@@ -9199,6 +9244,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);
@@ -9513,6 +9561,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() {
@@ -11616,6 +11667,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 +11721,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;
@@ -12012,6 +12070,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() {
@@ -13197,6 +13259,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 +13271,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)))) {