@syncfusion/ej2-calendars 21.2.10 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.10
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@21.2.9",
+  "_id": "@syncfusion/ej2-calendars@18.30.17",
   "_inBundle": false,
-  "_integrity": "sha512-hEe0pY/d+LA4Nh3/iHYsKuOMc+H6WDWxjiiWapfTOYE3+FwoqRlWcb60IvVtmdvGFdYbAh+5EJENzvoF1PlBaA==",
+  "_integrity": "sha512-SnX9BTY2Swgg/KkCKCkXT2ceYIuvP7eWTB6qkKufoQODUbpGQ1FCQ39RddN5bgUgTHR7mmOR/Zr0qFONHkAFWQ==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-21.2.9.tgz",
-  "_shasum": "03c2e601ebb2ddbfbbfdb817755ad7a334c71907",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.30.17.tgz",
+  "_shasum": "bd1deeac1a021cf0417ca1a889cb9a2f4f485ec9",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-buttons": "~21.2.10",
-    "@syncfusion/ej2-inputs": "~21.2.9",
-    "@syncfusion/ej2-lists": "~21.2.9",
-    "@syncfusion/ej2-popups": "~21.2.10"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-buttons": "~22.1.34",
+    "@syncfusion/ej2-inputs": "~22.1.34",
+    "@syncfusion/ej2-lists": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34"
   },
   "deprecated": false,
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.10",
+  "version": "22.1.34",
   "sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';import { removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';import { getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';import { Property, Event, EmitType, isNullOrUndefined, throwError } from '@syncfusion/ej2-base';import { Islamic, IslamicDateArgs } from './index';
