@syncfusion/ej2-calendars 21.2.9 → 22.1.34

package/dist/es6/ej2-calendars.es5.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';
@@ -1525,7 +1525,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     CalendarBase.prototype.navigatePrevious = function (e) {
-        e.preventDefault();
+        !Browser.isDevice && e.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.previous();
         }
@@ -1556,7 +1556,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     CalendarBase.prototype.navigateNext = function (eve) {
-        eve.preventDefault();
+        !Browser.isDevice && eve.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.next();
         }
@@ -3244,6 +3244,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         _this.isDynamicValueChanged = false;
         _this.moduleName = _this.getModuleName();
         _this.isFocused = false;
+        _this.isBlur = false;
         _this.datepickerOptions = options;
         return _this;
     }
@@ -3256,7 +3257,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     DatePicker.prototype.render = function () {
         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');
         }
@@ -3339,6 +3342,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             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";
+        }
         var updatedCssClassValues = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -3377,11 +3383,12 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
         addClass([this.inputWrapper.container], DATEWRAPPER);
     };
-    DatePicker.prototype.updateInput = function (isDynamic) {
+    DatePicker.prototype.updateInput = function (isDynamic, isBlur) {
         if (isDynamic === void 0) { isDynamic = false; }
+        if (isBlur === void 0) { isBlur = false; }
         var 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);
@@ -3864,7 +3871,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             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') {
@@ -4137,6 +4146,13 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             zIndex: this.zIndex,
             collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },
             open: function () {
+                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);
@@ -4178,6 +4194,45 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     };
+    DatePicker.prototype.CalendarSwipeHandler = function (e) {
+        var 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;
+        }
+    };
+    DatePicker.prototype.TouchStartHandler = function (e) {
+        this.touchStart = true;
+    };
     DatePicker.prototype.setAriaDisabled = function () {
         if (!this.enabled) {
             this.inputElement.setAttribute('aria-disabled', 'true');
@@ -4216,12 +4271,25 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };
         }
         monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);
-        modelHeader.appendChild(yearHeading);
+        if (this.fullScreenMode) {
+            var modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelCloseHandler, this);
+            var 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);
     };
