@syncfusion/ej2-calendars 19.2.62 → 19.3.53

package/src/datepicker/datepicker.js

@@ -19,9 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../calendar/calendar-model.d.ts'/>
-import { EventHandler, Property, Internationalization, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';
+import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Animation, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';
-import { detach, addClass, removeClass, closest, attributes, select } from '@syncfusion/ej2-base';
+import { detach, addClass, removeClass, closest, attributes } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
@@ -77,7 +77,6 @@ var DatePicker = /** @class */ (function (_super) {
         _this.isDateIconClicked = false;
         _this.isAltKeyPressed = false;
         _this.isInteracted = true;
-        _this.isBlazorServer = false;
         _this.invalidValueString = null;
         _this.checkPreviousValue = null;
         _this.maskedDateValue = '';
@@ -99,9 +98,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.initialize();
         this.bindEvents();
         this.renderComplete();
-        if (!this.isBlazorServer) {
-            this.setTimeZone(this.serverTimezoneOffset);
-        }
+        this.setTimeZone(this.serverTimezoneOffset);
     };
     DatePicker.prototype.setTimeZone = function (offsetValue) {
         if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
@@ -143,36 +140,18 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.initialize = function () {
-        if (!this.isBlazorServer) {
-            if (this.enableMask) {
-                this.notify("createMask", {
-                    module: "MaskedDateTime",
-                });
-            }
-            this.checkInvalidValue(this.value);
-            this.createInput();
-            this.updateHtmlAttributeToWrapper();
-            this.setAllowEdit();
-            this.updateInput();
-            if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {
-                this.updateInputValue(this.maskedDateValue);
-            }
-        }
-        else {
-            var parentElement = this.element.parentElement;
-            this.inputWrapper = {
-                container: parentElement,
-                clearButton: parentElement.querySelector('.' + CLEARICON),
-                buttons: [parentElement.querySelector('.' + DATEICON)]
-            };
-            Input.bindInitialEvent({
-                element: this.inputElement,
-                floatLabelType: this.floatLabelType
+        if (this.enableMask) {
+            this.notify("createMask", {
+                module: "MaskedDateTime",
             });
-            if (this.showClearButton && this.inputWrapper.clearButton) {
-                Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);
-            }
-            this.setAllowEdit();
+        }
+        this.checkInvalidValue(this.value);
+        this.createInput();
+        this.updateHtmlAttributeToWrapper();
+        this.setAllowEdit();
+        this.updateInput();
+        if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {
+            this.updateInputValue(this.maskedDateValue);
         }
         this.previousElementValue = this.inputElement.value;
         this.previousDate = !isNullOrUndefined(this.value) ? new Date(+this.value) : null;
@@ -234,9 +213,7 @@ var DatePicker = /** @class */ (function (_super) {
         if (isDynamic === void 0) { isDynamic = false; }
         var formatOptions;
         if (this.value && !this.isCalendar() && !isDynamic) {
-            if (!this.isBlazorServer) {
-                this.disabledDates();
-            }
+            this.disabledDates();
         }
         if (isNaN(+new Date(this.checkValue(this.value)))) {
             this.setProperties({ value: null }, true);
@@ -254,7 +231,7 @@ var DatePicker = /** @class */ (function (_super) {
             if (this.getModuleName() === 'datetimepicker') {
                 if (this.calendarMode === 'Gregorian') {
                     dateString = this.globalize.formatDate(this.value, {
-                        format: tempFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                        format: tempFormat, type: 'dateTime', skeleton: 'yMd'
                     });
                 }
                 else {
@@ -265,7 +242,7 @@ var DatePicker = /** @class */ (function (_super) {
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
                 }
                 else {
                     formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -319,8 +296,8 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.getModuleName() === 'datetimepicker') {
             var culture = new Internationalization(this.locale);
             if (this.calendarMode === 'Gregorian') {
-                formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
-                formatDateTime = { format: culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' }), type: 'dateTime' };
+                formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };
+                formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };
             }
             else {
                 formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -329,7 +306,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         else {
             if (this.calendarMode === 'Gregorian') {
-                formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
             }
             else {
                 formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -353,8 +330,8 @@ var DatePicker = /** @class */ (function (_super) {
             if (this.getModuleName() === 'datetimepicker') {
                 var culture = new Internationalization(this.locale);
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
-                    formatDateTime = { format: culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' }), type: 'dateTime' };
+                    formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };
+                    formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };
                 }
                 else {
                     formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -364,7 +341,7 @@ var DatePicker = /** @class */ (function (_super) {
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
                 }
                 else {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -419,7 +396,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.bindEvents = function () {
-        EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.dateIconHandler), this);
+        EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler, this);
         EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);
         EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
         EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
@@ -429,7 +406,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.bindInputEvent();
         // To prevent the twice triggering.
         EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
-        if (this.showClearButton && (this.inputWrapper.clearButton || (this.isBlazorServer))) {
+        if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
         }
         if (this.formElement) {
@@ -466,7 +443,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.unBindEvents = function () {
-        EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.dateIconHandler));
+        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);
@@ -474,7 +451,7 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.enableMask) {
             EventHandler.remove(this.inputElement, 'keydown', this.keydownHandler);
         }
-        if (this.showClearButton && (this.inputWrapper.clearButton || (this.isBlazorServer))) {
+        if (this.showClearButton && this.inputWrapper.clearButton) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
         }
         if (this.formElement) {
@@ -492,13 +469,11 @@ var DatePicker = /** @class */ (function (_super) {
                 this.inputValueCopy = null;
                 this.inputElement.setAttribute('value', '');
             }
-            if (!this.isBlazorServer) {
-                this.setProperties({ value: this.inputValueCopy }, true);
-                this.restoreValue();
-                if (this.inputElement) {
-                    this.updateInputValue(value);
-                    this.errorClass();
-                }
+            this.setProperties({ value: this.inputValueCopy }, true);
+            this.restoreValue();
+            if (this.inputElement) {
+                this.updateInputValue(value);
+                this.errorClass();
             }
         }
     };
@@ -507,7 +482,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.previousDate = this.value;
         this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :
             this.globalize.formatDate(this.inputValueCopy, {
-                format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                format: this.formatString, type: 'dateTime', skeleton: 'yMd'
             });
     };
     DatePicker.prototype.inputChangeHandler = function (e) {
@@ -537,9 +512,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.clear = function (event) {
-        if (!this.isBlazorServer) {
-            this.setProperties({ value: null }, true);
-        }
+        this.setProperties({ value: null }, true);
         if (!this.enableMask) {
             this.updateInputValue('');
         }
@@ -548,19 +521,13 @@ var DatePicker = /** @class */ (function (_super) {
         };
         this.trigger('cleared', clearedArgs);
         this.invalidValueString = '';
-        if (!this.isBlazorServer) {
-            this.updateInput();
-            this.popupUpdate();
-            this.changeEvent(event);
-            if (this.enableMask) {
-                this.notify("clearHandler", {
-                    module: "MaskedDateTime"
-                });
-            }
-        }
-        if (this.isBlazorServer) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.interopAdaptor.invokeMethodAsync('OnValueCleared');
+        this.updateInput();
+        this.popupUpdate();
+        this.changeEvent(event);
+        if (this.enableMask) {
+            this.notify("clearHandler", {
+                module: "MaskedDateTime"
+            });
         }
     };
     DatePicker.prototype.preventEventBubbling = function (e) {
@@ -580,24 +547,20 @@ var DatePicker = /** @class */ (function (_super) {
             this.inputElement.setAttribute('readonly', '');
             this.inputElement.blur();
         }
-        if (!this.isBlazorServer) {
-            e.preventDefault();
-        }
+        e.preventDefault();
         if (!this.readonly) {
-            if (this.isCalendar() && !this.isBlazorServer) {
+            if (this.isCalendar()) {
                 this.hide(e);
             }
             else {
-                if (!this.isBlazorServer || (this.isBlazorServer && this.inputWrapper.container.nextElementSibling)) {
-                    this.isDateIconClicked = true;
-                    this.show(null, e);
-                    if (this.getModuleName() === 'datetimepicker') {
-                        this.inputElement.focus();
-                    }
+                this.isDateIconClicked = true;
+                this.show(null, e);
+                if (this.getModuleName() === 'datetimepicker') {
                     this.inputElement.focus();
-                    addClass([this.inputWrapper.container], [INPUTFOCUS]);
-                    addClass(this.inputWrapper.buttons, ACTIVE);
                 }
+                this.inputElement.focus();
+                addClass([this.inputWrapper.container], [INPUTFOCUS]);
+                addClass(this.inputWrapper.buttons, ACTIVE);
             }
         }
         this.isIconClicked = false;
@@ -698,7 +661,7 @@ var DatePicker = /** @class */ (function (_super) {
             }
         }
         var focusArguments = {
-            model: isBlazor() && this.isServerRendered ? null : this
+            model: this
         };
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
@@ -719,32 +682,26 @@ var DatePicker = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        if (!this.isBlazorServer) {
-            this.strictModeUpdate();
-            if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {
-                this.invalidValueString = null;
+        this.strictModeUpdate();
+        if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {
+            this.invalidValueString = null;
+            this.updateInputValue('');
+        }
+        this.updateInput();
+        this.popupUpdate();
+        this.changeTrigger(e);
+        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('');
             }
-            this.updateInput();
-            this.popupUpdate();
-            this.changeTrigger(e);
-            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('');
-                }
-            }
-            this.errorClass();
-        }
-        else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);
         }
+        this.errorClass();
         if (this.isCalendar() && document.activeElement === this.inputElement) {
             this.hide(e);
         }
         if (this.getModuleName() === 'datepicker') {
             var blurArguments = {
-                model: isBlazor() && this.isServerRendered ? null : this
+                model: this
             };
             this.trigger('blur', blurArguments);
         }
@@ -782,7 +739,7 @@ var DatePicker = /** @class */ (function (_super) {
             else if (closest(target, '.e-footer-container')
                 && target.classList.contains('e-today')
                 && target.classList.contains('e-btn')
-                && (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value) && !this.isBlazorServer)) {
+                && (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value))) {
                 this.hide(e);
             }
         }
@@ -797,40 +754,22 @@ var DatePicker = /** @class */ (function (_super) {
                 break;
             case 'altDownArrow':
                 this.isAltKeyPressed = true;
-                if (!this.isBlazorServer) {
-                    this.strictModeUpdate();
-                    this.updateInput();
-                    this.changeTrigger(e);
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);
-                }
+                this.strictModeUpdate();
+                this.updateInput();
+                this.changeTrigger(e);
                 if (this.getModuleName() === 'datepicker') {
-                    if (!this.isBlazorServer) {
-                        this.show(null, e);
-                    }
-                    else {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);
-                    }
+                    this.show(null, e);
                 }
                 break;
             case 'escape':
                 this.hide(e);
                 break;
             case 'enter':
-                if (!this.isBlazorServer) {
-                    this.strictModeUpdate();
-                    this.updateInput();
-                    this.popupUpdate();
-                    this.changeTrigger(e);
-                    this.errorClass();
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);
-                }
+                this.strictModeUpdate();
+                this.updateInput();
+                this.popupUpdate();
+                this.changeTrigger(e);
+                this.errorClass();
                 if (!this.isCalendar() && document.activeElement === this.inputElement) {
                     this.hide(e);
                 }
@@ -855,17 +794,11 @@ var DatePicker = /** @class */ (function (_super) {
                     start = this.inputElement.selectionStart;
                     end = this.inputElement.selectionEnd;
                 }
-                if (!this.isBlazorServer) {
-                    this.strictModeUpdate();
-                    this.updateInput();
-                    this.popupUpdate();
-                    this.changeTrigger(e);
-                    this.errorClass();
-                }
-                else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    this.interopAdaptor.invokeMethodAsync('OnStrictModeUpdate', this.inputElement.value);
-                }
+                this.strictModeUpdate();
+                this.updateInput();
+                this.popupUpdate();
+                this.changeTrigger(e);
+                this.errorClass();
                 if (this.enableMask) {
                     this.inputElement.selectionStart = start;
                     this.inputElement.selectionEnd = end;
@@ -884,7 +817,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);
         if (this.isCalendar()) {
             _super.prototype.keyActionHandle.call(this, e);
-            if (!this.isBlazorServer && this.isCalendar()) {
+            if (this.isCalendar()) {
                 attributes(this.inputElement, {
                     'aria-activedescendant': '' + this.setActiveDescendant()
                 });
@@ -899,7 +832,7 @@ var DatePicker = /** @class */ (function (_super) {
                     removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [SELECTED]);
                 }
             }
-            if (!isNullOrUndefined(this.value) && !this.isBlazorServer) {
+            if (!isNullOrUndefined(this.value)) {
                 if ((+this.value >= +this.min) && (+this.value <= +this.max)) {
                     var targetdate = new Date(this.checkValue(this.value));
                     _super.prototype.navigateTo.call(this, 'Month', targetdate);
@@ -927,7 +860,7 @@ var DatePicker = /** @class */ (function (_super) {
             if (this.calendarMode === 'Gregorian') {
                 dateOptions = {
                     format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
-                    type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                    type: 'dateTime', skeleton: 'yMd'
                 };
             }
             else {
@@ -939,7 +872,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         else {
             if (this.calendarMode === 'Gregorian') {
-                formatOptions = { format: format, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
             }
             else {
                 formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -956,7 +889,7 @@ var DatePicker = /** @class */ (function (_super) {
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    formatOptions = { type: 'dateTime', skeleton: 'yMd' };
                 }
                 else {
                     formatOptions = { type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -1001,17 +934,9 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.createCalendar = function () {
         var _this = this;
-        if (!this.isBlazorServer) {
-            this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });
-            if (!isNullOrUndefined(this.cssClass)) {
-                this.popupWrapper.className += ' ' + this.cssClass;
-            }
-        }
-        else {
-            this.popupWrapper = this.inputWrapper.container.nextElementSibling;
-            this.calendarElement = this.popupWrapper.firstElementChild;
-            this.tableBodyElement = select('tbody', this.calendarElement);
-            this.contentElement = select('.e-content', this.calendarElement);
+        this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });
+        if (!isNullOrUndefined(this.cssClass)) {
+            this.popupWrapper.className += ' ' + this.cssClass;
         }
         if (Browser.isDevice) {
             this.modelHeader();
@@ -1024,7 +949,7 @@ var DatePicker = /** @class */ (function (_super) {
         //this.calendarElement represent the Calendar object from the Calendar class.
         this.calendarElement.querySelector('table tbody').className = '';
         this.popupObj = new Popup(this.popupWrapper, {
-            content: this.isBlazorServer ? null : this.calendarElement,
+            content: this.calendarElement,
             relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,
             position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },
             offsetY: OFFSETVALUE,
@@ -1053,7 +978,7 @@ var DatePicker = /** @class */ (function (_super) {
                 if (_this.isDateIconClicked) {
                     _this.inputWrapper.container.children[_this.index].focus();
                 }
-                if (_this.value && !_this.isBlazorServer) {
+                if (_this.value) {
                     _this.disabledDates();
                 }
                 if (_this.popupObj) {
@@ -1071,9 +996,7 @@ var DatePicker = /** @class */ (function (_super) {
                 }
             }
         });
-        if (!this.isBlazorServer) {
-            this.popupObj.element.className += ' ' + this.cssClass;
-        }
+        this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     };
     DatePicker.prototype.setAriaDisabled = function () {
@@ -1186,7 +1109,7 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.value) {
             if (this.getModuleName() === 'datetimepicker') {
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { format: tempFormat, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd' };
                 }
                 else {
                     formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -1195,7 +1118,7 @@ var DatePicker = /** @class */ (function (_super) {
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
-                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
                 }
                 else {
                     formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -1251,18 +1174,14 @@ var DatePicker = /** @class */ (function (_super) {
             var outOfRange = void 0;
             if (!isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {
                 outOfRange = new Date(this.checkValue(this.value));
-                if (!this.isBlazorServer) {
-                    this.setProperties({ 'value': null }, true);
-                }
+                this.setProperties({ 'value': null }, true);
             }
             else {
                 outOfRange = this.value || null;
             }
             if (!this.isCalendar()) {
-                if (!this.isBlazorServer) {
-                    _super.prototype.render.call(this);
-                    this.setProperties({ 'value': outOfRange || null }, true);
-                }
+                _super.prototype.render.call(this);
+                this.setProperties({ 'value': outOfRange || null }, true);
                 this.previousDate = outOfRange;
                 this.createCalendar();
             }
@@ -1274,7 +1193,7 @@ var DatePicker = /** @class */ (function (_super) {
                 preventDefault: function () {
                     prevent_1 = false;
                 },
-                popup: isBlazor() && this.isServerRendered ? null : this.popupObj,
+                popup: this.popupObj,
                 event: e || null,
                 cancel: false,
                 appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body
@@ -1283,11 +1202,6 @@ var DatePicker = /** @class */ (function (_super) {
             this.trigger('open', eventArgs, function (eventArgs) {
                 _this.preventArgs = eventArgs;
                 if (prevent_1 && !_this.preventArgs.cancel) {
-                    if (_this.isBlazorServer) {
-                        _this.popupWrapper.style.visibility = '';
-                        _this.popupWrapper.style.width = 'auto';
-                        _this.popupWrapper.style.height = 'auto';
-                    }
                     addClass(_this.inputWrapper.buttons, ACTIVE);
                     _this.preventArgs.appendTo.appendChild(_this.popupWrapper);
                     _this.popupObj.refreshPosition(_this.inputElement);
@@ -1301,18 +1215,12 @@ var DatePicker = /** @class */ (function (_super) {
                     else {
                         _this.popupObj.show(new Animation(openAnimation), null);
                     }
-                    if (!_this.isBlazorServer) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);
-                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);
                     _this.setAriaAttributes();
                 }
                 else {
                     _this.popupObj.destroy();
-                    if (_this.isBlazorServer) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);
-                    }
                     _this.popupWrapper = _this.popupObj = null;
                 }
                 if (!isNullOrUndefined(_this.inputElement) && _this.inputElement.value === '') {
@@ -1339,7 +1247,7 @@ var DatePicker = /** @class */ (function (_super) {
                 preventDefault: function () {
                     prevent_2 = false;
                 },
-                popup: isBlazor() && this.isServerRendered ? null : this.popupObj,
+                popup: this.popupObj,
                 event: event || null,
                 cancel: false
             };
@@ -1366,17 +1274,9 @@ var DatePicker = /** @class */ (function (_super) {
     DatePicker.prototype.closeEventCallback = function (prevent, eventArgs) {
         this.preventArgs = eventArgs;
         if (this.isCalendar() && (prevent && !this.preventArgs.cancel)) {
-            if (!this.isBlazorServer) {
-                this.popupObj.hide();
-                this.isAltKeyPressed = false;
-                this.keyboardModule.destroy();
-            }
-            else {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);
-                this.isAltKeyPressed = false;
-                this.popupWrapper = this.popupObj = null;
-            }
+            this.popupObj.hide();
+            this.isAltKeyPressed = false;
+            this.keyboardModule.destroy();
             removeClass(this.inputWrapper.buttons, ACTIVE);
         }
         this.setAriaAttributes();
@@ -1459,12 +1359,10 @@ var DatePicker = /** @class */ (function (_super) {
      */
     DatePicker.prototype.destroy = function () {
         this.unBindEvents();
-        if (!this.isBlazorServer) {
+        _super.prototype.destroy.call(this);
+        this.keyboardModules.destroy();
+        if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
             _super.prototype.destroy.call(this);
-            this.keyboardModules.destroy();
-            if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
-                _super.prototype.destroy.call(this);
-            }
         }
         var ariaAttrs = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',
@@ -1489,9 +1387,7 @@ var DatePicker = /** @class */ (function (_super) {
                 detach(this.popupWrapper);
             }
             this.popupObj = this.popupWrapper = null;
-            if (!this.isBlazorServer) {
-                this.keyboardModule.destroy();
-            }
+            this.keyboardModule.destroy();
         }
         if (this.ngTag === null) {
             if (this.inputElement) {
@@ -1537,45 +1433,40 @@ var DatePicker = /** @class */ (function (_super) {
         this.inputElement = this.element;
         this.formElement = closest(this.inputElement, 'form');
         this.index = this.showClearButton ? 2 : 1;
-        this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'datepicker') ? true : false;
-        if (!this.isBlazorServer) {
-            this.ngTag = null;
-            if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {
-                this.ngTag = this.element.tagName;
-                this.inputElement = this.createElement('input');
-                this.element.appendChild(this.inputElement);
+        this.ngTag = null;
+        if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {
+            this.ngTag = this.element.tagName;
+            this.inputElement = this.createElement('input');
+            this.element.appendChild(this.inputElement);
+        }
+        if (this.element.getAttribute('id')) {
+            if (this.ngTag !== null) {
+                this.inputElement.id = this.element.getAttribute('id') + '_input';
             }
-            if (this.element.getAttribute('id')) {
+        }
+        else {
+            if (this.getModuleName() === 'datetimepicker') {
+                this.element.id = getUniqueID('ej2-datetimepicker');
                 if (this.ngTag !== null) {
-                    this.inputElement.id = this.element.getAttribute('id') + '_input';
+                    attributes(this.inputElement, { 'id': this.element.id + '_input' });
                 }
             }
             else {
-                if (this.getModuleName() === 'datetimepicker') {
-                    this.element.id = getUniqueID('ej2-datetimepicker');
-                    if (this.ngTag !== null) {
-                        attributes(this.inputElement, { 'id': this.element.id + '_input' });
-                    }
-                }
-                else {
-                    this.element.id = getUniqueID('ej2-datepicker');
-                    if (this.ngTag !== null) {
-                        attributes(this.inputElement, { 'id': this.element.id + '_input' });
-                    }
+                this.element.id = getUniqueID('ej2-datepicker');
+                if (this.ngTag !== null) {
+                    attributes(this.inputElement, { 'id': this.element.id + '_input' });
                 }
             }
-            if (this.ngTag !== null) {
-                this.validationAttribute(this.element, this.inputElement);
-            }
-            this.updateHtmlAttributeToElement();
         }
+        if (this.ngTag !== null) {
+            this.validationAttribute(this.element, this.inputElement);
+        }
+        this.updateHtmlAttributeToElement();
         this.defaultKeyConfigs = this.getDefaultKeyConfig();
         this.checkHtmlAttributes(false);
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-        if (!this.isBlazorServer) {
-            this.element.removeAttribute('tabindex');
-            _super.prototype.preRender.call(this);
-        }
+        this.element.removeAttribute('tabindex');
+        _super.prototype.preRender.call(this);
     };
     DatePicker.prototype.getDefaultKeyConfig = function () {
         this.defaultKeyConfigs = {
@@ -1621,7 +1512,7 @@ var DatePicker = /** @class */ (function (_super) {
         var culture = new Internationalization(this.locale);
         if (this.format) {
             if (typeof this.format === 'string') {
-                this.formatString = isBlazor() ? this.format.replace(/tt/, 'a') : this.format;
+                this.formatString = this.format;
             }
             else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {
                 var skeletonString = this.format.skeleton;
@@ -1656,7 +1547,7 @@ var DatePicker = /** @class */ (function (_super) {
             if (this.calendarMode === 'Gregorian') {
                 options = {
                     format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
-                    type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                    type: 'dateTime', skeleton: 'yMd'
                 };
             }
             else {
@@ -1668,7 +1559,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         else {
             if (this.calendarMode === 'Gregorian') {
-                options = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
             }
             else {
                 options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -1679,8 +1570,7 @@ var DatePicker = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {
                 switch (prop) {
                     case 'disabled':
-                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['enabled'] === undefined)) || dynamic) &&
-                            !this.isBlazorServer) {
+                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['enabled'] === undefined)) || dynamic)) {
                             var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||
                                 this.inputElement.getAttribute(prop) === '' ||
                                 this.inputElement.getAttribute(prop) === 'true' ? false : true;
@@ -1688,32 +1578,25 @@ var DatePicker = /** @class */ (function (_super) {
                         }
                         break;
                     case 'readonly':
-                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic) &&
-                            !this.isBlazorServer) {
+                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic)) {
                             var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||
                                 this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;
                             this.setProperties({ readonly: readonly }, !dynamic);
                         }
                         break;
                     case 'placeholder':
-                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['placeholder'] === undefined)) || dynamic) &&
-                            !this.isBlazorServer) {
+                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['placeholder'] === undefined)) || dynamic)) {
                             this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !dynamic);
                         }
                         break;
                     case 'style':
-                        if (!this.isBlazorServer) {
-                            this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));
-                        }
+                        this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));
                         break;
                     case 'name':
-                        if (!this.isBlazorServer) {
-                            this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));
-                        }
+                        this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));
                         break;
                     case 'value':
-                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic) &&
-                            !this.isBlazorServer) {
+                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic)) {
                             var value = this.inputElement.getAttribute(prop);
                             this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), !dynamic);
                         }
@@ -1731,7 +1614,7 @@ var DatePicker = /** @class */ (function (_super) {
                         }
                         break;
                     case 'type':
-                        if (this.inputElement.getAttribute(prop) !== 'text' && !this.isBlazorServer) {
+                        if (this.inputElement.getAttribute(prop) !== 'text') {
                             this.inputElement.setAttribute('type', 'text');
                         }
                         break;
@@ -1755,9 +1638,7 @@ var DatePicker = /** @class */ (function (_super) {
         var previousValCopy = this.previousDate;
         //calls the Calendar render method to check the disabled dates through renderDayCell event and update the input value accordingly.
         this.minMaxUpdates();
-        if (!this.isBlazorServer) {
-            _super.prototype.render.call(this);
-        }
+        _super.prototype.render.call(this);
         this.previousDate = previousValCopy;
         var date = valueCopy && +(valueCopy);
         var dateIdString = '*[id^="/id"]'.replace('/id', '' + date);
@@ -1778,7 +1659,7 @@ var DatePicker = /** @class */ (function (_super) {
             if (this.calendarMode === 'Gregorian') {
                 globalize = this.globalize.formatDate(valueCopy, {
                     format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
-                    type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                    type: 'dateTime', skeleton: 'yMd'
                 });
             }
             else {
@@ -1791,7 +1672,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         else {
             if (this.calendarMode === 'Gregorian') {
-                formatOptions = { format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };
             }
             else {
                 formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -1809,26 +1690,13 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.setAriaAttributes = function () {
-        if (this.isBlazorServer) {
-            if (this.isCalendar()) {
-                var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');
-                var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');
-                var id = (focusedEle || selectedEle) ? (focusedEle || selectedEle).getAttribute('id') : 'null';
-                attributes(this.inputElement, { 'aria-activedescendant': '' + id });
-            }
-            else {
-                attributes(this.inputElement, { 'aria-activedescendant': 'null' });
-            }
+        if (this.isCalendar()) {
+            Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
+            attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
         }
         else {
-            if (this.isCalendar()) {
-                Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
-                attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
-            }
-            else {
-                Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
-                attributes(this.inputElement, { 'aria-activedescendant': 'null' });
-            }
+            Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
+            attributes(this.inputElement, { 'aria-activedescendant': 'null' });
         }
     };
     DatePicker.prototype.errorClass = function () {
@@ -1863,20 +1731,16 @@ var DatePicker = /** @class */ (function (_super) {
                     this.isDynamicValueChanged = true;
                     this.isInteracted = false;
                     this.invalidValueString = null;
-                    if (!this.isBlazorServer) {
-                        this.checkInvalidValue(newProp.value);
-                    }
+                    this.checkInvalidValue(newProp.value);
                     newProp.value = this.value;
                     this.previousElementValue = this.inputElement.value;
-                    if (!this.isBlazorServer) {
-                        if (isNullOrUndefined(this.value)) {
-                            this.updateInputValue('');
-                            this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
-                        }
-                        this.updateInput(true);
-                        if (+this.previousDate !== +this.value) {
-                            this.changeTrigger(null);
-                        }
+                    if (isNullOrUndefined(this.value)) {
+                        this.updateInputValue('');
+                        this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
+                    }
+                    this.updateInput(true);
+                    if (+this.previousDate !== +this.value) {
+                        this.changeTrigger(null);
                     }
                     this.isInteracted = true;
                     this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
@@ -1889,15 +1753,13 @@ var DatePicker = /** @class */ (function (_super) {
                 case 'format':
                     this.checkFormat();
                     this.bindInputEvent();
-                    if (!this.isBlazorServer) {
-                        this.updateInput();
-                        if (this.enableMask) {
-                            this.notify("createMask", {
-                                module: "MaskedDateTime",
-                            });
-                            if (!this.value) {
-                                this.updateInputValue(this.maskedDateValue);
-                            }
+                    this.updateInput();
+                    if (this.enableMask) {
+                        this.notify("createMask", {
+                            module: "MaskedDateTime",
+                        });
+                        if (!this.value) {
+                            this.updateInputValue(this.maskedDateValue);
                         }
                     }
                     break;
@@ -1924,13 +1786,11 @@ var DatePicker = /** @class */ (function (_super) {
                     this.l10n.setLocale(this.locale);
                     this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
                     Input.setPlaceholder(this.placeholder, this.inputElement);
-                    if (!this.isBlazorServer) {
-                        this.updateInput();
-                        if (this.enableMask) {
-                            this.notify("createMask", {
-                                module: "MaskedDateTime",
-                            });
-                        }
+                    this.updateInput();
+                    if (this.enableMask) {
+                        this.notify("createMask", {
+                            module: "MaskedDateTime",
+                        });
                     }
                     break;
                 case 'enableRtl':
@@ -1939,7 +1799,7 @@ var DatePicker = /** @class */ (function (_super) {
                 case 'start':
                 case 'depth':
                     this.checkView();
-                    if (this.calendarElement && !this.isBlazorServer) {
+                    if (this.calendarElement) {
                         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     }
                     break;
@@ -1956,9 +1816,7 @@ var DatePicker = /** @class */ (function (_super) {
                     break;
                 case 'strictMode':
                     this.invalidValueString = null;
-                    if (!this.isBlazorServer) {
-                        this.updateInput();
-                    }
+                    this.updateInput();
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
@@ -1983,7 +1841,7 @@ var DatePicker = /** @class */ (function (_super) {
                     }
                     break;
                 default:
-                    if (this.calendarElement && !this.isBlazorServer && this.isCalendar()) {
+                    if (this.calendarElement && this.isCalendar()) {
                         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);
                     }
                     break;