+import { Component, EventHandler, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, KeyboardEvents, L10n, SwipeEventArgs } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';import { removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';import { getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';import { Property, Event, EmitType, isNullOrUndefined, throwError } from '@syncfusion/ej2-base';import { Islamic, IslamicDateArgs } from './index';
 import {CalendarType,CalendarView,WeekRule,DayHeaderFormats,NavigatedEventArgs,RenderDayCellEventArgs,ChangedEventArgs} from "./calendar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/calendar/calendar.d.ts

@@ -1,5 +1,5 @@
 import { Component, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
-import { INotifyPropertyChanged, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
+import { INotifyPropertyChanged, KeyboardEvents, L10n, SwipeEventArgs } from '@syncfusion/ej2-base';
 import { KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';
 import { EmitType } from '@syncfusion/ej2-base';
 import { CalendarModel, CalendarBaseModel } from './calendar-model';
@@ -456,9 +456,9 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected getViewNumber(stringVal: string): number;
     protected navigateTitle(e?: Event): void;
     protected previous(): void;
-    protected navigatePrevious(e: MouseEvent | KeyboardEvent): void;
+    protected navigatePrevious(e: MouseEvent | KeyboardEvent | SwipeEventArgs): void;
     protected next(): void;
-    protected navigateNext(eve: MouseEvent | KeyboardEvent): void;
+    protected navigateNext(eve: MouseEvent | KeyboardEvent | SwipeEventArgs): void;
     /**
      * This method is used to navigate to the month/year/decade view of the Calendar.
      *
@@ -487,8 +487,8 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected setAriaActiveDescendant(): void;
     protected previousIconHandler(disabled: boolean): void;
     protected renderDayCellEvent(args: RenderDayCellEventArgs): void;
-    protected navigatedEvent(eve: MouseEvent | KeyboardEvent): void;
-    protected triggerNavigate(event: MouseEvent | KeyboardEvent): void;
+    protected navigatedEvent(eve: MouseEvent | KeyboardEvent | SwipeEventArgs): void;
+    protected triggerNavigate(event: MouseEvent | KeyboardEvent | SwipeEventArgs): void;
     protected nextIconHandler(disabled: boolean): void;
     protected compare(startDate: Date, endDate: Date, modifier: number): number;
     protected isMinMaxRange(date: Date): boolean;

package/src/calendar/calendar.js

@@ -1526,7 +1526,7 @@ var CalendarBase = /** @class */ (function (_super) {
         }
     };
     CalendarBase.prototype.navigatePrevious = function (e) {
-        e.preventDefault();
+        !Browser.isDevice && e.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.previous();
         }
@@ -1557,7 +1557,7 @@ var CalendarBase = /** @class */ (function (_super) {
         }
     };
     CalendarBase.prototype.navigateNext = function (eve) {
-        eve.preventDefault();
+        !Browser.isDevice && eve.preventDefault();
         if (this.calendarMode === 'Gregorian') {
             this.next();
         }

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

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Internationalization, NotifyPropertyChanges, DateFormatOptions } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, EmitType, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';import { detach, addClass, removeClass, closest, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue, getUniqueID, ModuleDeclaration } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { ChangedEventArgs, CalendarView, Calendar, BlurEventArgs, FocusEventArgs, ClearedEventArgs } from '../calendar/calendar';import { MaskPlaceholderModel } from '../common/maskplaceholder-model';
+import { EventHandler, Property, Internationalization, NotifyPropertyChanges, DateFormatOptions } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, EmitType, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';import { detach, addClass, removeClass, closest, attributes, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue, getUniqueID, ModuleDeclaration } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { ChangedEventArgs, CalendarView, Calendar, BlurEventArgs, FocusEventArgs, ClearedEventArgs } from '../calendar/calendar';import { MaskPlaceholderModel } from '../common/maskplaceholder-model';
 import {FormatObject,PopupObjectArgs,PreventableEventArgs} from "./datepicker";
 import {CalendarModel} from "../calendar/calendar-model";
 
@@ -60,6 +60,13 @@ export interface DatePickerModel extends CalendarModel{
      */
     enabled?: boolean;
 
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode?: boolean;
+
     /**
      * You can add the additional html attributes such as disabled, value etc., to the element.
      * If you configured both property and equivalent html attribute then the component considers the property value.

package/src/datepicker/datepicker.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../calendar/calendar-model.d.ts" />
 import { KeyboardEventArgs, EmitType, L10n } from '@syncfusion/ej2-base';
+import { Touch } from '@syncfusion/ej2-base';
 import { ModuleDeclaration } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
@@ -63,6 +64,9 @@ export declare class DatePicker extends Calendar implements IInput {
     protected isDynamicValueChanged: boolean;
     protected moduleName: string;
     protected isFocused: boolean;
+    protected touchModule: Touch;
+    protected touchStart: boolean;
+    protected iconRight: boolean;
     protected isBlur: boolean;
     /**
      * Specifies the width of the DatePicker component.
@@ -111,6 +115,12 @@ export declare class DatePicker extends Calendar implements IInput {
      * @default true
      */
     enabled: boolean;
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode: boolean;
     /**
      * You can add the additional html attributes such as disabled, value etc., to the element.
      * If you configured both property and equivalent html attribute then the component considers the property value.
@@ -431,8 +441,11 @@ export declare class DatePicker extends Calendar implements IInput {
     protected popupUpdate(): void;
     protected strictModeUpdate(): void;
     private createCalendar;
+    private CalendarSwipeHandler;
+    private TouchStartHandler;
     private setAriaDisabled;
     private modelHeader;
+    private modelCloseHandler;
     protected changeTrigger(event?: MouseEvent | KeyboardEvent): void;
     protected navigatedEvent(): void;
     protected changeEvent(event?: MouseEvent | KeyboardEvent | Event): void;

package/src/datepicker/datepicker.js

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference path='../calendar/calendar-model.d.ts'/>
 import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Animation, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';
-import { detach, addClass, removeClass, closest, attributes } from '@syncfusion/ej2-base';
+import { detach, addClass, removeClass, closest, attributes, Touch } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
@@ -98,7 +98,9 @@ var DatePicker = /** @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');
         }
@@ -181,6 +183,9 @@ var DatePicker = /** @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();
@@ -982,6 +987,13 @@ var DatePicker = /** @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);
@@ -1023,6 +1035,45 @@ var DatePicker = /** @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');
@@ -1061,12 +1112,25 @@ var DatePicker = /** @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()))) {
@@ -1929,6 +1993,9 @@ var DatePicker = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], DatePicker.prototype, "enabled", void 0);
+    __decorate([
+        Property(false)
+    ], DatePicker.prototype, "fullScreenMode", void 0);
     __decorate([
         Property({})
     ], DatePicker.prototype, "htmlAttributes", void 0);

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

@@ -1,4 +1,4 @@
-import { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, Event, EmitType, Browser, L10n, ChildProperty } from '@syncfusion/ej2-base';import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';import { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend } from '@syncfusion/ej2-base';import { CalendarView, CalendarBase, NavigatedEventArgs, RenderDayCellEventArgs, CalendarType } from '../calendar/calendar';import { Popup } from '@syncfusion/ej2-popups';import { Button } from '@syncfusion/ej2-buttons';import { BlurEventArgs, FocusEventArgs, ClearedEventArgs } from '../calendar/calendar';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase} from '@syncfusion/ej2-lists';
+import { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, Event, EmitType, Browser, L10n, ChildProperty } from '@syncfusion/ej2-base';import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';import { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { CalendarView, CalendarBase, NavigatedEventArgs, RenderDayCellEventArgs, CalendarType } from '../calendar/calendar';import { Popup } from '@syncfusion/ej2-popups';import { Button } from '@syncfusion/ej2-buttons';import { BlurEventArgs, FocusEventArgs, ClearedEventArgs } from '../calendar/calendar';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase} from '@syncfusion/ej2-lists';
 import {DateRange,RangeEventArgs,RangeFormatObject} from "./daterangepicker";
 import {CalendarBaseModel} from "../calendar/calendar-model";
 
@@ -103,6 +103,13 @@ export interface DateRangePickerModel extends CalendarBaseModel{
      */
     openOnFocus?: boolean;
 
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode?: boolean;
+
     /**
      * Triggers when Calendar is created.
      *

package/src/daterangepicker/daterangepicker.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../calendar/calendar-model.d.ts" />
 import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';
+import { Touch } from '@syncfusion/ej2-base';
 import { CalendarView, CalendarBase, NavigatedEventArgs, RenderDayCellEventArgs, CalendarType } from '../calendar/calendar';
 import { Popup } from '@syncfusion/ej2-popups';
 import { BlurEventArgs, FocusEventArgs, ClearedEventArgs } from '../calendar/calendar';
@@ -169,6 +170,9 @@ export declare class DateRangePicker extends CalendarBase {
     private mobileRangePopupWrap;
     protected isAngular: boolean;
     protected preventChange: boolean;
+    protected touchRangeModule: Touch;
+    protected touchRangeStart: boolean;
+    protected iconRangeRight: string;
     /**
      * Gets or sets the start and end date of the Calendar.
      * {% codeBlock src='daterangepicker/value/index.md' %}{% endcodeBlock %}
@@ -234,6 +238,12 @@ export declare class DateRangePicker extends CalendarBase {
      * @default false
      */
     openOnFocus: boolean;
+    /**
+     * Specifies the component popup display full screen in mobile devices.
+     *
+     * @default false
+     */
+    fullScreenMode: boolean;
     /**
      * Triggers when Calendar is created.
      *
@@ -702,6 +712,7 @@ export declare class DateRangePicker extends CalendarBase {
     protected getCalendarView(view: string): CalendarView;
     protected navigatedEvent(e: MouseEvent): void;
     private createControl;
+    private modelRangeCloseHandler;
     private cancelFunction;
     private deviceHeaderUpdate;
     private applyFunction;
@@ -719,6 +730,8 @@ export declare class DateRangePicker extends CalendarBase {
     private wireListEvents;
     private unWireListEvents;
     private renderPopup;
+    private dateRangeSwipeHandler;
+    private touchStartRangeHandler;
     protected popupCloseHandler(e: KeyboardEventArgs): void;
     private calendarFocus;
     private presetHeight;

package/src/daterangepicker/daterangepicker.js

@@ -22,7 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Event, Browser, L10n, ChildProperty } from '@syncfusion/ej2-base';
 import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend, Touch } from '@syncfusion/ej2-base';
 import { CalendarBase } from '../calendar/calendar';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -165,7 +165,9 @@ var DateRangePicker = /** @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');
         }
@@ -205,7 +207,7 @@ var DateRangePicker = /** @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') {
@@ -541,7 +543,7 @@ var DateRangePicker = /** @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);
             }
@@ -951,7 +953,6 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.trigger('focus', focusArguments);
         }
         this.updateClearIconState();
-        this.updateHiddenInput();
         if (this.openOnFocus && !this.preventFocus) {
             this.preventFocus = true;
             this.show();
@@ -2682,6 +2683,16 @@ var DateRangePicker = /** @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 });
@@ -2721,6 +2732,9 @@ var DateRangePicker = /** @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;
@@ -2934,7 +2948,24 @@ var DateRangePicker = /** @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);
@@ -2984,6 +3015,15 @@ var DateRangePicker = /** @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 });
@@ -3076,6 +3116,45 @@ var DateRangePicker = /** @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:
@@ -3327,6 +3406,9 @@ var DateRangePicker = /** @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();
@@ -4418,6 +4500,9 @@ var DateRangePicker = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DateRangePicker.prototype, "openOnFocus", void 0);
+    __decorate([
+        Property(false)
+    ], DateRangePicker.prototype, "fullScreenMode", void 0);
     __decorate([
         Event()
     ], DateRangePicker.prototype, "created", void 0);

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

@@ -1,4 +1,4 @@
-import { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser, RippleOptions } from '@syncfusion/ej2-base';import { Animation, EmitType, Event, AnimationModel, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';import { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';import { ModuleDeclaration, extend } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input } from '@syncfusion/ej2-inputs';import { BlurEventArgs, ClearedEventArgs, CalendarType, CalendarView, DayHeaderFormats } from '../calendar/calendar';import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';import { TimePickerBase } from '../timepicker/timepicker';import {MaskPlaceholderModel} from '../common/maskplaceholder-model';
+import { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser, RippleOptions } from '@syncfusion/ej2-base';import { Animation, EmitType, Event, AnimationModel, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';import { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';import { ModuleDeclaration, extend, Touch, SwipeEventArgs } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input } from '@syncfusion/ej2-inputs';import { BlurEventArgs, ClearedEventArgs, CalendarType, CalendarView, DayHeaderFormats } from '../calendar/calendar';import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';import { TimePickerBase } from '../timepicker/timepicker';import {MaskPlaceholderModel} from '../common/maskplaceholder-model';
 import {DatePickerModel} from "../datepicker/datepicker-model";
 
 /**
@@ -254,6 +254,13 @@ export interface DateTimePickerModel extends DatePickerModel{
      */
     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

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;