@syncfusion/ej2-calendars 35.1.41 → 35.1.43

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

@@ -2327,6 +2327,12 @@ let Calendar = class Calendar extends CalendarBase {
         else {
             tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0, 0);
         }
+        if (+tempValue < +this.min) {
+            tempValue = new Date(+this.min);
+        }
+        else if (+tempValue > +this.max) {
+            tempValue = new Date(+this.max);
+        }
         return tempValue;
     }
     todayButtonClick(e) {
@@ -3433,7 +3439,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.setAllowEdit();
         if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {
             this.updateInput(true);
-            this.updateInputValue(this.maskedDateValue);
+            this.setMaskedInputValue();
         }
         else if (!this.enableMask) {
             this.updateInput(true);
@@ -3553,7 +3559,7 @@ let DatePicker = class DatePicker extends Calendar {
                 this.updateInputValue('');
             }
             else {
-                this.updateInputValue(this.maskedDateValue);
+                this.setMaskedInputValue();
                 this.notify('createMask', {
                     module: 'MaskedDateTime'
                 });
@@ -3845,6 +3851,31 @@ let DatePicker = class DatePicker extends Calendar {
     updateInputValue(value) {
         Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);
     }
+    isMaskPlaceholderSwap() {
+        return this.getModuleName() === 'datepicker' && this.enableMask && this.strictMode
+            && (!this.placeholder || this.floatLabelType === 'Always') && !!this.maskedDateValue
+            && !this.value && !isNullOrUndefined(this.inputElement) && !isNullOrUndefined(closest(this.inputElement, 'form'));
+    }
+    setMaskedInputValue() {
+        if (this.isMaskPlaceholderSwap() && (this.isBlur || document.activeElement !== this.inputElement)) {
+            this.swapMaskPlaceholder(false);
+        }
+        else {
+            this.updateInputValue(this.maskedDateValue);
+        }
+    }
+    swapMaskPlaceholder(toValue) {
+        if (toValue) {
+            this.updateInputValue(this.maskedDateValue);
+            if (this.inputElement.hasAttribute('placeholder')) {
+                this.inputElement.removeAttribute('placeholder');
+            }
+        }
+        else {
+            this.updateInputValue('');
+            this.inputElement.setAttribute('placeholder', this.maskedDateValue);
+        }
+    }
     windowResize() {
         this.updateFloatLabelOverflowWidth(true);
     }
@@ -3979,7 +4010,10 @@ let DatePicker = class DatePicker extends Calendar {
         if (this.initTimeZone !== new Date().getTimezoneOffset()) {
             this.strictModeUpdate(true);
         }
-        if (this.enableMask && !this.inputElement.value && this.placeholder) {
+        if (this.isMaskPlaceholderSwap() && (!this.inputElement.value || this.inputElement.value === this.maskedDateValue)) {
+            this.swapMaskPlaceholder(true);
+        }
+        else if (this.enableMask && !this.inputElement.value && this.placeholder) {
             if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
                 this.updateInputValue(this.maskedDateValue);
                 this.inputElement.selectionStart = 0;
@@ -4030,7 +4064,10 @@ let DatePicker = class DatePicker extends Calendar {
         this.isBlur = false;
         this.popupUpdate();
         this.changeTrigger(e);
-        if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {
+        if (this.isMaskPlaceholderSwap() && (!this.inputElement.value || this.inputElement.value === this.maskedDateValue)) {
+            this.swapMaskPlaceholder(false);
+        }
+        else if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {
             if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {
                 this.updateInputValue('');
             }
@@ -5285,7 +5322,7 @@ let DatePicker = class DatePicker extends Calendar {
         if (!this.popupObj) {
             this.updateInputValue(inputVal);
             if (this.enableMask) {
-                this.updateInputValue(this.maskedDateValue);
+                this.setMaskedInputValue();
                 this.notify('createMask', {
                     module: 'MaskedDateTime', isBlur: isBlur
                 });
@@ -5357,7 +5394,7 @@ let DatePicker = class DatePicker extends Calendar {
                     this.previousElementValue = this.inputElement.value;
                     if (isNullOrUndefined(this.value)) {
                         if (this.enableMask) {
-                            this.updateInputValue(this.maskedDateValue);
+                            this.setMaskedInputValue();
                         }
                         else {
                             this.updateInputValue('');
@@ -5469,13 +5506,21 @@ let DatePicker = class DatePicker extends Calendar {
                         this.notify('createMask', {
                             module: 'MaskedDateTime'
                         });
-                        this.updateInputValue(this.maskedDateValue);
+                        if (this.isMaskPlaceholderSwap() && document.activeElement !== this.inputElement) {
+                            this.swapMaskPlaceholder(false);
+                        }
+                        else {
+                            this.updateInputValue(this.maskedDateValue);
+                        }
                         this.bindInputEvent();
                     }
                     else {
                         if (this.inputElement.value === this.maskedDateValue) {
                             this.updateInputValue('');
                         }
+                        if (!this.placeholder && this.inputElement.hasAttribute('placeholder') && this.inputElement.getAttribute('placeholder') === this.maskedDateValue) {
+                            this.inputElement.removeAttribute('placeholder');
+                        }
                     }
                     break;
                 case 'min':