@syncfusion/ej2-calendars 21.2.9 → 22.1.34

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, 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 { Animation, Browser, ChildProperty, Collection, Component, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, Touch, 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';
@@ -1507,7 +1507,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
     }
     navigatePrevious(e) {
-        e.preventDefault();
+        !Browser.isDevice && e.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.previous();
         }
@@ -1538,7 +1538,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
     }
     navigateNext(eve) {
-        eve.preventDefault();
+        !Browser.isDevice && eve.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.next();
         }
@@ -3205,6 +3205,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.isDynamicValueChanged = false;
         this.moduleName = this.getModuleName();
         this.isFocused = false;
+        this.isBlur = false;
         this.datepickerOptions = options;
     }
     /**
@@ -3216,7 +3217,9 @@ let DatePicker = class DatePicker extends Calendar {
     render() {
         this.initialize();
         this.bindEvents();
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
@@ -3299,6 +3302,9 @@ let DatePicker = class DatePicker extends Calendar {
             this.l10n = new L10n('datepicker', l10nLocale, this.locale);
             this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
         }
+        if (this.fullScreenMode && Browser.isDevice) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassValues = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -3337,10 +3343,10 @@ let DatePicker = class DatePicker extends Calendar {
         Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
         addClass([this.inputWrapper.container], DATEWRAPPER);
     }
-    updateInput(isDynamic = false) {
+    updateInput(isDynamic = false, isBlur = false) {
         let formatOptions;
         if (this.value && !this.isCalendar()) {
-            this.disabledDates(isDynamic);
+            this.disabledDates(isDynamic, isBlur);
         }
         if (isNaN(+new Date(this.checkValue(this.value)))) {
             this.setProperties({ value: null }, true);
@@ -3821,7 +3827,9 @@ let DatePicker = class DatePicker extends Calendar {
             this.invalidValueString = null;
             this.updateInputValue('');
         }
-        this.updateInput();
+        this.isBlur = true;
+        this.updateInput(false, true);
+        this.isBlur = false;
         this.popupUpdate();
         this.changeTrigger(e);
         if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {
@@ -4093,6 +4101,13 @@ let DatePicker = class DatePicker extends Calendar {
             zIndex: this.zIndex,
             collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },
             open: () => {
+                if (Browser.isDevice && this.fullScreenMode) {
+                    this.iconRight = parseInt(window.getComputedStyle(this.calendarElement.querySelector('.e-header.e-month .e-prev')).marginRight, 10) > 16 ? true : false;
+                    this.touchModule = new Touch(this.calendarElement.querySelector(".e-content.e-month"), {
+                        swipe: this.CalendarSwipeHandler.bind(this)
+                    });
+                    EventHandler.add(this.calendarElement.querySelector(".e-content.e-month"), "touchstart", this.TouchStartHandler, this);
+                }
                 if (this.getModuleName() !== 'datetimepicker') {
                     if (document.activeElement !== this.inputElement) {
                         this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);
@@ -4134,6 +4149,45 @@ let DatePicker = class DatePicker extends Calendar {
         this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     }
+    CalendarSwipeHandler(e) {
+        let direction = 0;
+        if (this.iconRight) {
+            switch (e.swipeDirection) {
+                case "Left":
+                    direction = 1;
+                    break;
+                case "Right":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        else {
+            switch (e.swipeDirection) {
+                case "Up":
+                    direction = 1;
+                    break;
+                case "Down":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (this.touchStart) {
+            if (direction === 1) {
+                this.navigateNext(e);
+            }
+            else if (direction === -1) {
+                this.navigatePrevious(e);
+            }
+            this.touchStart = false;
+        }
+    }
+    TouchStartHandler(e) {
+        this.touchStart = true;
+    }
     setAriaDisabled() {
         if (!this.enabled) {
             this.inputElement.setAttribute('aria-disabled', 'true');
@@ -4172,12 +4226,25 @@ let DatePicker = class DatePicker extends Calendar {
             dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };
         }
         monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);
-        modelHeader.appendChild(yearHeading);
+        if (this.fullScreenMode) {
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelCloseHandler, this);
+            const modelTodayButton = this.calendarElement.querySelector("button.e-today");
+            h2.classList.add("e-day-wrapper");
+            modelTodayButton.classList.add("e-outline");
+            modelHeader.appendChild(modelCloseIcon);
+            modelHeader.appendChild(modelTodayButton);
+        }
+        if (!this.fullScreenMode)
+            modelHeader.appendChild(yearHeading);
         h2.appendChild(daySpan);
         h2.appendChild(monthSpan);
         modelHeader.appendChild(h2);
         this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);
     }
+    modelCloseHandler(e) {
+        this.hide();
+    }
     changeTrigger(event) {
         if (this.inputElement.value !== this.previousElementValue) {
             if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -4204,7 +4271,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.trigger('navigated', this.navigatedArgs);
     }
     changeEvent(event) {
-        if (!this.isIconClicked) {
+        if (!this.isIconClicked && !this.isBlur) {
             this.selectCalendar(event);
         }
         if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -4775,7 +4842,7 @@ let DatePicker = class DatePicker extends Calendar {
     getModuleName() {
         return 'datepicker';
     }
-    disabledDates(isDynamic = false) {
+    disabledDates(isDynamic = false, isBlur = false) {
         let formatOptions;
         let globalize;
         const valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date(this.checkValue(this.value));
@@ -4830,7 +4897,7 @@ let DatePicker = class DatePicker extends Calendar {
             if (this.enableMask) {
                 this.updateInputValue(this.maskedDateValue);
                 this.notify('createMask', {
-                    module: 'MaskedDateTime'
+                    module: 'MaskedDateTime', isBlur: isBlur
                 });
             }
         }
@@ -5035,6 +5102,9 @@ __decorate$1([
 __decorate$1([
     Property(true)
 ], DatePicker.prototype, "enabled", void 0);
+__decorate$1([
+    Property(false)
+], DatePicker.prototype, "fullScreenMode", void 0);
 __decorate$1([
     Property({})
 ], DatePicker.prototype, "htmlAttributes", void 0);
@@ -5246,7 +5316,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
@@ -5286,7 +5358,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         /**
          * Mobile View
          */
