@syncfusion/ej2-calendars 19.2.62 → 19.3.53

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

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Component, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, append, attributes, blazorCultureFormats, cldrData, closest, createElement, detach, extend, formatUnit, getDefaultDateObject, getUniqueID, getValue, isBlazor, isNullOrUndefined, isUndefined, merge, prepend, remove, removeClass, rippleEffect, select, setStyleAttribute, setValue, throwError } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Component, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, addClass, append, attributes, cldrData, closest, createElement, detach, extend, formatUnit, getDefaultDateObject, getUniqueID, getValue, isNullOrUndefined, isUndefined, merge, prepend, remove, removeClass, rippleEffect, select, setStyleAttribute, setValue, throwError } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -281,7 +281,7 @@ let CalendarBase = class CalendarBase extends Component {
     getCultureValues() {
         const culShortNames = [];
         let cldrObj;
-        const dayFormat = (isBlazor() ? 'days.' : 'days.stand-alone.') + this.dayHeaderFormat.toLowerCase();
+        const dayFormat = 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase();
         if (this.locale === 'en' || this.locale === 'en-US') {
             cldrObj = (getValue(dayFormat, getDefaultDateObject()));
         }
@@ -389,17 +389,8 @@ let CalendarBase = class CalendarBase extends Component {
         }
     }
     wireEvents(id, ref, keyConfig, moduleName) {
-        if (!(isBlazor() && ref)) {
-            EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);
-            this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
-        }
-        else {
-            this.element = document.getElementById(id);
-            this.defaultKeyConfigs = this.getDefaultKeyConfig();
-            this.defaultKeyConfigs = extend(this.defaultKeyConfigs, keyConfig);
-            this.blazorRef = ref;
-            this.serverModuleName = moduleName;
-        }
+        EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);
+        this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
         if (this.getModuleName() === 'calendar') {
             this.keyboardModule = new KeyboardEvents(this.element, {
                 eventName: 'keydown',
@@ -418,7 +409,6 @@ let CalendarBase = class CalendarBase extends Component {
     dateWireEvents(id, ref, keyConfig, moduleName) {
         this.defaultKeyConfigs = this.getDefaultKeyConfig();
         this.defaultKeyConfigs = extend(this.defaultKeyConfigs, keyConfig);
-        this.blazorRef = ref;
         this.serverModuleName = moduleName;
     }
     todayButtonClick(e, value, isCustomDate) {
@@ -449,21 +439,7 @@ let CalendarBase = class CalendarBase extends Component {
         this.renderDayCellArgs = null;
         this.calendarElement = this.tableBodyElement = this.footer = this.tableHeadElement = this.nextIcon = this.previousIcon = this.table = null;
     }
-    checkDeviceMode(ref) {
-        if (Browser.isDevice && isBlazor() && ref) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ref.invokeMethodAsync('OnDevice', true);
-        }
-    }
     keyActionHandle(e, value, multiSelection) {
-        if (isBlazor() && this.blazorRef) {
-            e.preventDefault();
-            if (!this.tableBodyElement) {
-                this.element = closest(e.target, '.' + 'e-calendar');
-                this.tableBodyElement = this.element.querySelector('tbody');
-            }
-            multiSelection = false;
-        }
         const focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
         let selectedDate;
         if (multiSelection) {
@@ -477,147 +453,124 @@ let CalendarBase = class CalendarBase extends Component {
         else {
             selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
         }
-        if (isBlazor() && this.blazorRef) {
-            this.tableBodyElement.focus();
-            const targetEle = e.target;
-            const args = {
-                Action: e.action, Key: e.key, Events: e,
-                SelectDate: selectedDate ? selectedDate.id : null,
-                FocusedDate: focusedDate ? focusedDate.id : null,
-                classList: selectedDate ? selectedDate.classList.toString() : focusedDate ? focusedDate.classList.toString() : 'e-cell',
-                Id: focusedDate ? focusedDate.id : selectedDate ? selectedDate.id : null,
-                TargetClassList: targetEle.classList.toString()
-            };
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.blazorRef.invokeMethodAsync('OnCalendarKeyboardEvent', args);
-            if (targetEle.classList.contains('e-today')) {
-                targetEle.blur();
-                this.tableBodyElement.focus();
-            }
-            if (this.serverModuleName === 'sf.calendars.Calendar') {
-                this.tableBodyElement = null;
-            }
-        }
-        else {
-            let view = this.getViewNumber(this.currentView());
-            const depthValue = this.getViewNumber(this.depth);
-            const levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
-            this.effect = '';
-            switch (e.action) {
-                case 'moveLeft':
-                    this.keyboardNavigate(-1, view, e, this.max, this.min);
-                    e.preventDefault();
-                    break;
-                case 'moveRight':
-                    this.keyboardNavigate(1, view, e, this.max, this.min);
-                    e.preventDefault();
-                    break;
-                case 'moveUp':
-                    if (view === 0) {
-                        this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
-                    }
-                    else {
-                        this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
-                    }
-                    e.preventDefault();
-                    break;
-                case 'moveDown':
-                    if (view === 0) {
-                        this.keyboardNavigate(7, view, e, this.max, this.min);
-                    }
-                    else {
-                        this.keyboardNavigate(4, view, e, this.max, this.min);
-                    }
-                    e.preventDefault();
-                    break;
-                case 'select':
-                    if (e.target === this.todayElement) {
-                        this.todayButtonClick(e, value);
-                    }
-                    else {
-                        const element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
-                        if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
-                            if (levelRestrict) {
-                                // eslint-disable-next-line radix
-                                const d = new Date(parseInt('' + (element).id, 0));
-                                this.selectDate(e, d, (element));
-                            }
-                            else {
-                                this.contentClick(null, --view, (element), value);
-                            }
+        let view = this.getViewNumber(this.currentView());
+        const depthValue = this.getViewNumber(this.depth);
+        const levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
+        this.effect = '';
+        switch (e.action) {
+            case 'moveLeft':
+                this.keyboardNavigate(-1, view, e, this.max, this.min);
+                e.preventDefault();
+                break;
+            case 'moveRight':
+                this.keyboardNavigate(1, view, e, this.max, this.min);
+                e.preventDefault();
+                break;
+            case 'moveUp':
+                if (view === 0) {
+                    this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
+                }
+                else {
+                    this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
+                }
+                e.preventDefault();
+                break;
+            case 'moveDown':
+                if (view === 0) {
+                    this.keyboardNavigate(7, view, e, this.max, this.min);
+                }
+                else {
+                    this.keyboardNavigate(4, view, e, this.max, this.min);
+                }
+                e.preventDefault();
+                break;
+            case 'select':
+                if (e.target === this.todayElement) {
+                    this.todayButtonClick(e, value);
+                }
+                else {
+                    const element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
+                    if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
+                        if (levelRestrict) {
+                            // eslint-disable-next-line radix
+                            const d = new Date(parseInt('' + (element).id, 0));
+                            this.selectDate(e, d, (element));
+                        }
+                        else {
+                            this.contentClick(null, --view, (element), value);
                         }
                     }
-                    break;
-                case 'controlUp':
-                    this.title();
-                    e.preventDefault();
-                    break;
-                case 'controlDown':
-                    if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {
-                        this.contentClick(null, --view, (focusedDate || selectedDate), value);
-                    }
-                    e.preventDefault();
-                    break;
-                case 'home':
-                    this.currentDate = this.firstDay(this.currentDate);
-                    detach(this.tableBodyElement);
-                    if (view === 0) {
-                        this.renderMonths(e);
-                    }
-                    else if (view === 1) {
-                        this.renderYears(e);
-                    }
-                    else {
-                        this.renderDecades(e);
-                    }
-                    e.preventDefault();
-                    break;
-                case 'end':
-                    this.currentDate = this.lastDay(this.currentDate, view);
-                    detach(this.tableBodyElement);
-                    if (view === 0) {
-                        this.renderMonths(e);
-                    }
-                    else if (view === 1) {
-                        this.renderYears(e);
-                    }
-                    else {
-                        this.renderDecades(e);
-                    }
-                    e.preventDefault();
-                    break;
-                case 'pageUp':
-                    this.addMonths(this.currentDate, -1);
-                    this.navigateTo('Month', this.currentDate);
-                    e.preventDefault();
-                    break;
-                case 'pageDown':
-                    this.addMonths(this.currentDate, 1);
-                    this.navigateTo('Month', this.currentDate);
-                    e.preventDefault();
-                    break;
-                case 'shiftPageUp':
-                    this.addYears(this.currentDate, -1);
-                    this.navigateTo('Month', this.currentDate);
-                    e.preventDefault();
-                    break;
-                case 'shiftPageDown':
-                    this.addYears(this.currentDate, 1);
-                    this.navigateTo('Month', this.currentDate);
-                    e.preventDefault();
-                    break;
-                case 'controlHome':
-                    this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));
-                    e.preventDefault();
-                    break;
-                case 'controlEnd':
-                    this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
-                    e.preventDefault();
-                    break;
-            }
-            if (this.getModuleName() === 'calendar') {
-                this.table.focus();
-            }
+                }
+                break;
+            case 'controlUp':
+                this.title();
+                e.preventDefault();
+                break;
+            case 'controlDown':
+                if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {
+                    this.contentClick(null, --view, (focusedDate || selectedDate), value);
+                }
+                e.preventDefault();
+                break;
+            case 'home':
+                this.currentDate = this.firstDay(this.currentDate);
+                detach(this.tableBodyElement);
+                if (view === 0) {
+                    this.renderMonths(e);
+                }
+                else if (view === 1) {
+                    this.renderYears(e);
+                }
+                else {
+                    this.renderDecades(e);
+                }
+                e.preventDefault();
+                break;
+            case 'end':
+                this.currentDate = this.lastDay(this.currentDate, view);
+                detach(this.tableBodyElement);
+                if (view === 0) {
+                    this.renderMonths(e);
+                }
+                else if (view === 1) {
+                    this.renderYears(e);
+                }
+                else {
+                    this.renderDecades(e);
+                }
+                e.preventDefault();
+                break;
+            case 'pageUp':
+                this.addMonths(this.currentDate, -1);
+                this.navigateTo('Month', this.currentDate);
+                e.preventDefault();
+                break;
+            case 'pageDown':
+                this.addMonths(this.currentDate, 1);
+                this.navigateTo('Month', this.currentDate);
+                e.preventDefault();
+                break;
+            case 'shiftPageUp':
+                this.addYears(this.currentDate, -1);
+                this.navigateTo('Month', this.currentDate);
+                e.preventDefault();
+                break;
+            case 'shiftPageDown':
+                this.addYears(this.currentDate, 1);
+                this.navigateTo('Month', this.currentDate);
+                e.preventDefault();
+                break;
+            case 'controlHome':
+                this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));
+                e.preventDefault();
+                break;
+            case 'controlEnd':
+                this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
+                e.preventDefault();
+                break;
+        }
+        if (this.getModuleName() === 'calendar') {
+            this.table.focus();
         }
     }
     keyboardNavigate(number, currentView, e, max, min) {
@@ -740,12 +693,12 @@ let CalendarBase = class CalendarBase extends Component {
             }
             minMaxDate = new Date(+localDate);
             localDate = this.minMaxDate(localDate);
-            const dateFormatOptions = { type: 'dateTime', skeleton: isBlazor() ? 'D' : 'full' };
+            const dateFormatOptions = { type: 'dateTime', skeleton: 'full' };
             const date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
             const tdEle = this.dayCell(localDate);
-            const title = this.globalize.formatDate(localDate, { type: 'date', skeleton: isBlazor() ? 'D' : 'full' });
+            const title = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'full' });
             const dayLink = this.createElement('span');
-            dayLink.textContent = this.globalize.formatDate(localDate, { format: 'd', type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' });
+            dayLink.textContent = this.globalize.formatDate(localDate, { format: 'd', type: 'date', skeleton: 'yMd' });
             const disabled = (this.min > localDate) || (this.max < localDate);
             if (disabled) {
                 addClass([tdEle], DISABLED);
@@ -775,8 +728,8 @@ let CalendarBase = class CalendarBase extends Component {
                 if (multiSelection) {
                     if (!isNullOrUndefined(values) && values.length > 0) {
                         for (let index = 0; index < values.length; index++) {
-                            const localDateString = +new Date(this.globalize.formatDate(argument.date, { type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' }));
-                            const tempDateString = +new Date(this.globalize.formatDate(values[index], { type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' }));
+                            const localDateString = +new Date(this.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd' }));
+                            const tempDateString = +new Date(this.globalize.formatDate(values[index], { type: 'date', skeleton: 'yMd' }));
                             if (localDateString === tempDateString) {
                                 values.splice(index, 1);
                                 index = -1;
@@ -807,7 +760,7 @@ let CalendarBase = class CalendarBase extends Component {
             if (multiSelection && !isNullOrUndefined(values) && !disabledCls) {
                 for (let tempValue = 0; tempValue < values.length; tempValue++) {
                     const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                    const formatOptions = { format: this.getFromatStringValue(), type: 'date', skeleton: 'short', calendar: type };
+                    const formatOptions = { format: null, type: 'date', skeleton: 'short', calendar: type };
                     const localDateString = this.globalize.formatDate(localDate, formatOptions);
                     const tempDateString = this.globalize.formatDate(values[tempValue], formatOptions);
                     if ((localDateString === tempDateString && this.getDateVal(localDate, values[tempValue]))
@@ -874,7 +827,7 @@ let CalendarBase = class CalendarBase extends Component {
             const localMonth = (value && (value).getMonth() === localDate.getMonth());
             const select$$1 = (value && (value).getFullYear() === yr && localMonth);
             dayLink.textContent = this.toCapitalize(this.globalize.formatDate(localDate, {
-                format: isBlazor() ? 'MMM' : null, type: 'dateTime', skeleton: 'MMM'
+                format: null, type: 'dateTime', skeleton: 'MMM'
             }));
             if ((this.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {
                 addClass([tdEle], DISABLED);
@@ -911,9 +864,9 @@ let CalendarBase = class CalendarBase extends Component {
         const startFullYr = startYr.getFullYear();
         const endFullYr = endYr.getFullYear();
         const startHdrYr = this.globalize.formatDate(startYr, {
-            format: isBlazor() ? 'yyyy' : null, type: 'dateTime', skeleton: 'y'
+            format: null, type: 'dateTime', skeleton: 'y'
         });
-        const endHdrYr = this.globalize.formatDate(endYr, { format: isBlazor() ? 'yyyy' : null, type: 'dateTime', skeleton: 'y' });
+        const endHdrYr = this.globalize.formatDate(endYr, { format: null, type: 'dateTime', skeleton: 'y' });
         this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);
         const start = new Date(localYr - (localYr % 10) - 1, 0, 1);
         const startYear = start.getFullYear();
@@ -924,7 +877,7 @@ let CalendarBase = class CalendarBase extends Component {
             attributes(tdEle, { 'role': 'gridcell' });
             const dayLink = this.createElement('span');
             dayLink.textContent = this.globalize.formatDate(localDate, {
-                format: isBlazor() ? 'yyyy' : null, type: 'dateTime', skeleton: 'y'
+                format: null, type: 'dateTime', skeleton: 'y'
             });
             if ((year < startFullYr) || (year > endFullYr)) {
                 addClass([tdEle], OTHERDECADE);
@@ -958,7 +911,7 @@ let CalendarBase = class CalendarBase extends Component {
     }
     dayCell(localDate) {
         const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        const dateFormatOptions = { skeleton: isBlazor() ? 'F' : 'full', type: 'dateTime', calendar: type };
+        const dateFormatOptions = { skeleton: 'full', type: 'dateTime', calendar: type };
         const date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
         const value = date.valueOf();
         const attrs = {
@@ -1342,15 +1295,15 @@ let CalendarBase = class CalendarBase extends Component {
                 const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
                 let tempValueString;
                 if (this.calendarMode === 'Gregorian') {
-                    tempValueString = this.globalize.formatDate(tempValue, { type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' });
+                    tempValueString = this.globalize.formatDate(tempValue, { type: 'date', skeleton: 'yMd' });
                 }
                 else {
                     tempValueString = this.globalize.formatDate(tempValue, { type: 'dateTime', skeleton: 'full', calendar: 'islamic' });
                 }
-                const minFormatOption = { type: 'date', skeleton: isBlazor() ? 'd' : 'yMd', calendar: type };
+                const minFormatOption = { type: 'date', skeleton: 'yMd', calendar: type };
                 const minStringValue = this.globalize.formatDate(this.min, minFormatOption);
                 const minString = minStringValue;
-                const maxFormatOption = { type: 'date', skeleton: isBlazor() ? 'd' : 'yMd', calendar: type };
+                const maxFormatOption = { type: 'date', skeleton: 'yMd', calendar: type };
                 const maxStringValue = this.globalize.formatDate(this.max, maxFormatOption);
                 const maxString = maxStringValue;
                 if (+new Date(tempValueString) < +new Date(minString) ||
@@ -1384,9 +1337,9 @@ let CalendarBase = class CalendarBase extends Component {
         let monthFormatOptions;
         const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
         if (this.calendarMode === 'Gregorian') {
-            dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', skeleton: isBlazor() ? 'y' : 'yMMMM', calendar: type });
+            dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', skeleton: 'yMMMM', calendar: type });
             monthFormatOptions = globalize.formatDate(date, {
-                format: isBlazor() ? 'yyyy' : null, type: 'dateTime', skeleton: 'y', calendar: type
+                format: null, type: 'dateTime', skeleton: 'y', calendar: type
             });
         }
         else {
@@ -1409,11 +1362,11 @@ let CalendarBase = class CalendarBase extends Component {
         let title;
         const view = this.currentView();
         if (view === 'Month') {
-            title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: isBlazor() ? 'D' : 'full', calendar: type });
+            title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full', calendar: type });
         }
         else if (view === 'Year') {
             if (type !== 'islamic') {
-                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: isBlazor() ? 'y' : 'yMMMM', calendar: type });
+                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'yMMMM', calendar: type });
             }
             else {
                 title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'GyMMM', calendar: type });
@@ -1421,7 +1374,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
         else {
             title = this.globalize.formatDate(this.currentDate, {
-                format: isBlazor() ? 'yyyy' : null, type: 'date', skeleton: 'y', calendar: type
+                format: null, type: 'date', skeleton: 'y', calendar: type
             });
         }
         if (selectedEle || focusedEle) {
@@ -1619,11 +1572,9 @@ let CalendarBase = class CalendarBase extends Component {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getCultureObjects(ld, c) {
-        const gregorianFormat = (isBlazor() ? '.dates.days.' :
-            '.dates.calendars.gregorian.days.format.') + this.dayHeaderFormat.toLowerCase();
-        const islamicFormat = (isBlazor() ? '.dates.days.' :
-            '.dates.calendars.islamic.days.format.') + this.dayHeaderFormat.toLowerCase();
-        const mainVal = isBlazor() ? '' : 'main.';
+        const gregorianFormat = '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase();
+        const islamicFormat = '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase();
+        const mainVal = 'main.';
         if (this.calendarMode === 'Gregorian') {
             return getValue(mainVal + '' + this.locale + gregorianFormat, ld);
         }
@@ -1675,7 +1626,7 @@ let CalendarBase = class CalendarBase extends Component {
             eve = element;
         }
         const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        const dateFormatOptions = { type: 'dateTime', skeleton: isBlazor() ? 'F' : 'full', calendar: type };
+        const dateFormatOptions = { type: 'dateTime', skeleton: 'full', calendar: type };
         // eslint-disable-next-line radix
         const dateString = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), dateFormatOptions);
         const date = this.globalize.parseDate(dateString, dateFormatOptions);
@@ -1743,7 +1694,7 @@ let CalendarBase = class CalendarBase extends Component {
                 removeClass([element], SELECTED);
                 for (let i = 0; i < copyValues.length; i++) {
                     const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                    const formatOptions = { format: this.getFromatStringValue(), type: 'date', skeleton: 'short', calendar: type };
+                    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) {
@@ -1763,22 +1714,16 @@ let CalendarBase = class CalendarBase extends Component {
         }
         this.isDateSelected = true;
     }
-    getFromatStringValue() {
-        return isBlazor() ?
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            'M' + getDefaultDateObject().dateSeperator + 'd' + getDefaultDateObject().dateSeperator + 'yy'
-            : null;
-    }
     checkPresentDate(dates, values) {
         let previousValue = false;
         if (!isNullOrUndefined(values)) {
             for (let checkPrevious = 0; checkPrevious < values.length; checkPrevious++) {
                 const type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
                 const localDateString = this.globalize.formatDate(dates, {
-                    format: this.getFromatStringValue(), type: 'date', skeleton: 'short', calendar: type
+                    format: null, type: 'date', skeleton: 'short', calendar: type
                 });
                 const tempDateString = this.globalize.formatDate(values[checkPrevious], {
-                    format: this.getFromatStringValue(), type: 'date', skeleton: 'short', calendar: type
+                    format: null, type: 'date', skeleton: 'short', calendar: type
                 });
                 if (localDateString === tempDateString) {
                     previousValue = true;
@@ -3083,7 +3028,6 @@ const ERROR = 'e-error';
 const ACTIVE = 'e-active';
 const OVERFLOW = 'e-date-overflow';
 const DATEICON = 'e-date-icon';
-const CLEARICON = 'e-clear-icon';
 const ICONS = 'e-icons';
 const OPENDURATION = 300;
 const OFFSETVALUE = 4;
@@ -3118,7 +3062,6 @@ let DatePicker = class DatePicker extends Calendar {
         this.isDateIconClicked = false;
         this.isAltKeyPressed = false;
         this.isInteracted = true;
-        this.isBlazorServer = false;
         this.invalidValueString = null;
         this.checkPreviousValue = null;
         this.maskedDateValue = '';
@@ -3139,9 +3082,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.initialize();
         this.bindEvents();
         this.renderComplete();
-        if (!this.isBlazorServer) {
-            this.setTimeZone(this.serverTimezoneOffset);
-        }
+        this.setTimeZone(this.serverTimezoneOffset);
     }
     setTimeZone(offsetValue) {
         if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
@@ -3183,36 +3124,18 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     initialize() {
-        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 {
-            const 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;
@@ -3273,9 +3196,7 @@ let DatePicker = class DatePicker extends Calendar {
     updateInput(isDynamic = false) {
         let 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);
@@ -3293,7 +3214,7 @@ let DatePicker = class DatePicker extends Calendar {
             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 {
@@ -3304,7 +3225,7 @@ let DatePicker = class DatePicker extends Calendar {
             }
             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' };
@@ -3358,8 +3279,8 @@ let DatePicker = class DatePicker extends Calendar {
         if (this.getModuleName() === 'datetimepicker') {
             const 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' };
@@ -3368,7 +3289,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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' };
@@ -3392,8 +3313,8 @@ let DatePicker = class DatePicker extends Calendar {
             if (this.getModuleName() === 'datetimepicker') {
                 const 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' };
@@ -3403,7 +3324,7 @@ let DatePicker = class DatePicker extends Calendar {
             }
             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
@@ -3458,7 +3379,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     bindEvents() {
-        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);
@@ -3468,7 +3389,7 @@ let DatePicker = class DatePicker extends Calendar {
         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) {
@@ -3505,7 +3426,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     unBindEvents() {
-        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);
@@ -3513,7 +3434,7 @@ let DatePicker = class DatePicker extends Calendar {
         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) {
@@ -3531,13 +3452,11 @@ let DatePicker = class DatePicker extends Calendar {
                 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();
             }
         }
     }
@@ -3546,7 +3465,7 @@ let DatePicker = class DatePicker extends Calendar {
         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'
             });
     }
     inputChangeHandler(e) {
@@ -3576,9 +3495,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     clear(event) {
-        if (!this.isBlazorServer) {
-            this.setProperties({ value: null }, true);
-        }
+        this.setProperties({ value: null }, true);
         if (!this.enableMask) {
             this.updateInputValue('');
         }
@@ -3587,19 +3504,13 @@ let DatePicker = class DatePicker extends Calendar {
         };
         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"
+            });
         }
     }
     preventEventBubbling(e) {
@@ -3619,24 +3530,20 @@ let DatePicker = class DatePicker extends Calendar {
             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;
@@ -3735,7 +3642,7 @@ let DatePicker = class DatePicker extends Calendar {
             }
         }
         const focusArguments = {
-            model: isBlazor() && this.isServerRendered ? null : this
+            model: this
         };
         this.isDateIconClicked = false;
         this.trigger('focus', focusArguments);
@@ -3756,32 +3663,26 @@ let DatePicker = class DatePicker extends Calendar {
         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') {
             const blurArguments = {
-                model: isBlazor() && this.isServerRendered ? null : this
+                model: this
             };
             this.trigger('blur', blurArguments);
         }
@@ -3819,7 +3720,7 @@ let DatePicker = class DatePicker extends Calendar {
             else if (closest(target, '.e-footer-container')
                 && target.classList.contains('e-today')
                 && target.classList.contains('e-btn')
-                && (+new Date(+this.value) === +super.generateTodayVal(this.value) && !this.isBlazorServer)) {
+                && (+new Date(+this.value) === +super.generateTodayVal(this.value))) {
                 this.hide(e);
             }
         }
@@ -3834,40 +3735,22 @@ let DatePicker = class DatePicker extends Calendar {
                 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);
                 }
@@ -3892,17 +3775,11 @@ let DatePicker = class DatePicker extends Calendar {
                     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;
@@ -3921,7 +3798,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);
         if (this.isCalendar()) {
             super.keyActionHandle(e);
-            if (!this.isBlazorServer && this.isCalendar()) {
+            if (this.isCalendar()) {
                 attributes(this.inputElement, {
                     'aria-activedescendant': '' + this.setActiveDescendant()
                 });
@@ -3936,7 +3813,7 @@ let DatePicker = class DatePicker extends Calendar {
                     removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED$2), [SELECTED$2]);
                 }
             }
-            if (!isNullOrUndefined(this.value) && !this.isBlazorServer) {
+            if (!isNullOrUndefined(this.value)) {
                 if ((+this.value >= +this.min) && (+this.value <= +this.max)) {
                     const targetdate = new Date(this.checkValue(this.value));
                     super.navigateTo('Month', targetdate);
@@ -3964,7 +3841,7 @@ let DatePicker = class DatePicker extends Calendar {
             if (this.calendarMode === 'Gregorian') {
                 dateOptions = {
                     format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
-                    type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                    type: 'dateTime', skeleton: 'yMd'
                 };
             }
             else {
@@ -3976,7 +3853,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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' };
@@ -3993,7 +3870,7 @@ let DatePicker = class DatePicker extends Calendar {
             }
             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' };
@@ -4037,17 +3914,9 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     createCalendar() {
-        if (!this.isBlazorServer) {
-            this.popupWrapper = this.createElement('div', { className: '' + ROOT$1 + ' ' + 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$1 + ' ' + POPUPWRAPPER });
+        if (!isNullOrUndefined(this.cssClass)) {
+            this.popupWrapper.className += ' ' + this.cssClass;
         }
         if (Browser.isDevice) {
             this.modelHeader();
@@ -4060,7 +3929,7 @@ let DatePicker = class DatePicker extends Calendar {
         //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,
@@ -4089,7 +3958,7 @@ let DatePicker = class DatePicker extends Calendar {
                 if (this.isDateIconClicked) {
                     this.inputWrapper.container.children[this.index].focus();
                 }
-                if (this.value && !this.isBlazorServer) {
+                if (this.value) {
                     this.disabledDates();
                 }
                 if (this.popupObj) {
@@ -4107,9 +3976,7 @@ let DatePicker = class DatePicker extends Calendar {
                 }
             }
         });
-        if (!this.isBlazorServer) {
-            this.popupObj.element.className += ' ' + this.cssClass;
-        }
+        this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     }
     setAriaDisabled() {
@@ -4222,7 +4089,7 @@ let DatePicker = class DatePicker extends Calendar {
         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' };
@@ -4231,7 +4098,7 @@ let DatePicker = class DatePicker extends Calendar {
             }
             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' };
@@ -4286,18 +4153,14 @@ let DatePicker = class DatePicker extends Calendar {
             let outOfRange;
             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.render();
-                    this.setProperties({ 'value': outOfRange || null }, true);
-                }
+                super.render();
+                this.setProperties({ 'value': outOfRange || null }, true);
                 this.previousDate = outOfRange;
                 this.createCalendar();
             }
@@ -4309,7 +4172,7 @@ let DatePicker = class DatePicker extends Calendar {
                 preventDefault: () => {
                     prevent = false;
                 },
-                popup: isBlazor() && this.isServerRendered ? null : this.popupObj,
+                popup: this.popupObj,
                 event: e || null,
                 cancel: false,
                 appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body
@@ -4318,11 +4181,6 @@ let DatePicker = class DatePicker extends Calendar {
             this.trigger('open', eventArgs, (eventArgs) => {
                 this.preventArgs = eventArgs;
                 if (prevent && !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);
@@ -4336,18 +4194,12 @@ let DatePicker = class DatePicker extends Calendar {
                     else {
                         this.popupObj.show(new Animation(openAnimation), null);
                     }
-                    if (!this.isBlazorServer) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        super.setOverlayIndex(this.mobilePopupWrapper, this.popupObj.element, this.modal, Browser.isDevice);
-                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    super.setOverlayIndex(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 === '') {
@@ -4373,7 +4225,7 @@ let DatePicker = class DatePicker extends Calendar {
                 preventDefault: () => {
                     prevent = false;
                 },
-                popup: isBlazor() && this.isServerRendered ? null : this.popupObj,
+                popup: this.popupObj,
                 event: event || null,
                 cancel: false
             };
@@ -4400,17 +4252,9 @@ let DatePicker = class DatePicker extends Calendar {
     closeEventCallback(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();
@@ -4493,12 +4337,10 @@ let DatePicker = class DatePicker extends Calendar {
      */
     destroy() {
         this.unBindEvents();
-        if (!this.isBlazorServer) {
+        super.destroy();
+        this.keyboardModules.destroy();
+        if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
             super.destroy();
-            this.keyboardModules.destroy();
-            if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
-                super.destroy();
-            }
         }
         const ariaAttrs = {
             'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',
@@ -4523,9 +4365,7 @@ let DatePicker = class DatePicker extends Calendar {
                 detach(this.popupWrapper);
             }
             this.popupObj = this.popupWrapper = null;
-            if (!this.isBlazorServer) {
-                this.keyboardModule.destroy();
-            }
+            this.keyboardModule.destroy();
         }
         if (this.ngTag === null) {
             if (this.inputElement) {
@@ -4571,45 +4411,40 @@ let DatePicker = class DatePicker extends Calendar {
         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.preRender();
-        }
+        this.element.removeAttribute('tabindex');
+        super.preRender();
     }
     getDefaultKeyConfig() {
         this.defaultKeyConfigs = {
@@ -4655,7 +4490,7 @@ let DatePicker = class DatePicker extends Calendar {
         const 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)) {
                 const skeletonString = this.format.skeleton;
@@ -4690,7 +4525,7 @@ let DatePicker = class DatePicker extends Calendar {
             if (this.calendarMode === 'Gregorian') {
                 options = {
                     format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,
-                    type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                    type: 'dateTime', skeleton: 'yMd'
                 };
             }
             else {
@@ -4702,7 +4537,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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' };
@@ -4712,8 +4547,7 @@ let DatePicker = class DatePicker extends Calendar {
             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)) {
                             const enabled = this.inputElement.getAttribute(prop) === 'disabled' ||
                                 this.inputElement.getAttribute(prop) === '' ||
                                 this.inputElement.getAttribute(prop) === 'true' ? false : true;
@@ -4721,32 +4555,25 @@ let DatePicker = class DatePicker extends Calendar {
                         }
                         break;
                     case 'readonly':
-                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic) &&
-                            !this.isBlazorServer) {
+                        if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic)) {
                             const 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)) {
                             const value = this.inputElement.getAttribute(prop);
                             this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), !dynamic);
                         }
@@ -4764,7 +4591,7 @@ let DatePicker = class DatePicker extends Calendar {
                         }
                         break;
                     case 'type':
-                        if (this.inputElement.getAttribute(prop) !== 'text' && !this.isBlazorServer) {
+                        if (this.inputElement.getAttribute(prop) !== 'text') {
                             this.inputElement.setAttribute('type', 'text');
                         }
                         break;
@@ -4788,9 +4615,7 @@ let DatePicker = class DatePicker extends Calendar {
         const 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.render();
-        }
+        super.render();
         this.previousDate = previousValCopy;
         const date = valueCopy && +(valueCopy);
         const dateIdString = '*[id^="/id"]'.replace('/id', '' + date);
@@ -4811,7 +4636,7 @@ let DatePicker = class DatePicker extends Calendar {
             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 {
@@ -4824,7 +4649,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
         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' };
@@ -4842,26 +4667,13 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     setAriaAttributes() {
-        if (this.isBlazorServer) {
-            if (this.isCalendar()) {
-                const focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');
-                const selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');
-                const 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' });
         }
     }
     errorClass() {
@@ -4895,20 +4707,16 @@ let DatePicker = class DatePicker extends Calendar {
                     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;
@@ -4921,15 +4729,13 @@ let DatePicker = class DatePicker extends Calendar {
                 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;
@@ -4956,13 +4762,11 @@ let DatePicker = class DatePicker extends Calendar {
                     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':
@@ -4971,7 +4775,7 @@ let DatePicker = class DatePicker extends Calendar {
                 case 'start':
                 case 'depth':
                     this.checkView();
-                    if (this.calendarElement && !this.isBlazorServer) {
+                    if (this.calendarElement) {
                         super.onPropertyChanged(newProp, oldProp);
                     }
                     break;
@@ -4988,9 +4792,7 @@ let DatePicker = class DatePicker extends Calendar {
                     break;
                 case 'strictMode':
                     this.invalidValueString = null;
-                    if (!this.isBlazorServer) {
-                        this.updateInput();
-                    }
+                    this.updateInput();
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
@@ -5015,7 +4817,7 @@ let DatePicker = class DatePicker extends Calendar {
                     }
                     break;
                 default:
-                    if (this.calendarElement && !this.isBlazorServer && this.isCalendar()) {
+                    if (this.calendarElement && this.isCalendar()) {
                         super.onPropertyChanged(newProp, oldProp);
                     }
                     break;
@@ -5620,7 +5422,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     updateHiddenInput() {
         if (this.firstHiddenChild && this.secondHiddenChild) {
-            const format = { type: 'datetime', skeleton: isBlazor() ? 'd' : 'yMd' };
+            const format = { type: 'datetime', skeleton: 'yMd' };
             if (typeof this.startDate === 'string') {
                 this.startDate = this.globalize.parseDate(this.startDate, format);
             }
@@ -5760,7 +5562,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
             ['startDate', 'endDate', 'minDays', 'maxDays', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder',
                 'type', 'value'];
-        const format = { format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' };
+        const format = { format: this.formatString, type: 'date', skeleton: 'yMd' };
         for (const prop of attributes$$1) {
             if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {
                 switch (prop) {
@@ -6014,7 +5816,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         this.preventBlur = false;
         const focusArguments = {
-            model: (isBlazor() && this.isServerRendered) ? null : this
+            model: this
         };
         if (!this.preventFocus) {
             this.trigger('focus', focusArguments);
@@ -6045,7 +5847,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                 const range = value.split(' ' + this.separator + ' ');
                 if (range.length > 1) {
                     this.invalidValueString = null;
-                    const dateOptions = { format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' };
+                    const dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
                     const startDate = this.globalize.parseDate(range[0].trim(), dateOptions);
                     const endDate = this.globalize.parseDate(range[1].trim(), dateOptions);
                     if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
@@ -6061,7 +5863,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                         if (!this.preventBlur && document.activeElement !== this.inputElement) {
                             this.preventFocus = false;
                             const blurArguments = {
-                                model: (isBlazor() && this.isServerRendered) ? null : this
+                                model: this
                             };
                             this.trigger('blur', blurArguments);
                         }
@@ -6112,7 +5914,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             if (!this.preventBlur && document.activeElement !== this.inputElement) {
                 this.preventFocus = false;
                 const blurArguments = {
-                    model: (isBlazor() && this.isServerRendered) ? null : this
+                    model: this
                 };
                 this.trigger('blur', blurArguments);
             }
@@ -6667,11 +6469,11 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         let range;
         const startDate = !isNullOrUndefined(this.startValue) ?
             this.globalize.formatDate(this.startValue, {
-                format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd'
+                format: this.formatString, type: 'date', skeleton: 'yMd'
             }) : null;
         const endDate = !isNullOrUndefined(this.endValue) ?
             this.globalize.formatDate(this.endValue, {
-                format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd'
+                format: this.formatString, type: 'date', skeleton: 'yMd'
             }) : null;
         if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {
             inputValue = startDate + ' ' + this.separator + ' ' + endDate;
@@ -7026,7 +6828,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     updateHeader() {
-        const format = { type: 'date', skeleton: isBlazor() ? 'D' : 'yMMMd' };
+        const format = { type: 'date', skeleton: 'yMMMd' };
         if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {
             let range = (Math.round(Math.abs((this.removeTimeValueFromDate(this.startValue).getTime() -
                 this.removeTimeValueFromDate(this.endValue).getTime()) / (1000 * 60 * 60 * 24))) + 1);
@@ -7107,7 +6909,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     addSelectedAttributes(ele, date, isStartDate, sameDate) {
         if (ele) {
-            const title = this.globalize.formatDate(date, { type: 'date', skeleton: isBlazor() ? 'D' : 'full' });
+            const title = this.globalize.formatDate(date, { type: 'date', skeleton: 'full' });
             if (!isNullOrUndefined(sameDate) && sameDate) {
                 ele.setAttribute('aria-label', 'The current start and end date is ' + '' + title);
             }
@@ -8388,7 +8190,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     updateInput() {
         if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {
-            const formatOption = { format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' };
+            const formatOption = { format: this.formatString, type: 'date', skeleton: 'yMd' };
             const startDate = this.globalize.formatDate(this.startValue, formatOption);
             const endDate = this.globalize.formatDate(this.endValue, formatOption);
             Input.setValue(startDate + ' ' + this.separator + ' ' + endDate, this.inputElement, this.floatLabelType, this.showClearButton);
@@ -8502,7 +8304,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         const valueString = value;
         let invalid = false;
         let formatOpt = null;
-        formatOpt = { format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' };
+        formatOpt = { format: this.formatString, type: 'date', skeleton: 'yMd' };
         if (typeof valueString !== 'string') {
             invalid = true;
         }
@@ -8886,10 +8688,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     document.body.appendChild(this.mobileRangePopupWrap);
                 }
                 this.openEventArgs = {
-                    popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj || null,
+                    popup: this.popupObj || null,
                     cancel: false,
                     date: this.inputElement.value,
-                    model: (isBlazor() && this.isServerRendered) ? null : this,
+                    model: this,
                     event: event ? event : null,
                     appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body
                 };
@@ -8950,9 +8752,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             if (this.isPopupOpen()) {
                 this.closeEventArgs = {
                     cancel: false,
-                    popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj,
+                    popup: this.popupObj,
                     date: this.inputElement.value,
-                    model: (isBlazor() && this.isServerRendered) ? null : this,
+                    model: this,
                     event: event ? event : null
                 };
                 const eventArgs = this.closeEventArgs;
@@ -9077,7 +8879,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         attributes(this.secondHiddenChild, {
             'type': 'text', 'name': this.inputElement.getAttribute('data-name'), 'class': HIDDENELEMENT
         });
-        const format = { type: 'datetime', skeleton: isBlazor() ? 'd' : 'yMd' };
+        const format = { type: 'datetime', skeleton: 'yMd' };
         this.firstHiddenChild.value = this.startDate && this.globalize.formatDate(this.startDate, format);
         this.secondHiddenChild.value = this.endDate && this.globalize.formatDate(this.endDate, format);
         this.inputElement.parentElement.appendChild(this.firstHiddenChild);
@@ -9108,7 +8910,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
      * @private
      */
     onPropertyChanged(newProp, oldProp) {
-        const format = { format: this.formatString, type: 'date', skeleton: isBlazor() ? 'd' : 'yMd' };
+        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) {
@@ -9478,8 +9280,6 @@ const HOVER$1 = 'e-hover';
 const NAVIGATION = 'e-navigation';
 const DISABLED$3 = 'e-disabled';
 const ICONANIMATION = 'e-icon-anim';
-const TIMEICON = 'e-time-icon';
-const CLEARICON$1 = 'e-clear-icon';
 const FOCUS = 'e-input-focus';
 const LISTCLASS$1 = 'e-list-item';
 const HALFPOSITION = 2;
@@ -9562,10 +9362,8 @@ let TimePicker = class TimePicker extends Component {
         super(options, element);
         this.liCollections = [];
         this.timeCollections = [];
-        this.blazorTimeCollections = [];
         this.disableItemCollection = [];
         this.invalidValueString = null;
-        this.isBlazorServer = false;
         this.isAngular = false;
         this.preventChange = false;
         this.maskedDateValue = '';
@@ -9597,62 +9395,35 @@ let TimePicker = class TimePicker extends Component {
         this.inputElement = this.element;
         this.angularTag = null;
         this.formElement = closest(this.element, 'form');
-        this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'timepicker') ? true : false;
-        if (!this.isBlazorServer) {
-            if (this.element.tagName === 'EJS-TIMEPICKER') {
-                this.angularTag = this.element.tagName;
-                this.inputElement = this.createElement('input');
-                this.element.appendChild(this.inputElement);
-            }
-            this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-            this.element.removeAttribute('tabindex');
-            this.openPopupEventArgs = {
-                appendTo: document.body
-            };
-        }
-    }
-    // element creation
-    render() {
-        if (!this.isBlazorServer) {
-            this.initialize();
-            this.createInputElement();
-            this.updateHtmlAttributeToWrapper();
-            this.setTimeAllowEdit();
-            this.setEnable();
-            this.validateInterval();
-        }
-        else {
-            this.globalize = new Internationalization(this.locale);
-            this.defaultCulture = new Internationalization('en');
-            this.checkTimeFormat();
-            const parentElement = this.element.parentElement;
-            this.inputWrapper = {
-                container: parentElement,
-                clearButton: parentElement.querySelector('.' + CLEARICON$1),
-                buttons: [parentElement.querySelector('.' + TIMEICON)]
-            };
-            Input.bindInitialEvent({
-                element: this.inputElement,
-                floatLabelType: this.floatLabelType
-            });
-            if (this.showClearButton && this.inputWrapper.clearButton) {
-                Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);
-            }
+        if (this.element.tagName === 'EJS-TIMEPICKER') {
+            this.angularTag = this.element.tagName;
+            this.inputElement = this.createElement('input');
+            this.element.appendChild(this.inputElement);
         }
+        this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
+        this.element.removeAttribute('tabindex');
+        this.openPopupEventArgs = {
+            appendTo: document.body
+        };
+    }
+    // element creation
+    render() {
+        this.initialize();
+        this.createInputElement();
+        this.updateHtmlAttributeToWrapper();
+        this.setTimeAllowEdit();
+        this.setEnable();
+        this.validateInterval();
         this.bindEvents();
-        if (!this.isBlazorServer) {
-            this.validateDisable();
-            this.setValue(this.getFormattedValue(this.value));
-            if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {
-                this.updateInputValue(this.maskedDateValue);
-                this.checkErrorState(this.maskedDateValue);
-            }
+        this.validateDisable();
+        this.setValue(this.getFormattedValue(this.value));
+        if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {
+            this.updateInputValue(this.maskedDateValue);
+            this.checkErrorState(this.maskedDateValue);
         }
         this.anchor = this.inputElement;
         this.inputElement.setAttribute('value', this.inputElement.value);
-        if (!this.isBlazorServer) {
-            this.inputEleValue = this.getDateObject(this.inputElement.value);
-        }
+        this.inputEleValue = this.getDateObject(this.inputElement.value);
         this.renderComplete();
     }
     setTimeAllowEdit() {
@@ -9810,7 +9581,7 @@ let TimePicker = class TimePicker extends Component {
     getCldrDateTimeFormat() {
         const culture = new Internationalization(this.locale);
         let cldrTime;
-        const dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });
+        const dateFormat = culture.getDatePattern({ skeleton: 'yMd' });
         if (this.isNullOrEmpty(this.formatString)) {
             cldrTime = dateFormat + ' ' + this.cldrFormat('time');
         }
@@ -9840,7 +9611,7 @@ let TimePicker = class TimePicker extends Component {
                         }));
                         if (isNullOrUndefined(valueExpression)) {
                             valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {
-                                format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                                format: this.formatString, type: 'dateTime', skeleton: 'yMd'
                             }));
                         }
                     }
@@ -9889,8 +9660,7 @@ let TimePicker = class TimePicker extends Component {
     cldrFormat(type) {
         let cldrDateTimeString;
         if (this.locale === 'en' || this.locale === 'en-US') {
-            cldrDateTimeString = isBlazor() ? this.getBlazorCultureFormat('t') :
-                (getValue('timeFormats.short', getDefaultDateObject()));
+            cldrDateTimeString = (getValue('timeFormats.short', getDefaultDateObject()));
         }
         else {
             cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));
@@ -9899,48 +9669,43 @@ let TimePicker = class TimePicker extends Component {
     }
     // destroy function
     destroy() {
-        if (this.isBlazorServer) {
-            this.unBindEvents();
-        }
-        else {
-            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'
-            };
-            if (this.inputElement) {
-                Input.removeAttributes(ariaAttribute, this.inputElement);
-                if (this.angularTag === null) {
-                    this.inputWrapper.container.parentElement.appendChild(this.inputElement);
-                }
-                if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {
-                    this.inputElement.setAttribute('tabindex', this.tabIndex);
-                }
-                else {
-                    this.inputElement.removeAttribute('tabindex');
-                }
-                this.ensureInputAttribute();
-                this.enableElement([this.inputElement]);
-                this.inputElement.classList.remove('e-input');
-                if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {
-                    Input.setEnabled(true, this.inputElement, this.floatLabelType);
-                }
+        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'
+        };
+        if (this.inputElement) {
+            Input.removeAttributes(ariaAttribute, this.inputElement);
+            if (this.angularTag === null) {
+                this.inputWrapper.container.parentElement.appendChild(this.inputElement);
             }
-            if (this.inputWrapper.container) {
-                detach(this.inputWrapper.container);
+            if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {
+                this.inputElement.setAttribute('tabindex', this.tabIndex);
             }
-            this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;
-            this.liCollections = this.timeCollections = this.disableItemCollection = [];
-            if (!isNullOrUndefined(this.rippleFn)) {
-                this.rippleFn();
+            else {
+                this.inputElement.removeAttribute('tabindex');
             }
-            super.destroy();
-            if (this.formElement) {
-                EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
+            this.ensureInputAttribute();
+            this.enableElement([this.inputElement]);
+            this.inputElement.classList.remove('e-input');
+            if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {
+                Input.setEnabled(true, this.inputElement, this.floatLabelType);
             }
         }
+        if (this.inputWrapper.container) {
+            detach(this.inputWrapper.container);
+        }
+        this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;
+        this.liCollections = this.timeCollections = this.disableItemCollection = [];
+        if (!isNullOrUndefined(this.rippleFn)) {
+            this.rippleFn();
+        }
+        super.destroy();
+        if (this.formElement) {
+            EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
+        }
     }
     ensureInputAttribute() {
         const propertyList = [];
@@ -9964,24 +9729,18 @@ let TimePicker = class TimePicker extends Component {
     }
     //popup creation
     popupCreation() {
-        if (!this.isBlazorServer) {
-            this.popupWrapper = this.createElement('div', {
-                className: ROOT$3 + ' ' + POPUP$2,
-                attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }
-            });
-            if (!isNullOrUndefined(this.cssClass)) {
-                this.popupWrapper.className += ' ' + this.cssClass;
-            }
-            if (!isNullOrUndefined(this.step) && this.step > 0) {
-                this.generateList();
-                append([this.listWrapper], this.popupWrapper);
-            }
-            this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);
+        this.popupWrapper = this.createElement('div', {
+            className: ROOT$3 + ' ' + POPUP$2,
+            attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }
+        });
+        if (!isNullOrUndefined(this.cssClass)) {
+            this.popupWrapper.className += ' ' + this.cssClass;
         }
-        else {
-            this.popupWrapper = this.inputWrapper.container.nextElementSibling;
+        if (!isNullOrUndefined(this.step) && this.step > 0) {
             this.generateList();
+            append([this.listWrapper], this.popupWrapper);
         }
+        this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);
         this.addSelection();
         this.renderPopup();
         detach(this.popupWrapper);
@@ -9992,22 +9751,11 @@ let TimePicker = class TimePicker extends Component {
         return popupHeight > height ? height : popupHeight;
     }
     generateList() {
-        if (!this.isBlazorServer) {
-            this.createListItems();
-        }
-        else {
-            this.listWrapper = this.popupWrapper.querySelector('.e-content');
-        }
+        this.createListItems();
         this.wireListEvents();
         const rippleModel = { duration: 300, selector: '.' + LISTCLASS$1 };
         this.rippleFn = rippleEffect(this.listWrapper, rippleModel);
         this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS$1);
-        if (this.isBlazorServer) {
-            this.blazorTimeCollections = [];
-            for (let index = 0; index < this.liCollections.length; index++) {
-                this.blazorTimeCollections.push(this.liCollections[index].getAttribute('data-value'));
-            }
-        }
     }
     renderPopup() {
         this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
@@ -10027,11 +9775,9 @@ let TimePicker = class TimePicker extends Component {
                 removeClass([this.inputWrapper.buttons[0]], SELECTED$4);
                 this.unWireListEvents();
                 this.inputElement.setAttribute('aria-activedescendant', 'null');
-                if (!this.isBlazorServer) {
-                    remove(this.popupObj.element);
-                    this.popupObj.destroy();
-                    this.popupWrapper.innerHTML = '';
-                }
+                remove(this.popupObj.element);
+                this.popupObj.destroy();
+                this.popupWrapper.innerHTML = '';
                 this.listWrapper = this.popupWrapper = this.listTag = undefined;
             }, targetExitViewport: () => {
                 if (!Browser.isDevice) {
@@ -10050,7 +9796,7 @@ let TimePicker = class TimePicker extends Component {
             return null;
         }
         else {
-            return this.globalize.formatDate(value, { skeleton: isBlazor() ? 't' : 'medium', type: 'time' });
+            return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' });
         }
     }
     getDateObject(text) {
@@ -10151,12 +9897,11 @@ let TimePicker = class TimePicker extends Component {
     getMeridianText() {
         let meridian;
         if (this.locale === 'en' || this.locale === 'en-US') {
-            meridian = getValue((isBlazor() ? 'dayPeriods.wide' : 'dayPeriods.format.wide'), getDefaultDateObject());
+            meridian = getValue('dayPeriods.format.wide', getDefaultDateObject());
         }
         else {
-            const gregorianFormat = (isBlazor() ? '.dates.dayPeriods.abbreviated' :
-                '.dates.calendars.gregorian.dayPeriods.format.abbreviated');
-            const mainVal = isBlazor() ? '' : 'main.';
+            const gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated';
+            const mainVal = 'main.';
             meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);
         }
         return meridian;
@@ -10233,11 +9978,8 @@ let TimePicker = class TimePicker extends Component {
         if (!isNullOrUndefined(this.popupWrapper)) {
             const items = this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);
             if (items.length) {
-                const initialTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +
-                    this.blazorTimeCollections[0]).setMilliseconds(0) : this.timeCollections[0];
-                const scrollTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +
-                    this.scrollTo.toLocaleTimeString()).setMilliseconds(0) :
-                    this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();
+                const initialTime = this.timeCollections[0];
+                const scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();
                 element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];
             }
         }
@@ -10262,23 +10004,18 @@ let TimePicker = class TimePicker extends Component {
     cldrDateFormat() {
         let cldrDate;
         if (this.locale === 'en' || this.locale === 'en-US') {
-            cldrDate = isBlazor() ? (getValue('d', getValue(this.locale, blazorCultureFormats))) :
-                (getValue('dateFormats.short', getDefaultDateObject()));
+            cldrDate = (getValue('dateFormats.short', getDefaultDateObject()));
         }
         else {
             cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));
         }
         return cldrDate;
     }
-    getBlazorCultureFormat(formatVal) {
-        return (getValue(formatVal, getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a');
-    }
     cldrTimeFormat() {
         let cldrTime;
         if (this.isNullOrEmpty(this.formatString)) {
             if (this.locale === 'en' || this.locale === 'en-US') {
-                cldrTime = isBlazor() ? this.getBlazorCultureFormat('t') :
-                    (getValue('timeFormats.short', getDefaultDateObject()));
+                cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));
             }
             else {
                 cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));
@@ -10292,12 +10029,10 @@ let TimePicker = class TimePicker extends Component {
     dateToNumeric() {
         let cldrTime;
         if (this.locale === 'en' || this.locale === 'en-US') {
-            cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :
-                (getValue('timeFormats.medium', getDefaultDateObject()));
+            cldrTime = (getValue('timeFormats.medium', getDefaultDateObject()));
         }
         else {
-            cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :
-                (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));
+            cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));
         }
         return cldrTime;
     }
@@ -10345,9 +10080,6 @@ let TimePicker = class TimePicker extends Component {
         e.preventDefault();
         this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');
     }
-    updateBlazorTimeCollections(listData) {
-        this.blazorTimeCollections = listData;
-    }
     popupHandler(e) {
         if (!this.enabled) {
             return;
@@ -10355,10 +10087,8 @@ let TimePicker = class TimePicker extends Component {
         if (Browser.isDevice) {
             this.inputElement.setAttribute('readonly', '');
         }
-        if (!this.isBlazorServer) {
-            e.preventDefault();
-        }
-        if (this.isPopupOpen() && !this.isBlazorServer) {
+        e.preventDefault();
+        if (this.isPopupOpen()) {
             this.closePopup(0, e);
         }
         else {
@@ -10456,22 +10186,11 @@ let TimePicker = class TimePicker extends Component {
                 case 'enter':
                     if (this.isNavigate) {
                         this.selectedElement = this.liCollections[this.activeIndex];
-                        if (!this.isBlazorServer) {
-                            this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
-                            this.updateValue(this.valueWithMinutes, event);
-                        }
-                        else {
-                            this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));
-                            this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);
-                        }
+                        this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
+                        this.updateValue(this.valueWithMinutes, event);
                     }
                     else {
-                        if (!this.isBlazorServer) {
-                            this.updateValue(this.inputElement.value, event);
-                        }
-                        else {
-                            this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);
-                        }
+                        this.updateValue(this.inputElement.value, event);
                     }
                     this.hide();
                     this.isNavigate = false;
@@ -10480,24 +10199,17 @@ let TimePicker = class TimePicker extends Component {
                     }
                     break;
                 case 'open':
-                    if (this.isBlazorServer) {
-                        this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);
-                    }
-                    else {
-                        this.show(event);
-                    }
+                    this.show(event);
                     break;
                 case 'escape':
-                    if (!this.isBlazorServer) {
-                        this.updateInputValue(this.objToString(this.value));
-                        if (this.enableMask) {
-                            if (!this.value) {
-                                this.updateInputValue(this.maskedDateValue);
-                            }
-                            this.createMask();
+                    this.updateInputValue(this.objToString(this.value));
+                    if (this.enableMask) {
+                        if (!this.value) {
+                            this.updateInputValue(this.maskedDateValue);
                         }
-                        this.previousState(this.value);
+                        this.createMask();
                     }
+                    this.previousState(this.value);
                     this.hide();
                     break;
                 case 'close':
@@ -10535,7 +10247,7 @@ let TimePicker = class TimePicker extends Component {
     closePopup(delay, e) {
         if (this.isPopupOpen() && this.popupWrapper) {
             const args = {
-                popup: this.isBlazorServer ? null : this.popupObj,
+                popup: this.popupObj,
                 event: e || null,
                 cancel: false,
                 name: 'open'
@@ -10552,12 +10264,6 @@ let TimePicker = class TimePicker extends Component {
                     removeClass([this.inputWrapper.container], [ICONANIMATION]);
                     attributes(this.inputElement, { 'aria-expanded': 'false' });
                     EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
-                    if (this.isBlazorServer) {
-                        this.disposeServerPopup();
-                        this.inputWrapper.container.parentElement.insertBefore(this.popupWrapper, this.inputWrapper.container.nextElementSibling);
-                        this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);
-                        this.popupWrapper = this.popupObj = null;
-                    }
                 }
                 if (Browser.isDevice && this.modal) {
                     this.modal.style.display = 'none';
@@ -10630,30 +10336,19 @@ let TimePicker = class TimePicker extends Component {
         }
     }
     setSelection(li, event) {
-        if (this.isValidLI(li) && !li.classList.contains(SELECTED$4)) {
-            if (!this.isBlazorServer) {
-                this.checkValue(li.getAttribute('data-value'));
-                if (this.enableMask) {
-                    this.notify("setMaskSelection", {
-                        module: "MaskedDateTime"
-                    });
-                }
-                this.selectedElement = li;
-                this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);
-                this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
-                addClass([this.selectedElement], SELECTED$4);
-                this.selectedElement.setAttribute('aria-selected', 'true');
-                this.checkValueChange(event, true);
-            }
-            else {
-                this.selectedElement = li;
-                this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);
-                addClass([this.selectedElement], SELECTED$4);
-                this.selectedElement.setAttribute('aria-selected', 'true');
-                this.inputElement.setAttribute('value', li.getAttribute('data-value'));
-                this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, false);
-                this.addSelection();
+        if (this.isValidLI(li)) {
+            this.checkValue(li.getAttribute('data-value'));
+            if (this.enableMask) {
+                this.notify("setMaskSelection", {
+                    module: "MaskedDateTime"
+                });
             }
+            this.selectedElement = li;
+            this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);
+            this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
+            addClass([this.selectedElement], SELECTED$4);
+            this.selectedElement.setAttribute('aria-selected', 'true');
+            this.checkValueChange(event, true);
         }
     }
     onMouseLeave() {
@@ -10761,7 +10456,7 @@ let TimePicker = class TimePicker extends Component {
         return dateVal;
     }
     bindEvents() {
-        EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler), this);
+        EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.popupHandler, this);
         EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
         EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
         EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
@@ -10807,18 +10502,16 @@ let TimePicker = class TimePicker extends Component {
         }
         if (!this.inputElement.disabled) {
             let timeValue = this.inputElement.getAttribute('value');
-            let val = this.isBlazorServer ? this.inputEleValue : this.checkDateValue(this.inputEleValue);
+            let val = this.checkDateValue(this.inputEleValue);
             if (this.element.tagName === 'EJS-TIMEPICKER') {
                 val = null;
                 timeValue = '';
                 this.inputElement.setAttribute('value', '');
             }
-            if (!this.isBlazorServer) {
-                this.setProperties({ value: val }, true);
-                this.prevDate = this.value;
-                this.valueWithMinutes = this.value;
-                this.initValue = this.value;
-            }
+            this.setProperties({ value: val }, true);
+            this.prevDate = this.value;
+            this.valueWithMinutes = this.value;
+            this.initValue = this.value;
             if (this.inputElement) {
                 this.updateInputValue(timeValue);
                 if (this.enableMask) {
@@ -10827,9 +10520,7 @@ let TimePicker = class TimePicker extends Component {
                     }
                     this.createMask();
                 }
-                if (!this.isBlazorServer) {
-                    this.checkErrorState(timeValue);
-                }
+                this.checkErrorState(timeValue);
                 this.prevValue = this.inputElement.value;
             }
         }
@@ -10849,7 +10540,7 @@ let TimePicker = class TimePicker extends Component {
     }
     unBindEvents() {
         if (this.inputWrapper) {
-            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler));
+            EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.popupHandler);
         }
         EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
         EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
@@ -10889,9 +10580,6 @@ let TimePicker = class TimePicker extends Component {
             this.resetState();
             this.raiseClearedEvent(e);
         }
-        if (this.isBlazorServer) {
-            this.interopAdaptor.invokeMethodAsync('OnValueCleared');
-        }
         if (this.popupWrapper) {
             this.popupWrapper.scrollTop = 0;
         }
@@ -10902,15 +10590,11 @@ let TimePicker = class TimePicker extends Component {
         }
     }
     clear(event) {
-        if (!this.isBlazorServer) {
-            this.setProperties({ value: null }, true);
-        }
+        this.setProperties({ value: null }, true);
         this.initValue = null;
         this.resetState();
         this.raiseClearedEvent(event);
-        if (!this.isBlazorServer) {
-            this.changeEvent(event);
-        }
+        this.changeEvent(event);
     }
     setZIndex() {
         if (this.popupObj) {
@@ -10954,34 +10638,28 @@ let TimePicker = class TimePicker extends Component {
                         }
                         break;
                     case 'min':
-                        if (!this.isBlazorServer) {
-                            if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {
-                                value = new Date(this.inputElement.getAttribute(prop));
-                                if (!isNullOrUndefined(this.checkDateValue(value))) {
-                                    this.setProperties({ min: value }, !isDynamic);
-                                }
+                        if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {
+                            value = new Date(this.inputElement.getAttribute(prop));
+                            if (!isNullOrUndefined(this.checkDateValue(value))) {
+                                this.setProperties({ min: value }, !isDynamic);
                             }
                         }
                         break;
                     case 'max':
-                        if (!this.isBlazorServer) {
-                            if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {
-                                value = new Date(this.inputElement.getAttribute(prop));
-                                if (!isNullOrUndefined(this.checkDateValue(value))) {
-                                    this.setProperties({ max: value }, !isDynamic);
-                                }
+                        if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {
+                            value = new Date(this.inputElement.getAttribute(prop));
+                            if (!isNullOrUndefined(this.checkDateValue(value))) {
+                                this.setProperties({ max: value }, !isDynamic);
                             }
                         }
                         break;
                     case 'value':
-                        if (!this.isBlazorServer) {
-                            if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {
-                                value = new Date(this.inputElement.getAttribute(prop));
-                                if (!isNullOrUndefined(this.checkDateValue(value))) {
-                                    this.initValue = value;
-                                    this.updateInput(false, this.initValue);
-                                    this.setProperties({ value: value }, !isDynamic);
-                                }
+                        if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {
+                            value = new Date(this.inputElement.getAttribute(prop));
+                            if (!isNullOrUndefined(this.checkDateValue(value))) {
+                                this.initValue = value;
+                                this.updateInput(false, this.initValue);
+                                this.setProperties({ value: value }, !isDynamic);
                             }
                         }
                         break;
@@ -11049,7 +10727,7 @@ let TimePicker = class TimePicker extends Component {
         this.removeSelection();
         Input.setValue('', this.inputElement, this.floatLabelType, false);
         this.valueWithMinutes = this.activeIndex = null;
-        if (!this.strictMode && !this.isBlazorServer) {
+        if (!this.strictMode) {
             this.checkErrorState(null);
         }
     }
@@ -11112,44 +10790,34 @@ let TimePicker = class TimePicker extends Component {
     }
     findNextElement(event) {
         const textVal = (this.inputElement).value;
-        const value = isNullOrUndefined(this.valueWithMinutes) || this.isBlazorServer ? this.createDateObj(textVal) :
+        const value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :
             this.getDateObject(this.valueWithMinutes);
         let timeVal = null;
         const count = this.liCollections.length;
-        const collections = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? [] :
-            this.blazorTimeCollections) : this.timeCollections;
+        const collections = this.timeCollections;
         if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {
             if (event.action === 'home') {
                 const index = this.validLiElement(0);
-                if (!this.isBlazorServer) {
-                    timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                }
+                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                 this.activeIndex = index;
             }
             else if (event.action === 'end') {
                 const index = this.validLiElement(collections.length - 1, true);
-                if (!this.isBlazorServer) {
-                    timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                }
+                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                 this.activeIndex = index;
             }
             else {
                 if (event.action === 'down') {
                     for (let i = 0; i < count; i++) {
-                        if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :
-                            (+value < this.timeCollections[i])) {
+                        if (+value < this.timeCollections[i]) {
                             const index = this.validLiElement(i);
-                            if (!this.isBlazorServer) {
-                                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                            }
+                            timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                             this.activeIndex = index;
                             break;
                         }
                         else if (i === count - 1) {
                             const index = this.validLiElement(0);
-                            if (!this.isBlazorServer) {
-                                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                            }
+                            timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                             this.activeIndex = index;
                             break;
                         }
@@ -11157,20 +10825,15 @@ let TimePicker = class TimePicker extends Component {
                 }
                 else {
                     for (let i = count - 1; i >= 0; i--) {
-                        if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :
-                            (+value > this.timeCollections[i])) {
+                        if (+value > this.timeCollections[i]) {
                             const index = this.validLiElement(i, true);
-                            if (!this.isBlazorServer) {
-                                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                            }
+                            timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                             this.activeIndex = index;
                             break;
                         }
                         else if (i === 0) {
                             const index = this.validLiElement(count - 1);
-                            if (!this.isBlazorServer) {
-                                timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
-                            }
+                            timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));
                             this.activeIndex = index;
                             break;
                         }
@@ -11178,13 +10841,7 @@ let TimePicker = class TimePicker extends Component {
                 }
             }
             this.selectedElement = this.liCollections[this.activeIndex];
-            if (this.isBlazorServer) {
-                this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));
-                this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);
-            }
-            else {
-                this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));
-            }
+            this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));
         }
         else {
             this.selectNextItem(event);
@@ -11194,58 +10851,7 @@ let TimePicker = class TimePicker extends Component {
         const index = this.validLiElement(0, event.action === 'down' ? false : true);
         this.activeIndex = index;
         this.selectedElement = this.liCollections[index];
-        if (this.isBlazorServer) {
-            this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));
-            this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);
-        }
-        else {
-            this.elementValue(new Date(this.timeCollections[index]));
-        }
-    }
-    findNextInBlazor(event) {
-        const count = isNullOrUndefined(this.blazorTimeCollections) ? 0 : this.blazorTimeCollections.length;
-        let index = 0;
-        const value = this.createDateObj(this.inputElement.value);
-        switch (event.action) {
-            case 'home':
-                this.activeIndex = index;
-                break;
-            case 'end':
-                index = count - 1;
-                this.activeIndex = index;
-                break;
-            case 'down':
-                for (let i = 0; i < count; i++) {
-                    if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :
-                        (+value < this.timeCollections[i])) {
-                        const index = this.validLiElement(i);
-                        this.activeIndex = index;
-                        break;
-                    }
-                    else if (i === count - 1) {
-                        const index = this.validLiElement(0);
-                        this.activeIndex = index;
-                        break;
-                    }
-                }
-                break;
-            case 'up':
-                for (let i = count - 1; i >= 0; i--) {
-                    if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :
-                        (+value > this.timeCollections[i])) {
-                        const index = this.validLiElement(i, true);
-                        this.activeIndex = index;
-                        break;
-                    }
-                    else if (i === 0) {
-                        const index = this.validLiElement(count - 1);
-                        this.activeIndex = index;
-                        break;
-                    }
-                }
-                break;
-        }
-        this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);
+        this.elementValue(new Date(this.timeCollections[index]));
     }
     elementValue(value) {
         if (!isNullOrUndefined(this.checkDateValue(value))) {
@@ -11254,53 +10860,34 @@ let TimePicker = class TimePicker extends Component {
     }
     validLiElement(index, backward) {
         let elementIndex = null;
-        if (this.isBlazorServer && isNullOrUndefined(this.popupWrapper)) {
-            const items = this.blazorTimeCollections;
-            if (items.length) {
-                if (backward) {
-                    for (let i = index; i >= 0; i--) {
+        const items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :
+            this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);
+        let isCheck = true;
+        if (items.length) {
+            if (backward) {
+                for (let i = index; i >= 0; i--) {
+                    if (!items[i].classList.contains(DISABLED$3)) {
                         elementIndex = i;
                         break;
                     }
-                }
-                else {
-                    for (let i = index; i <= items.length - 1; i++) {
-                        elementIndex = i;
-                        break;
+                    else if (i === 0) {
+                        if (isCheck) {
+                            index = i = items.length;
+                            isCheck = false;
+                        }
                     }
                 }
             }
-        }
-        else {
-            const items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :
-                this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);
-            let isCheck = true;
-            if (items.length) {
-                if (backward) {
-                    for (let i = index; i >= 0; i--) {
-                        if (!items[i].classList.contains(DISABLED$3)) {
-                            elementIndex = i;
-                            break;
-                        }
-                        else if (i === 0) {
-                            if (isCheck) {
-                                index = i = items.length;
-                                isCheck = false;
-                            }
-                        }
+            else {
+                for (let i = index; i <= items.length - 1; i++) {
+                    if (!items[i].classList.contains(DISABLED$3)) {
+                        elementIndex = i;
+                        break;
                     }
-                }
-                else {
-                    for (let i = index; i <= items.length - 1; i++) {
-                        if (!items[i].classList.contains(DISABLED$3)) {
-                            elementIndex = i;
-                            break;
-                        }
-                        else if (i === items.length - 1) {
-                            if (isCheck) {
-                                index = i = -1;
-                                isCheck = false;
-                            }
+                    else if (i === items.length - 1) {
+                        if (isCheck) {
+                            index = i = -1;
+                            isCheck = false;
                         }
                     }
                 }
@@ -11312,32 +10899,21 @@ let TimePicker = class TimePicker extends Component {
         if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
             return;
         }
-        const count = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? 0 :
-            this.blazorTimeCollections.length) : this.timeCollections.length;
+        const count = this.timeCollections.length;
         if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {
-            if (isNullOrUndefined(this.popupObj) && this.isBlazorServer) {
-                if (isNullOrUndefined(this.activeIndex)) {
+            if (this.liCollections.length > 0) {
+                if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {
                     const index = this.validLiElement(0, event.action === 'down' ? false : true);
                     this.activeIndex = index;
-                    this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);
+                    this.selectedElement = this.liCollections[index];
+                    this.elementValue(new Date(this.timeCollections[index]));
                 }
                 else {
-                    this.findNextInBlazor(event);
+                    this.findNextElement(event);
                 }
             }
             else {
-                if (this.liCollections.length > 0) {
-                    if (this.isBlazorServer ? (isNullOrUndefined(this.activeIndex)) : (isNullOrUndefined(this.value) &&
-                        isNullOrUndefined(this.activeIndex))) {
-                        this.selectNextItem(event);
-                    }
-                    else {
-                        this.findNextElement(event);
-                    }
-                }
-                else {
-                    this.findNextElement(event);
-                }
+                this.findNextElement(event);
             }
         }
         else {
@@ -11348,50 +10924,34 @@ let TimePicker = class TimePicker extends Component {
                 this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;
                 this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?
                     false : true);
-                if (!this.isBlazorServer) {
-                    nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];
-                }
+                nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];
             }
             else if (event.action === 'home') {
                 const index = this.validLiElement(0);
                 this.activeIndex = index;
-                if (!this.isBlazorServer) {
-                    nextItem = this.timeCollections[index];
-                }
+                nextItem = this.timeCollections[index];
             }
             else if (event.action === 'end') {
                 const index = this.validLiElement(count - 1, true);
                 this.activeIndex = index;
-                if (!this.isBlazorServer) {
-                    nextItem = this.timeCollections[index];
-                }
+                nextItem = this.timeCollections[index];
             }
             this.selectedElement = this.liCollections[this.activeIndex];
-            if (this.isBlazorServer) {
-                this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));
-                this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);
-            }
-            else {
-                this.elementValue(new Date(nextItem));
-            }
+            this.elementValue(new Date(nextItem));
         }
         this.isNavigate = true;
         this.setHover(this.selectedElement, NAVIGATION);
         this.setActiveDescendant();
-        if (!this.isBlazorServer) {
-            this.selectInputText();
-        }
+        this.selectInputText();
         if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {
             this.setScrollPosition();
         }
     }
     getCultureTimeObject(ld, c) {
-        return isBlazor() ? (getValue('t', getValue(c, blazorCultureFormats))).replace(/tt/, 'a') :
-            getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);
+        return getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);
     }
     getCultureDateObject(ld, c) {
-        return isBlazor() ? (getValue('d', getValue(c, blazorCultureFormats))) :
-            getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);
+        return getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);
     }
     wireListEvents() {
         EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);
@@ -11493,8 +11053,7 @@ let TimePicker = class TimePicker extends Component {
             const items = this.popupWrapper.querySelectorAll('.' + LISTCLASS$1);
             if (items.length) {
                 for (let i = 0; i < items.length; i++) {
-                    if ((!this.isBlazorServer && this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))
-                        || (this.isBlazorServer && this.blazorTimeCollections[i] === this.blazorTimeCollections[this.activeIndex])) {
+                    if ((this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))) {
                         items[i].setAttribute('aria-selected', 'true');
                         this.selectedElement = items[i];
                         this.activeIndex = i;
@@ -11517,9 +11076,7 @@ let TimePicker = class TimePicker extends Component {
         return (li && li.classList.contains(LISTCLASS$1) && !li.classList.contains(DISABLED$3));
     }
     createDateObj(val) {
-        const formatStr = isBlazor() ?
-            'M' + getDefaultDateObject().dateSeperator + 'd' + getDefaultDateObject().dateSeperator + 'yy'
-            : null;
+        const formatStr = null;
         let today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });
         let value = null;
         if (typeof val === 'string') {
@@ -11661,18 +11218,15 @@ let TimePicker = class TimePicker extends Component {
         }
         removeClass([this.inputWrapper.container], [FOCUS]);
         const blurArguments = {
-            model: this.isBlazorServer ? null : this
+            model: this
         };
         this.trigger('blur', blurArguments);
-        if (!this.isBlazorServer && this.getText() !== this.inputElement.value) {
+        if (this.getText() !== this.inputElement.value) {
             this.updateValue((this.inputElement).value, e);
         }
         else if (this.inputElement.value.trim().length === 0) {
             this.resetState();
         }
-        if (this.isBlazorServer) {
-            this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);
-        }
         this.cursorDetails = null;
         this.isNavigate = false;
         if (this.inputElement.value === '') {
@@ -11689,7 +11243,7 @@ let TimePicker = class TimePicker extends Component {
             this.inputElement.blur();
             removeClass([this.inputWrapper.container], [FOCUS]);
             const blurArguments = {
-                model: this.isBlazorServer ? null : this
+                model: this
             };
             this.trigger('blur', blurArguments);
         }
@@ -11705,7 +11259,7 @@ let TimePicker = class TimePicker extends Component {
             return;
         }
         const focusArguments = {
-            model: this.isBlazorServer ? null : this
+            model: this
         };
         if (!this.readonly && !Browser.isDevice && !this.enableMask) {
             this.selectInputText();
@@ -11767,7 +11321,7 @@ let TimePicker = class TimePicker extends Component {
                 document.body.appendChild(this.mobileTimePopupWrap);
             }
             this.openPopupEventArgs = {
-                popup: this.isBlazorServer ? null : (this.popupObj || null),
+                popup: this.popupObj || null,
                 cancel: false,
                 event: event || null,
                 name: 'open',
@@ -11775,19 +11329,8 @@ let TimePicker = class TimePicker extends Component {
             };
             const eventArgs = this.openPopupEventArgs;
             this.trigger('open', eventArgs, (eventArgs) => {
-                if ((isBlazor() && this.isServerRendered)) {
-                    eventArgs.popup = this.popupObj || null;
-                }
                 this.openPopupEventArgs = eventArgs;
                 if (!this.openPopupEventArgs.cancel && !this.inputWrapper.buttons[0].classList.contains(DISABLED$3)) {
-                    if (this.isBlazorServer) {
-                        this.popupWrapper.style.visibility = '';
-                        this.popupWrapper.style.width = this.inputWrapper.container.offsetWidth + 'px';
-                        this.popupWrapper.style.height = 'auto';
-                    }
-                    if (this.isBlazorServer) {
-                        this.openPopupEventArgs.popup = this.popupObj;
-                    }
                     this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);
                     this.popupAlignment(this.openPopupEventArgs);
                     this.setScrollPosition();
@@ -11813,11 +11356,6 @@ let TimePicker = class TimePicker extends Component {
                 }
                 else {
                     this.popupObj.destroy();
-                    if (this.isBlazorServer) {
-                        this.disposeServerPopup();
-                        this.inputWrapper.container.parentElement.insertBefore(this.popupWrapper, this.inputWrapper.container.nextElementSibling);
-                        this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);
-                    }
                     this.popupWrapper = this.listTag = undefined;
                     this.liCollections = this.timeCollections = this.disableItemCollection = [];
                     this.popupObj = null;
@@ -11941,10 +11479,8 @@ let TimePicker = class TimePicker extends Component {
                     this.setTimeAllowEdit();
                     break;
                 case 'enableRtl':
-                    if (!this.isBlazorServer) {
-                        this.setProperties({ enableRtl: newProp.enableRtl }, true);
-                        this.setEnableRtl();
-                    }
+                    this.setProperties({ enableRtl: newProp.enableRtl }, true);
+                    this.setEnableRtl();
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -11960,9 +11496,7 @@ let TimePicker = class TimePicker extends Component {
                     break;
                 case 'min':
                 case 'max':
-                    if (!this.isBlazorServer) {
-                        this.getProperty(newProp, prop);
-                    }
+                    this.getProperty(newProp, prop);
                     break;
                 case 'showClearButton':
                     Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);
@@ -11973,13 +11507,11 @@ let TimePicker = class TimePicker extends Component {
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
                     this.updatePlaceHolder();
-                    if (!this.isBlazorServer) {
-                        this.setValue(this.value);
-                        if (this.enableMask) {
-                            this.notify("createMask", {
-                                module: "MaskedDateTime",
-                            });
-                        }
+                    this.setValue(this.value);
+                    if (this.enableMask) {
+                        this.notify("createMask", {
+                            module: "MaskedDateTime",
+                        });
                     }
                     break;
                 case 'width':
@@ -11989,50 +11521,46 @@ let TimePicker = class TimePicker extends Component {
                 case 'format':
                     this.setProperties({ format: newProp.format }, true);
                     this.checkTimeFormat();
-                    if (!this.isBlazorServer) {
-                        this.setValue(this.value);
-                        if (this.enableMask) {
-                            this.createMask();
-                            if (!this.value) {
-                                this.updateInputValue(this.maskedDateValue);
-                            }
+                    this.setValue(this.value);
+                    if (this.enableMask) {
+                        this.createMask();
+                        if (!this.value) {
+                            this.updateInputValue(this.maskedDateValue);
                         }
                     }
                     break;
                 case 'value':
-                    if (!this.isBlazorServer) {
-                        this.invalidValueString = null;
-                        this.checkInvalidValue(newProp.value);
-                        newProp.value = this.value;
-                        if (!this.invalidValueString) {
-                            if (typeof newProp.value === 'string') {
-                                this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);
-                                newProp.value = this.value;
-                            }
-                            else {
-                                if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {
-                                    newProp.value = this.checkDateValue(new Date('' + newProp.value));
-                                }
-                            }
-                            this.initValue = newProp.value;
-                            newProp.value = this.compareFormatChange(this.checkValue(newProp.value));
+                    this.invalidValueString = null;
+                    this.checkInvalidValue(newProp.value);
+                    newProp.value = this.value;
+                    if (!this.invalidValueString) {
+                        if (typeof newProp.value === 'string') {
+                            this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);
+                            newProp.value = this.value;
                         }
                         else {
-                            this.updateInputValue(this.invalidValueString);
-                            this.checkErrorState(this.invalidValueString);
-                        }
-                        this.checkValueChange(null, false);
-                        if (this.isPopupOpen()) {
-                            this.setScrollPosition();
-                        }
-                        if (this.isAngular && this.preventChange) {
-                            this.preventChange = false;
-                        }
-                        if (this.enableMask) {
-                            this.notify("createMask", {
-                                module: "MaskedDateTime",
-                            });
+                            if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {
+                                newProp.value = this.checkDateValue(new Date('' + newProp.value));
+                            }
                         }
+                        this.initValue = newProp.value;
+                        newProp.value = this.compareFormatChange(this.checkValue(newProp.value));
+                    }
+                    else {
+                        this.updateInputValue(this.invalidValueString);
+                        this.checkErrorState(this.invalidValueString);
+                    }
+                    this.checkValueChange(null, false);
+                    if (this.isPopupOpen()) {
+                        this.setScrollPosition();
+                    }
+                    if (this.isAngular && this.preventChange) {
+                        this.preventChange = false;
+                    }
+                    if (this.enableMask) {
+                        this.notify("createMask", {
+                            module: "MaskedDateTime",
+                        });
                     }
                     break;
                 case 'floatLabelType':
@@ -12041,32 +11569,23 @@ let TimePicker = class TimePicker extends Component {
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
                     break;
                 case 'strictMode':
-                    if (!this.isBlazorServer) {
-                        this.invalidValueString = null;
-                        if (newProp.strictMode) {
-                            this.checkErrorState(null);
-                        }
-                        this.setProperties({ strictMode: newProp.strictMode }, true);
-                        this.checkValue((this.inputElement).value);
-                        this.checkValueChange(null, false);
+                    this.invalidValueString = null;
+                    if (newProp.strictMode) {
+                        this.checkErrorState(null);
                     }
+                    this.setProperties({ strictMode: newProp.strictMode }, true);
+                    this.checkValue((this.inputElement).value);
+                    this.checkValueChange(null, false);
                     break;
                 case 'scrollTo':
-                    if (!this.isBlazorServer) {
-                        if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {
-                            if (this.popupWrapper) {
-                                this.setScrollTo();
-                            }
-                            this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);
-                        }
-                        else {
-                            this.setProperties({ scrollTo: null }, true);
-                        }
-                    }
-                    else {
+                    if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {
                         if (this.popupWrapper) {
                             this.setScrollTo();
                         }
+                        this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);
+                    }
+                    else {
+                        this.setProperties({ scrollTo: null }, true);
                     }
                     break;
                 case 'enableMask':
@@ -12299,7 +11818,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
         removeClass([this.inputWrapper.container], INPUTFOCUS$2);
         const blurArguments = {
-            model: (isBlazor() && this.isServerRendered) ? null : this
+            model: this
         };
         if (this.isTimePopupOpen()) {
             this.hide(e);
@@ -12478,7 +11997,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         let dateOptions;
         if (!isNullOrUndefined(value)) {
             if (this.calendarMode === 'Gregorian') {
-                dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };
+                dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };
             }
             else {
                 dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
@@ -12529,8 +12048,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         let cldrTime;
         if (this.isNullOrEmpty(this.timeFormat)) {
             if (this.locale === 'en' || this.locale === 'en-US') {
-                cldrTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :
-                    (getValue('timeFormats.short', getDefaultDateObject()));
+                cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));
             }
             else {
                 cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));
@@ -12544,7 +12062,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     cldrDateTimeFormat() {
         let cldrTime;
         const culture = new Internationalization(this.locale);
-        const dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });
+        const dateFormat = culture.getDatePattern({ skeleton: 'yMd' });
         if (this.isNullOrEmpty(this.formatString)) {
             cldrTime = dateFormat + ' ' + this.getCldrFormat('time');
         }
@@ -12557,8 +12075,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     getCldrFormat(type) {
         let cldrDateTime;
         if (this.locale === 'en' || this.locale === 'en-US') {
-            cldrDateTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :
-                (getValue('timeFormats.short', getDefaultDateObject()));
+            cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));
         }
         else {
             cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));
@@ -12576,8 +12093,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getCultureTimeObject(ld, c) {
         if (this.calendarMode === 'Gregorian') {
-            return isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :
-                (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld));
+            return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);
         }
         else {
             return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);
@@ -12723,7 +12239,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     openPopup(e) {
         this.preventArgs = {
             cancel: false,
-            popup: (isBlazor() && this.isServerRendered) ? null : this.popupObject,
+            popup: this.popupObject,
             event: e || null
         };
         const eventArgs = this.preventArgs;
@@ -13130,7 +12646,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         if (this.popupObj || this.dateTimeWrapper) {
             this.preventArgs = {
                 cancel: false,
-                popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj || this.popupObject,
+                popup: this.popupObj || this.popupObject,
                 event: e || null
             };
             const eventArgs = this.preventArgs;
@@ -13370,7 +12886,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         if (this.calendarMode === 'Gregorian') {
             dateString = this.globalize.formatDate(time, {
                 format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),
-                type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'
+                type: 'dateTime', skeleton: 'yMd'
             });
         }
         else {
@@ -13792,9 +13308,14 @@ class MaskedDateTime {
         this.isDeletion = false;
         this.isShortYear = false;
         this.isDeleteKey = false;
+        this.isDateZero = false;
+        this.isMonthZero = false;
+        this.isYearZero = false;
+        this.dayTypeCount = 0;
+        this.monthTypeCount = 0;
         this.parent = parent;
         this.dateformat = this.getCulturedFormat();
-        this.maskDateValue = this.parent.value != null ? this.parent.value : new Date();
+        this.maskDateValue = this.parent.value != null ? new Date(+this.parent.value) : new Date();
         this.maskDateValue.setMonth(0);
         this.maskDateValue.setHours(0);
         this.maskDateValue.setMinutes(0);
@@ -13952,6 +13473,7 @@ class MaskedDateTime {
         switch (this.previousHiddenMask[start - 1]) {
             case 'd':
                 let date = (this.isDayPart && newDateValue.getDate().toString().length < 2 ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.isDateZero = (newVal[start - 1] == '0');
                 if (isNaN(date)) {
                     return;
                 }
@@ -13966,9 +13488,11 @@ class MaskedDateTime {
                         return;
                     }
                     this.isDayPart = true;
+                    this.dayTypeCount = this.dayTypeCount + 1;
                 }
                 else {
                     this.isDayPart = false;
+                    this.dayTypeCount = this.isDateZero ? this.dayTypeCount + 1 : this.dayTypeCount;
                 }
                 break;
             case 'M':
@@ -13979,6 +13503,7 @@ class MaskedDateTime {
                 else {
                     month = parseInt(newVal[start - 1], 10);
                 }
+                this.isMonthZero = (newVal[start - 1] == '0');
                 if (!isNaN(month)) {
                     while (month > 12) {
                         month = parseInt(month.toString().slice(1), 10);
@@ -13999,10 +13524,12 @@ class MaskedDateTime {
                         }
                         this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());
                         this.isMonthPart = true;
+                        this.monthTypeCount = this.monthTypeCount + 1;
                     }
                     else {
                         newDateValue.setMonth(0);
                         this.isMonthPart = false;
+                        this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;
                     }
                 }
                 else { // let monthString: string[] = <string[]>(getValue('months[stand-alone].wide', getDefaultDateObject()));
@@ -14027,6 +13554,7 @@ class MaskedDateTime {
             case 'y':
                 let year = (this.isYearPart && (newDateValue.getFullYear().toString().length < 4 && !this.isShortYear) ? newDateValue.getFullYear() * 10 : 0) + parseInt(newVal[start - 1], 10);
                 this.isShortYear = false;
+                this.isYearZero = (newVal[start - 1] == '0');
                 if (isNaN(year)) {
                     return;
                 }
@@ -14134,9 +13662,15 @@ class MaskedDateTime {
                 case 'dddd':
                 case 'd':
                     result = proxy.isDayPart ? proxy.maskDateValue.getDate().toString() : proxy.defaultConstant['day'].toString();
+                    result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);
                     break;
                 case 'dd':
                     result = proxy.isDayPart ? proxy.roundOff(proxy.maskDateValue.getDate(), 2) : proxy.defaultConstant['day'].toString();
+                    result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);
+                    if (proxy.dayTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.dayTypeCount = 0;
+                    }
                     break;
                 case 'E':
                 case 'EE':
@@ -14151,9 +13685,15 @@ class MaskedDateTime {
                     break;
                 case 'M':
                     result = proxy.isMonthPart ? (proxy.maskDateValue.getMonth() + 1).toString() : proxy.defaultConstant['month'].toString();
+                    result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);
                     break;
                 case 'MM':
                     result = proxy.isMonthPart ? proxy.roundOff(proxy.maskDateValue.getMonth() + 1, 2) : proxy.defaultConstant['month'].toString();
+                    result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);
+                    if (proxy.monthTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.monthTypeCount = 0;
+                    }
                     break;
                 case 'MMM':
                     result = proxy.isMonthPart ? monthAbbreviated[proxy.maskDateValue.getMonth() + 1] : proxy.defaultConstant['month'].toString();
@@ -14163,6 +13703,7 @@ class MaskedDateTime {
                     break;
                 case 'yy':
                     result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear() % 100, 2) : proxy.defaultConstant['year'].toString();
+                    result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);
                     if (proxy.isYearPart) {
                         proxy.isNavigate = proxy.isShortYear = (proxy.maskDateValue.getFullYear() % 100).toString().length === 2;
                     }
@@ -14170,6 +13711,7 @@ class MaskedDateTime {
                 case 'y':
                 case 'yyyy':
                     result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear(), 4) : proxy.defaultConstant['year'].toString();
+                    result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);
                     break;
                 case 'h':
                     result = proxy.isHourPart ? (proxy.maskDateValue.getHours() % 12 || 12).toString() : proxy.defaultConstant['hour'].toString();
@@ -14245,6 +13787,7 @@ class MaskedDateTime {
         inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
         this.isHiddenMask = true;
         this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());
+        this.isDateZero = this.isMonthZero = this.isYearZero = false;
         this.isHiddenMask = false;
         this.previousHiddenMask = this.hiddenMask;
         this.previousValue = inputValue;
@@ -14281,6 +13824,13 @@ class MaskedDateTime {
         }
         return result + valueText;
     }
+    zeroCheck(isZero, isDayPart, resultValue) {
+        let result = resultValue;
+        if (isZero && !isDayPart) {
+            result = '0';
+        }
+        return result;
+    }
     handleDeletion(format, isSegment) {
         switch (format) {
             case 'd':