@syncfusion/ej2-calendars 21.2.9 → 22.1.34

package/src/datetimepicker/datetimepicker.d.ts

@@ -2,7 +2,7 @@
 import { EmitType } from '@syncfusion/ej2-base';
 import { L10n } from '@syncfusion/ej2-base';
 import { KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';
-import { ModuleDeclaration } from '@syncfusion/ej2-base';
+import { ModuleDeclaration, Touch } from '@syncfusion/ej2-base';
 import { ClearedEventArgs, CalendarType, CalendarView, DayHeaderFormats } from '../calendar/calendar';
 import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';
 import { DateTimePickerModel } from './datetimepicker-model';
@@ -52,6 +52,8 @@ export declare class DateTimePicker extends DatePicker {
     protected scrollInvoked: boolean;
     protected maskedDateValue: string;
     protected moduleName: string;
+    protected touchDTModule: Touch;
+    protected touchDTStart: boolean;
     /**
      * Specifies the format of the time value that to be displayed in time popup list.
      *
@@ -290,6 +292,12 @@ export declare class DateTimePicker extends DatePicker {
      * [`Strict Mode`](../../datetimepicker/strict-mode/) documentation.
      */
     strictMode: boolean;
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode: boolean;
     /**
      * By default, the date value will be processed based on system time zone.
      * If you want to process the initial date value using server time zone
@@ -534,6 +542,7 @@ export declare class DateTimePicker extends DatePicker {
     private isTimePopupOpen;
     private isDatePopupOpen;
     private renderPopup;
+    private dateTimeCloseHandler;
     private setDimension;
     private setPopupWidth;
     protected wireTimeListEvents(): void;

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.d.ts

@@ -27,6 +27,7 @@ export declare class MaskedDateTime {
     private previousDate;
     private isNavigate;
     private navigated;
+    private isBlur;
     private formatRegex;
     private isDeletion;
     private isShortYear;
@@ -67,4 +68,5 @@ export declare class MaskedDateTime {
 export interface events {
     module: string;
     e: KeyboardEventArgs;
+    isBlur: boolean;
 }

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

@@ -34,6 +34,7 @@ var MaskedDateTime = /** @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;
@@ -80,8 +81,7 @@ var MaskedDateTime = /** @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) {
@@ -114,7 +114,8 @@ var MaskedDateTime = /** @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();
         }
     };
@@ -128,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]);
@@ -143,7 +149,9 @@ var MaskedDateTime = /** @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;
@@ -656,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) {
@@ -1138,9 +1160,7 @@ var TimePicker = /** @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);
@@ -1822,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();
             }
         }
@@ -2462,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);