-        this.isMobile = window.matchMedia('(max-width:550px)').matches;
+        this.isMobile = (Browser.isDevice && this.fullScreenMode) ? true : window.matchMedia('(max-width:550px)').matches;
         this.inputElement = this.element;
         this.angularTag = null;
         if (this.element.tagName === 'EJS-DATERANGEPICKER') {
@@ -5618,7 +5690,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     updateHiddenInput() {
         if (this.firstHiddenChild && this.secondHiddenChild) {
-            const format = { type: 'datetime', skeleton: 'yMd' };
+            const format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };
             if (typeof this.startDate === 'string') {
                 this.startDate = this.globalize.parseDate(this.startDate, format);
             }
@@ -6027,7 +6099,6 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
-        this.updateHiddenInput();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -7743,6 +7814,16 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     createControl() {
         const controlContainer = this.createElement('div', { className: RANGECONTAINER });
         const headerContainer = this.createElement('div', { className: RANGEHEADER });
+        if (this.isMobile && this.fullScreenMode) {
+            const modelHeaderIconWrapper = this.createElement("div", { className: "e-model-header-wrapper" });
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+            const modelApplyButton = this.createElement("span", { className: "e-apply" });
+            EventHandler.add(modelApplyButton, 'mousedown touchstart', this.applyFunction, this);
+            modelHeaderIconWrapper.appendChild(modelCloseIcon);
+            modelHeaderIconWrapper.appendChild(modelApplyButton);
+            headerContainer.appendChild(modelHeaderIconWrapper);
+        }
         const labelContainer = this.createRangeHeader();
         headerContainer.appendChild(labelContainer);
         const daySpan = this.createElement('div', { className: DAYSPAN });
@@ -7782,6 +7863,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         this.renderPopup();
     }
+    modelRangeCloseHandler(e) {
+        this.hide();
+    }
     cancelFunction(eve) {
         if (document.activeElement !== this.inputElement) {
             this.preventFocus = true;
@@ -7994,7 +8078,24 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);
             this.wireListEvents();
             if (this.isMobile) {
-                this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';
+                if (this.fullScreenMode) {
+                    const modelWrapper = createElement('div', { className: 'e-range-mob-popup-wrap' });
+                    const modelHeader = this.createElement('div', { className: 'e-model-header' });
+                    const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+                    modelTitleSpan.textContent = "Select Preset";
+                    const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+                    EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+                    const presetContent = this.presetElement;
+                    modelHeader.appendChild(modelCloseIcon);
+                    modelHeader.appendChild(modelTitleSpan);
+                    modelWrapper.appendChild(modelHeader);
+                    modelWrapper.appendChild(presetContent);
+                    this.popupWrapper.insertBefore(modelWrapper, this.popupWrapper.firstElementChild);
+                    this.presetElement.style.width = '100%';
+                }
+                else {
+                    this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';
+                }
             }
             if (!isNullOrUndefined(this.activeIndex) && this.activeIndex > -1) {
                 addClass([this.liCollections[this.activeIndex]], ACTIVE$1);
@@ -8043,6 +8144,15 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             enableRtl: this.enableRtl,
             zIndex: this.zIndex,
             open: () => {
+                if (this.isMobile && this.fullScreenMode) {
+                    this.iconRangeRight = this.calendarElement && window.getComputedStyle(this.calendarElement.querySelector('.e-header.e-month .e-prev')).cssFloat;
+                    if (this.iconRangeRight) {
+                        this.touchRangeModule = new Touch(this.calendarElement.querySelector(".e-content.e-month"), {
+                            swipe: this.dateRangeSwipeHandler.bind(this)
+                        });
+                        EventHandler.add(this.calendarElement.querySelector(".e-content.e-month"), "touchstart", this.touchStartRangeHandler, this);
+                    }
+                }
                 attributes(this.inputElement, { 'aria-expanded': 'true', 'aria-owns': this.inputElement.id + '_options' });
                 if (this.value) {
                     attributes(this.inputElement, { 'aria-activedescendant': this.inputElement.id });
@@ -8135,6 +8245,45 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
     }
+    dateRangeSwipeHandler(e) {
+        let direction = 0;
+        if (this.iconRangeRight == 'left') {
+            switch (e.swipeDirection) {
+                case "Left":
+                    direction = 1;
+                    break;
+                case "Right":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        else {
+            switch (e.swipeDirection) {
+                case "Up":
+                    direction = 1;
+                    break;
+                case "Down":
+                    direction = -1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (this.touchRangeStart) {
+            if (direction === 1) {
+                this.navigateNext(e);
+            }
+            else if (direction === -1) {
+                this.navigatePrevious(e);
+            }
+            this.touchRangeStart = false;
+        }
+    }
+    touchStartRangeHandler(e) {
+        this.touchRangeStart = true;
+    }
     popupCloseHandler(e) {
         switch (e.keyCode) {
             case 27:
@@ -8386,6 +8535,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
     }
     createInput() {
+        if (this.fullScreenMode && this.isMobile) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassValue = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -9475,6 +9627,9 @@ __decorate$2([
 __decorate$2([
     Property(false)
 ], DateRangePicker.prototype, "openOnFocus", void 0);
+__decorate$2([
+    Property(false)
+], DateRangePicker.prototype, "fullScreenMode", void 0);
 __decorate$2([
     Event()
 ], DateRangePicker.prototype, "created", void 0);
@@ -9881,6 +10036,9 @@ let TimePicker = class TimePicker extends Component {
         return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
     }
     createInputElement() {
+        if (this.fullScreenMode && Browser.isDevice) {
+            this.cssClass = "e-popup-expand";
+        }
         let updatedCssClassesValue = this.cssClass;
         const isBindClearAction = this.enableMask ? false : true;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
@@ -10127,7 +10285,26 @@ let TimePicker = class TimePicker extends Component {
         if (!Browser.isDevice) {
             this.popupObj.collision = { X: 'none', Y: 'flip' };
         }
-        this.popupObj.element.style.maxHeight = POPUPDIMENSION;
+        if (Browser.isDevice && this.fullScreenMode) {
+            this.popupObj.element.style.maxHeight = "100%";
+            this.popupObj.element.style.width = "100%";
+        }
+        else {
+            this.popupObj.element.style.maxHeight = POPUPDIMENSION;
+        }
+        if (Browser.isDevice && this.fullScreenMode) {
+            const modelHeader = this.createElement('div', { className: 'e-model-header' });
+            const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this);
+            modelHeader.appendChild(modelCloseIcon);
+            modelHeader.appendChild(modelTitleSpan);
+            this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);
+        }
+    }
+    timePopupCloseHandler(e) {
+        this.hide();
     }
     //util function
     getFormattedValue(value) {
@@ -10686,9 +10863,7 @@ let TimePicker = class TimePicker extends Component {
         if (this.isValidLI(li)) {
             this.checkValue(li.getAttribute('data-value'));
             if (this.enableMask) {
-                this.notify('createMask', {
-                    module: 'MaskedDateTime', navigated: true
-                });
+                this.createMask();
             }
             this.selectedElement = li;
             this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);
@@ -11369,7 +11544,7 @@ let TimePicker = class TimePicker extends Component {
         this.prevDate = this.valueWithMinutes = date;
         if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {
             this.setProperties({ value: date }, true);
-            if (this.enableMask) {
+            if (this.enableMask && this.value) {
                 this.createMask();
             }
         }
@@ -12007,6 +12182,9 @@ __decorate$3([
 __decorate$3([
     Property(true)
 ], TimePicker.prototype, "enabled", void 0);
+__decorate$3([
+    Property(false)
+], TimePicker.prototype, "fullScreenMode", void 0);
 __decorate$3([
     Property(false)
 ], TimePicker.prototype, "readonly", void 0);
@@ -12298,7 +12476,9 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 this.inputElement.tabIndex = -1;
             }
         }
-        Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        if (this.floatLabelType === 'Auto') {
+            Input.calculateWidth(this.inputElement, this.inputWrapper.container);
+        }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');
         }
@@ -12618,7 +12798,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 this.renderPopup();
                 this.setTimeScrollPosition();
                 this.openPopup(e);
-                this.popupObject.refreshPosition(this.inputElement);
+                if (!Browser.isDevice || (Browser.isDevice && !this.fullScreenMode)) {
+                    this.popupObject.refreshPosition(this.inputElement);
+                }
+                if (Browser.isDevice && this.fullScreenMode) {
+                    this.dateTimeWrapper.style.left = '0px';
+                }
             }
         }
     }
@@ -12722,7 +12907,31 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 }
             }
         });
-        this.popupObject.element.style.maxHeight = POPUPDIMENSION$1;
+        if (Browser.isDevice && this.fullScreenMode) {
+            this.popupObject.element.style.display = "flex";
+            this.popupObject.element.style.maxHeight = "100%";
+            this.popupObject.element.style.width = "100%";
+        }
+        else {
+            this.popupObject.element.style.maxHeight = POPUPDIMENSION$1;
+        }
+        if (Browser.isDevice && this.fullScreenMode) {
+            const modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });
+            const modelHeader = this.createElement('div', { className: 'e-model-header' });
+            const modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            const modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);
+            const timeContent = this.dateTimeWrapper.querySelector(".e-content");
+            modelHeader.appendChild(modelCloseIcon);
+            modelHeader.appendChild(modelTitleSpan);
+            modelWrapper.appendChild(modelHeader);
+            modelWrapper.appendChild(timeContent);
+            this.dateTimeWrapper.insertBefore(modelWrapper, this.dateTimeWrapper.firstElementChild);
+        }
+    }
+    dateTimeCloseHandler(e) {
+        this.hide();
     }
     setDimension(width) {
         if (typeof width === 'number') {
@@ -12778,7 +12987,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     getPopupHeight() {
         const height = parseInt(POPUPDIMENSION$1, 10);
         const popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;
-        return popupHeight > height ? height : popupHeight;
+        if (Browser.isDevice && this.fullScreenMode) {
+            return popupHeight;
+        }
+        else {
+            return popupHeight > height ? height : popupHeight;
+        }
     }
     changeEvent(e) {
         super.changeEvent(e);
@@ -12816,7 +13030,13 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         const height = nextElement ? nextElement.offsetTop : element.offsetTop;
         const lineHeight = element.getBoundingClientRect().height;
         if ((height + element.offsetTop) > listHeight) {
-            this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            if (Browser.isDevice && this.fullScreenMode) {
+                const listContent = this.dateTimeWrapper.querySelector('.e-content');
+                listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            }
+            else {
+                this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION$1 + lineHeight / HALFPOSITION$1)) : height;
+            }
         }
         else {
             this.dateTimeWrapper.scrollTop = 0;
@@ -13602,6 +13822,9 @@ __decorate$4([
 __decorate$4([
     Property(false)
 ], DateTimePicker.prototype, "strictMode", void 0);
+__decorate$4([
+    Property(false)
+], DateTimePicker.prototype, "fullScreenMode", void 0);
 __decorate$4([
     Property(null)
 ], DateTimePicker.prototype, "serverTimezoneOffset", void 0);
@@ -13705,6 +13928,7 @@ class MaskedDateTime {
         this.isComplete = false;
         this.isNavigate = false;
         this.navigated = false;
+        this.isBlur = false;
         this.formatRegex = /EEEEE|EEEE|EEE|EE|E|dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|HH|H|hh|h|mm|m|fff|ff|f|aa|a|ss|s|zzzz|zzz|zz|z|'[^']*'|'[^']*'/g;
         this.isDeletion = false;
         this.isShortYear = false;
@@ -13751,7 +13975,7 @@ class MaskedDateTime {
         this.parent.off('keyDownHandler', this.maskKeydownHandler);
         this.parent.off('clearHandler', this.clearHandler);
     }
-    createMask(navigated = false) {
+    createMask(mask) {
         this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;
         this.dateformat = this.getCulturedFormat();
         if (this.parent.maskPlaceholder.day) {
@@ -13784,7 +14008,8 @@ class MaskedDateTime {
         this.mask = this.previousValue = inputValue;
         this.parent.maskedDateValue = this.mask;
         if (this.parent.value) {
-            this.navigated = navigated;
+            this.navigated = true;
+            this.isBlur = mask.isBlur;
             this.setDynamicValue();
         }
     }
@@ -13797,7 +14022,12 @@ class MaskedDateTime {
         }
     }
     validCharacterCheck() {
-        const start = this.parent.inputElement.selectionStart;
+        let start = this.parent.inputElement.selectionStart;
+        if (this.parent.moduleName !== 'timepicker') {
+            if (start === this.hiddenMask.length && this.mask === this.parent.inputElement.value) {
+                start = 0;
+            }
+        }
         for (let i = start, j = start - 1; i < this.hiddenMask.length || j >= 0; i++, j--) {
             if (i < this.hiddenMask.length && this.validCharacters.indexOf(this.hiddenMask[i]) !== -1) {
                 this.setSelection(this.hiddenMask[i]);
@@ -13813,7 +14043,9 @@ class MaskedDateTime {
         this.maskDateValue = new Date(+this.parent.value);
         this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = true;
         this.updateValue();
-        this.validCharacterCheck();
+        if (!this.isBlur) {
+            this.validCharacterCheck();
+        }
     }
     setSelection(validChar) {
         let start = -1;
@@ -14325,7 +14557,7 @@ class MaskedDateTime {
     navigateSelection(isbackward) {
         const start = this.parent.inputElement.selectionStart;
         const end = this.parent.inputElement.selectionEnd;
-        let formatIndex = isbackward ? start - 1 : end + 1;
+        let formatIndex = isbackward ? start - 1 : end;
         this.navigated = true;
         while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {
             if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {