@syncfusion/ej2-calendars 21.2.10 → 22.1.34

package/src/datetimepicker/datetimepicker.js

@@ -228,7 +228,9 @@ var DateTimePicker = /** @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');
         }
@@ -549,7 +551,12 @@ var DateTimePicker = /** @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';
+                }
             }
         }
     };
@@ -655,7 +662,31 @@ var DateTimePicker = /** @class */ (function (_super) {
                 }
             }
         });
-        this.popupObject.element.style.maxHeight = POPUPDIMENSION;
+        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;
+        }
+        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') {
@@ -711,7 +742,12 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.getPopupHeight = function () {
         var height = parseInt(POPUPDIMENSION, 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);
@@ -749,7 +785,13 @@ var DateTimePicker = /** @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 + lineHeight / HALFPOSITION)) : height;
+            if (Browser.isDevice && this.fullScreenMode) {
+                var listContent = this.dateTimeWrapper.querySelector('.e-content');
+                listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;
+            }
+            else {
+                this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;
+            }
         }
         else {
             this.dateTimeWrapper.scrollTop = 0;
@@ -1537,6 +1579,9 @@ var DateTimePicker = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DateTimePicker.prototype, "strictMode", void 0);
+    __decorate([
+        Property(false)
+    ], DateTimePicker.prototype, "fullScreenMode", void 0);
     __decorate([
         Property(null)
     ], DateTimePicker.prototype, "serverTimezoneOffset", void 0);

package/src/maskbase/masked-date-time.js

@@ -129,6 +129,11 @@ var MaskedDateTime = /** @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]);
@@ -659,7 +664,7 @@ var MaskedDateTime = /** @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) {

package/src/timepicker/timepicker-model.d.ts

@@ -168,6 +168,13 @@ export interface TimePickerModel extends ComponentModel{
      */
     enabled?: boolean;
 
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode?: boolean;
+
     /**
      * Specifies the component in readonly state.
      *

package/src/timepicker/timepicker.d.ts

@@ -288,6 +288,12 @@ export declare class TimePicker extends Component<HTMLElement> implements IInput
      * @default true
      */
     enabled: boolean;
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode: boolean;
     /**
      * Specifies the component in readonly state.
      *
@@ -504,6 +510,7 @@ export declare class TimePicker extends Component<HTMLElement> implements IInput
     protected getPopupHeight(): number;
     private generateList;
     private renderPopup;
+    private timePopupCloseHandler;
     private getFormattedValue;
     private getDateObject;
     private updateHtmlAttributeToWrapper;

package/src/timepicker/timepicker.js

@@ -329,6 +329,9 @@ var TimePicker = /** @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 !== '') {
@@ -576,7 +579,26 @@ var TimePicker = /** @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) {
@@ -1820,7 +1842,7 @@ var TimePicker = /** @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();
             }
         }
@@ -2460,6 +2482,9 @@ var TimePicker = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], TimePicker.prototype, "enabled", void 0);
+    __decorate([
+        Property(false)
+    ], TimePicker.prototype, "fullScreenMode", void 0);
     __decorate([
         Property(false)
     ], TimePicker.prototype, "readonly", void 0);