+    DatePicker.prototype.modelCloseHandler = function (e) {
+        this.hide();
+    };
     DatePicker.prototype.changeTrigger = function (event) {
         if (this.inputElement.value !== this.previousElementValue) {
             if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -4248,7 +4316,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         this.trigger('navigated', this.navigatedArgs);
     };
     DatePicker.prototype.changeEvent = function (event) {
-        if (!this.isIconClicked) {
+        if (!this.isIconClicked && !this.isBlur) {
             this.selectCalendar(event);
         }
         if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
@@ -4822,8 +4890,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     DatePicker.prototype.getModuleName = function () {
         return 'datepicker';
     };
-    DatePicker.prototype.disabledDates = function (isDynamic) {
+    DatePicker.prototype.disabledDates = function (isDynamic, isBlur) {
         if (isDynamic === void 0) { isDynamic = false; }
+        if (isBlur === void 0) { isBlur = false; }
         var formatOptions;
         var globalize;
         var valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date(this.checkValue(this.value));
@@ -4878,7 +4947,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
             if (this.enableMask) {
                 this.updateInputValue(this.maskedDateValue);
                 this.notify('createMask', {
-                    module: 'MaskedDateTime'
+                    module: 'MaskedDateTime', isBlur: isBlur
                 });
             }
         }
@@ -5083,6 +5152,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -5316,7 +5388,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         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');
         }
@@ -5356,7 +5430,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         /**
          * 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') {
@@ -5692,7 +5766,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     };
     DateRangePicker.prototype.updateHiddenInput = function () {
         if (this.firstHiddenChild && this.secondHiddenChild) {
-            var format = { type: 'datetime', skeleton: 'yMd' };
+            var format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };
             if (typeof this.startDate === 'string') {
                 this.startDate = this.globalize.parseDate(this.startDate, format);
             }
@@ -6102,7 +6176,6 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
-        this.updateHiddenInput();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -7833,6 +7906,16 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     DateRangePicker.prototype.createControl = function () {
         var controlContainer = this.createElement('div', { className: RANGECONTAINER });
         var headerContainer = this.createElement('div', { className: RANGEHEADER });
+        if (this.isMobile && this.fullScreenMode) {
+            var modelHeaderIconWrapper = this.createElement("div", { className: "e-model-header-wrapper" });
+            var modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+            var modelApplyButton = this.createElement("span", { className: "e-apply" });
+            EventHandler.add(modelApplyButton, 'mousedown touchstart', this.applyFunction, this);
+            modelHeaderIconWrapper.appendChild(modelCloseIcon);
+            modelHeaderIconWrapper.appendChild(modelApplyButton);
+            headerContainer.appendChild(modelHeaderIconWrapper);
+        }
         var labelContainer = this.createRangeHeader();
         headerContainer.appendChild(labelContainer);
         var daySpan = this.createElement('div', { className: DAYSPAN });
@@ -7872,6 +7955,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    DateRangePicker.prototype.modelRangeCloseHandler = function (e) {
+        this.hide();
+    };
     DateRangePicker.prototype.cancelFunction = function (eve) {
         if (document.activeElement !== this.inputElement) {
             this.preventFocus = true;
@@ -8085,7 +8171,24 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);
             this.wireListEvents();
             if (this.isMobile) {
-                this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';
+                if (this.fullScreenMode) {
+                    var modelWrapper = createElement('div', { className: 'e-range-mob-popup-wrap' });
+                    var modelHeader = this.createElement('div', { className: 'e-model-header' });
+                    var modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+                    modelTitleSpan.textContent = "Select Preset";
+                    var modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+                    EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.modelRangeCloseHandler, this);
+                    var 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);
@@ -8135,6 +8238,15 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             enableRtl: this.enableRtl,
             zIndex: this.zIndex,
             open: function () {
+                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 });
@@ -8227,6 +8339,45 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
         EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
     };
+    DateRangePicker.prototype.dateRangeSwipeHandler = function (e) {
+        var 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;
+        }
+    };
+    DateRangePicker.prototype.touchStartRangeHandler = function (e) {
+        this.touchRangeStart = true;
+    };
     DateRangePicker.prototype.popupCloseHandler = function (e) {
         switch (e.keyCode) {
             case 27:
@@ -8478,6 +8629,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DateRangePicker.prototype.createInput = function () {
+        if (this.fullScreenMode && this.isMobile) {
+            this.cssClass = "e-popup-expand";
+        }
         var updatedCssClassValue = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
@@ -9569,6 +9723,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -9997,6 +10154,9 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
     };
     TimePicker.prototype.createInputElement = function () {
+        if (this.fullScreenMode && Browser.isDevice) {
+            this.cssClass = "e-popup-expand";
+        }
         var updatedCssClassesValue = this.cssClass;
         var isBindClearAction = this.enableMask ? false : true;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
@@ -10244,7 +10404,26 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         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) {
+            var modelHeader = this.createElement('div', { className: 'e-model-header' });
+            var modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            var 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);
+        }
+    };
+    TimePicker.prototype.timePopupCloseHandler = function (e) {
+        this.hide();
     };
     //util function
     TimePicker.prototype.getFormattedValue = function (value) {
@@ -10806,9 +10985,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         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);
@@ -11490,7 +11667,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         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();
             }
         }
@@ -12130,6 +12307,9 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -12438,7 +12618,9 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                 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');
         }
@@ -12759,7 +12941,12 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                 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';
+                }
             }
         }
     };
@@ -12865,7 +13052,31 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         });
-        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) {
+            var modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });
+            var modelHeader = this.createElement('div', { className: 'e-model-header' });
+            var modelTitleSpan = this.createElement("span", { className: "e-model-title" });
+            modelTitleSpan.textContent = "Select time";
+            var modelCloseIcon = this.createElement("span", { className: "e-popup-close" });
+            EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);
+            var 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);
+        }
+    };
+    DateTimePicker.prototype.dateTimeCloseHandler = function (e) {
+        this.hide();
     };
     DateTimePicker.prototype.setDimension = function (width) {
         if (typeof width === 'number') {
@@ -12921,7 +13132,12 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
     DateTimePicker.prototype.getPopupHeight = function () {
         var height = parseInt(POPUPDIMENSION$1, 10);
         var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;
-        return popupHeight > height ? height : popupHeight;
+        if (Browser.isDevice && this.fullScreenMode) {
+            return popupHeight;
+        }
+        else {
+            return popupHeight > height ? height : popupHeight;
+        }
     };
     DateTimePicker.prototype.changeEvent = function (e) {
         _super.prototype.changeEvent.call(this, e);
@@ -12959,7 +13175,13 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         var height = nextElement ? nextElement.offsetTop : element.offsetTop;
         var 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) {
+                var 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;
@@ -13747,6 +13969,9 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -13852,6 +14077,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         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;
@@ -13898,8 +14124,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         this.parent.off('keyDownHandler', this.maskKeydownHandler);
         this.parent.off('clearHandler', this.clearHandler);
     };
-    MaskedDateTime.prototype.createMask = function (navigated) {
-        if (navigated === void 0) { navigated = false; }
+    MaskedDateTime.prototype.createMask = function (mask) {
         this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;
         this.dateformat = this.getCulturedFormat();
         if (this.parent.maskPlaceholder.day) {
@@ -13932,7 +14157,8 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         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();
         }
     };
@@ -13946,6 +14172,11 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
     };
     MaskedDateTime.prototype.validCharacterCheck = function () {
         var start = this.parent.inputElement.selectionStart;
+        if (this.parent.moduleName !== 'timepicker') {
+            if (start === this.hiddenMask.length && this.mask === this.parent.inputElement.value) {
+                start = 0;
+            }
+        }
         for (var 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]);
@@ -13961,7 +14192,9 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         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();
+        }
     };
     MaskedDateTime.prototype.setSelection = function (validChar) {
         var start = -1;
@@ -14474,7 +14707,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
     MaskedDateTime.prototype.navigateSelection = function (isbackward) {
         var start = this.parent.inputElement.selectionStart;
         var end = this.parent.inputElement.selectionEnd;
-        var formatIndex = isbackward ? start - 1 : end + 1;
+        var formatIndex = isbackward ? start - 1 : end;
         this.navigated = true;
         while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {
             if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {