@syncfusion/ej2-calendars 20.2.45 → 20.2.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.45
+*  version : 20.2.50
 *  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@20.2.40",
+  "_id": "@syncfusion/ej2-calendars@20.2.46",
   "_inBundle": false,
-  "_integrity": "sha512-YQI158Ua9My8CuQw3U0/vE1Z3pVjDfdGJUEoGhjVRPLCj5gLF/g79LAjk15tVUwokIvFu5U+5AHJHmfhnEMq0Q==",
+  "_integrity": "sha512-P79N0+ovKdSyWvqQt39rUzhOf2MuGpS5CyFHNn4+ui8K5QY1ld38MdQKBfAMqlq+esyHrgnq/smaw0ef7Fde9g==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.2.40.tgz",
-  "_shasum": "f091606efa7fb03d7527d1e92047f06a209757e7",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.2.46.tgz",
+  "_shasum": "019e69e0c54925b505f9b888952d4afc033a7567",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.45",
-    "@syncfusion/ej2-buttons": "~20.2.45",
-    "@syncfusion/ej2-inputs": "~20.2.45",
-    "@syncfusion/ej2-lists": "~20.2.45",
-    "@syncfusion/ej2-popups": "~20.2.45"
+    "@syncfusion/ej2-base": "~20.2.48",
+    "@syncfusion/ej2-buttons": "~20.2.46",
+    "@syncfusion/ej2-inputs": "~20.2.48",
+    "@syncfusion/ej2-lists": "~20.2.46",
+    "@syncfusion/ej2-popups": "~20.2.49"
   },
   "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": "20.2.45",
+  "version": "20.2.50",
   "sideEffects": false
 }

package/src/calendar/calendar.d.ts

@@ -62,6 +62,7 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected todayButtonEvent: MouseEvent | KeyboardEvent;
     protected preventChange: boolean;
     protected isAngular: boolean;
+    protected previousDates: boolean;
     /**
      * Gets or sets the minimum date that can be selected in the Calendar.
      *
@@ -387,7 +388,7 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected preRender(value?: Date): void;
     protected minMaxDate(localDate: Date): Date;
     protected renderMonths(e?: Event, value?: Date, isCustomDate?: boolean): void;
-    protected renderDays(currentDate: Date, value?: Date, multiSelection?: boolean, values?: Date[], isTodayDate?: boolean): HTMLElement[];
+    protected renderDays(currentDate: Date, value?: Date, multiSelection?: boolean, values?: Date[], isTodayDate?: boolean, e?: Event): HTMLElement[];
     protected updateFocus(otherMonth: boolean, disabled: boolean, localDate: Date, tableElement: HTMLElement, currentDate: Date): void;
     protected renderYears(e?: Event, value?: Date): void;
     protected renderDecades(e?: Event, value?: Date): void;
@@ -587,7 +588,7 @@ export declare class Calendar extends CalendarBase {
     createContent(): void;
     protected minMaxDate(localDate: Date): Date;
     protected renderMonths(e?: Event, value?: Date, isCustomDate?: boolean): void;
-    protected renderDays(currentDate: Date, value?: Date, isMultiSelect?: boolean, values?: Date[], isCustomDate?: boolean): HTMLElement[];
+    protected renderDays(currentDate: Date, value?: Date, isMultiSelect?: boolean, values?: Date[], isCustomDate?: boolean, e?: Event): HTMLElement[];
     protected renderYears(e?: Event): void;
     protected renderDecades(e?: Event): void;
     protected renderTemplate(elements: HTMLElement[], count: number, classNm: string, e?: Event): void;

package/src/calendar/calendar.js

@@ -84,6 +84,7 @@ var CalendarBase = /** @class */ (function (_super) {
         _this.isTodayClicked = false;
         _this.preventChange = false;
         _this.isAngular = false;
+        _this.previousDates = false;
         return _this;
     }
     /**
@@ -652,7 +653,7 @@ var CalendarBase = /** @class */ (function (_super) {
         var numCells = this.weekNumber ? 8 : 7;
         var tdEles;
         if (this.calendarMode === 'Gregorian') {
-            tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate);
+            tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate, e);
         }
         else {
             tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);
@@ -665,7 +666,7 @@ var CalendarBase = /** @class */ (function (_super) {
             this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);
         }
     };
-    CalendarBase.prototype.renderDays = function (currentDate, value, multiSelection, values, isTodayDate) {
+    CalendarBase.prototype.renderDays = function (currentDate, value, multiSelection, values, isTodayDate, e) {
         var tdEles = [];
         var cellsCount = 42;
         var todayDate = isTodayDate ? new Date(+currentDate) : this.getDate(new Date(), this.timezone);
@@ -756,6 +757,10 @@ var CalendarBase = /** @class */ (function (_super) {
             // if (args.isDisabled && +this.value === +args.date) {
             //     this.setProperties({ value: null }, true);
             // }
+            var currentTarget = void 0;
+            if (!isNullOrUndefined(e) && e.type == 'click') {
+                currentTarget = e.currentTarget;
+            }
             if (multiSelection && !isNullOrUndefined(values) && !disabledCls) {
                 for (var tempValue = 0; tempValue < values.length; tempValue++) {
                     var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
@@ -766,6 +771,22 @@ var CalendarBase = /** @class */ (function (_super) {
                         || (this.getDateVal(localDate, value))) {
                         addClass([tdEle], SELECTED);
                     }
+                    if (!isNullOrUndefined(currentTarget) && currentTarget.innerText === tdEle.innerText && this.previousDates && currentTarget.classList.contains(SELECTED)) {
+                        removeClass([tdEle], SELECTED);
+                        this.previousDates = false;
+                        var copyValues = this.copyValues(values);
+                        for (var i = 0; i < copyValues.length; i++) {
+                            var type_1 = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
+                            var formatOptions_1 = { format: null, type: 'date', skeleton: 'short', calendar: type_1 };
+                            var localDateString_1 = this.globalize.formatDate(date, formatOptions_1);
+                            var tempDateString_1 = this.globalize.formatDate(copyValues[i], formatOptions_1);
+                            if (localDateString_1 === tempDateString_1) {
+                                var index = copyValues.indexOf(copyValues[i]);
+                                copyValues.splice(index, 1);
+                            }
+                        }
+                        this.setProperties({ values: copyValues }, true);
+                    }
                     else {
                         this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
                     }
@@ -2209,8 +2230,8 @@ var Calendar = /** @class */ (function (_super) {
     Calendar.prototype.renderMonths = function (e, value, isCustomDate) {
         _super.prototype.renderMonths.call(this, e, this.value, isCustomDate);
     };
-    Calendar.prototype.renderDays = function (currentDate, value, isMultiSelect, values, isCustomDate) {
-        var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate);
+    Calendar.prototype.renderDays = function (currentDate, value, isMultiSelect, values, isCustomDate, e) {
+        var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate, e);
         if (this.isMultiSelection) {
             _super.prototype.validateValues.call(this, this.isMultiSelection, this.values);
         }
@@ -2248,9 +2269,14 @@ var Calendar = /** @class */ (function (_super) {
         if (eve.classList.contains(OTHERMONTH)) {
             if (this.isMultiSelection) {
                 var copyValues = this.copyValues(this.values);
-                copyValues.push(this.getIdValue(e, null));
-                this.setProperties({ values: copyValues }, true);
-                this.setProperties({ value: this.values[this.values.length - 1] }, true);
+                if (copyValues.toString().indexOf(this.getIdValue(e, null).toString()) === -1) {
+                    copyValues.push(this.getIdValue(e, null));
+                    this.setProperties({ values: copyValues }, true);
+                    this.setProperties({ value: this.values[this.values.length - 1] }, true);
+                }
+                else {
+                    this.previousDates = true;
+                }
             }
             else {
                 this.setProperties({ value: this.getIdValue(e, null) }, true);
@@ -2523,7 +2549,7 @@ var Calendar = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.value)) {
             this.setProperties({ value: this.value }, true);
         }
-        if (!this.isMultiSelection && +this.value !== Number.NaN && (+this.value !== +this.previousDate || this.previousDate == null
+        if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) && !isNullOrUndefined(this.previousDate) && +new Date(this.value.toDateString()) !== +new Date(this.previousDate.toDateString()) || this.previousDate == null
             && !isNaN(+this.value))) {
             this.changeEvent(e);
         }

package/src/datepicker/datepicker.js

@@ -98,6 +98,10 @@ var DatePicker = /** @class */ (function (_super) {
     DatePicker.prototype.render = function () {
         this.initialize();
         this.bindEvents();
+        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');
+        }
         this.renderComplete();
         this.setTimeZone(this.serverTimezoneOffset);
     };
@@ -718,7 +722,7 @@ var DatePicker = /** @class */ (function (_super) {
         this.isPopupClicked = false;
     };
     DatePicker.prototype.documentHandler = function (e) {
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) ||
+        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {
             e.preventDefault();
         }
@@ -1822,11 +1826,18 @@ var DatePicker = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    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');
+                    }
                     break;
                 case 'floatLabelType':
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'enableMask':
                     if (this.enableMask) {

package/src/daterangepicker/daterangepicker.js

@@ -165,6 +165,10 @@ 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 (!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');
+        }
         this.renderComplete();
     };
     /**
@@ -3264,7 +3268,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var target = e.target;
         if (!this.inputWrapper.container.contains(target) ||
-            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]'))) {
+            (!isNullOrUndefined(this.popupObj) && !closest(target, '[id="' + this.popupWrapper.id + '"]') && e.type === 'mousedown')) {
             if (e.type !== 'touchstart' && ((e.type === 'mousedown') ||
                 this.closeEventArgs && !this.closeEventArgs.cancel)) {
                 e.preventDefault();
@@ -4103,6 +4107,10 @@ var DateRangePicker = /** @class */ (function (_super) {
             switch (prop) {
                 case 'width':
                     this.setEleWidth(this.width);
+                    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');
+                    }
                     break;
                 case 'separator':
                     this.previousEleValue = this.inputElement.value;
@@ -4294,6 +4302,9 @@ var DateRangePicker = /** @class */ (function (_super) {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'start':
                     this.setProperties({ start: newProp.start }, true);

package/src/datetimepicker/datetimepicker.js

@@ -219,6 +219,10 @@ var DateTimePicker = /** @class */ (function (_super) {
                 this.inputElement.tabIndex = -1;
             }
         }
+        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');
+        }
         this.renderComplete();
     };
     DateTimePicker.prototype.setValue = function () {
@@ -571,7 +575,7 @@ var DateTimePicker = /** @class */ (function (_super) {
     };
     DateTimePicker.prototype.documentClickHandler = function (event) {
         var target = event.target;
-        if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||
+        if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
             (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
@@ -1409,6 +1413,10 @@ var DateTimePicker = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    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');
+                    }
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement);
@@ -1417,6 +1425,9 @@ var DateTimePicker = /** @class */ (function (_super) {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'scrollTo':
                     if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {

package/src/timepicker/timepicker.js

@@ -197,6 +197,9 @@ var TimePicker = /** @class */ (function (_super) {
         this.anchor = this.inputElement;
         this.inputElement.setAttribute('value', this.inputElement.value);
         this.inputEleValue = this.getDateObject(this.inputElement.value);
+        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');
+        }
         this.renderComplete();
     };
     TimePicker.prototype.setTimeAllowEdit = function () {
@@ -1932,7 +1935,7 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.documentClickHandler = function (event) {
         var target = event.target;
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) ||
+        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {
             event.preventDefault();
         }
@@ -2308,6 +2311,10 @@ var TimePicker = /** @class */ (function (_super) {
                 case 'width':
                     setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });
                     this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
+                    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');
+                    }
                     break;
                 case 'format':
                     this.setProperties({ format: newProp.format }, true);
@@ -2358,6 +2365,9 @@ var TimePicker = /** @class */ (function (_super) {
                     this.floatLabelType = newProp.floatLabelType;
                     Input.removeFloating(this.inputWrapper);
                     Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
+                    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');
+                    }
                     break;
                 case 'strictMode':
                     this.invalidValueString = null;

package/styles/bootstrap-dark.css

@@ -1144,6 +1144,10 @@ ejs-calendar {
   top: 0 !important;
   left: 0 !important;
 }
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
+  min-width: 100%;
+  min-height: 100%;
+}
 
 .e-content-placeholder.e-datepicker.e-placeholder-datepicker {
   background-size: 250px 33px;
@@ -1156,6 +1160,40 @@ ejs-calendar {
   min-height: 40px;
 }
 
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header {
+  height: 15%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
+  float: right;
+  margin-right: 10px;
+  padding: 5px;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close::before {
+  content: "\e932";
+  font-family: "e-icons";
+  color: rgb(255, 255, 255);
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar {
+  min-width: 100%;
+  min-height: 100%;
+  height: 100%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month {
+  height: 10%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container {
+  height: 85%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-footer-container {
+  height: 10%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month {
+  height: 80%;
+}
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month table {
+  height: 100%;
+}
+
 @media screen and (orientation: landscape) and (max-height: 360px) {
   .e-datepicker .e-calendar.e-device .e-month table tbody {
     display: inline-block;
@@ -1163,6 +1201,47 @@ ejs-calendar {
     overflow: auto;
   }
 }
+@media screen and (orientation: landscape) {
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header {
+    float: left;
+    height: 100%;
+    width: 30%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
+    float: left;
+    padding: 5px;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-model-year {
+    font-size: 35px;
+    margin-top: 35%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
+    display: block;
+    font-size: 40px;
+    margin-top: 10%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-header.e-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-footer-container {
+    height: 10%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month {
+    height: 75%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar {
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container {
+    float: right;
+    height: 90%;
+    width: 70%;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar.e-device .e-month table tbody {
+    display: table-row-group;
+  }
+  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-month table, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-decade table, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-content.e-year table {
+    height: 100%;
+  }
+}
 .e-datepicker.e-popup-wrapper,
 .e-bigger.e-small .e-datepicker.e-popup-wrapper,
 .e-bigger .e-datepicker.e-popup-wrapper,
@@ -1813,6 +1892,12 @@ ejs-calendar {
   top: 0 !important;
   left: 0 !important;
 }
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand.e-control.e-lib.e-device.e-popup-open {
+  min-height: 100%;
+  min-width: 100%;
+  height: 100%;
+  width: 100%;
+}
 
 .e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker {
   background-size: 250px 33px;
@@ -1825,6 +1910,111 @@ ejs-calendar {
   min-height: 40px;
 }
 
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar,
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container {
+  min-height: 100%;
+  min-width: 100%;
+  height: 100%;
+  width: 100%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder {
+  height: 100%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
+  height: 78%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month {
+  height: 90%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-header,
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-header {
+  height: 10%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-separator {
+  margin: 0;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month {
+  height: 90%;
+}
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month table {
+  height: 100%;
+  border-spacing: 0px 30px;
+}
+
+@media screen and (orientation: landscape) {
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-header {
+    float: left;
+    height: 100%;
+    border-right: 1.5px;
+    border-color: black;
+    width: 40%;
+    margin: 0;
+    display: block;
+    background-color: #3f51b5;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder {
+    height: 100%;
+    width: 100%;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-start-end {
+    display: block;
+    width: 100%;
+    text-align: -webkit-center;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-header .e-start-end .e-start-btn {
+    display: block;
+    width: 100%;
+    text-align: -webkit-center;
+    margin-top: 20%;
+    font-size: 20px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-header .e-day-span {
+    font-size: 20px;
+    margin-top: 60%;
+    color: #fff;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-header .e-start-end .e-end-btn {
+    width: 100%;
+    text-align: -webkit-center;
+    margin-top: 20%;
+    font-size: 20px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-container {
+    height: 82%;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month {
+    height: 80%;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month table {
+    border-spacing: unset;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-header {
+    height: 20%;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder {
+    width: 100%;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container {
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar .e-end-date.e-selected.e-range-hover {
+    border-radius: 0 40% 40% 0;
+  }
+  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar .e-end-date.e-selected.e-range-hover {
+    border-radius: 0 40% 40% 0;
+  }
+}
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
+  width: calc(100% - 80px);
+}
+
+.e-outline.e-float-input.e-static-clear.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
+  width: calc(100% - 110px);
+}
+
 /*! daterangepicker theme */
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: #f0f0f0;