@syncfusion/ej2-calendars 23.2.6 → 24.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.6
+*  version : 24.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.2.4",
+  "_id": "@syncfusion/ej2-calendars@18.32.2",
   "_inBundle": false,
-  "_integrity": "sha512-IoA8w/ftQROQfFPiaxnH1nR5QIdX0HQYdzRGZQoK5pn8fLy0g13wa9vglRCnUrXsHwr2+JKR+kf5mToEYV/C1w==",
+  "_integrity": "sha512-U2dC95e+gsF0zCd8VVJCsnHHozjtljby/RpYpVh8Wfes8aFQ+v523JhDOZ7I6gqEtpeoApb5OT/yBLjpTSey7Q==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -31,10 +31,10 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-23.2.4.tgz",
-  "_shasum": "ace505e5174cdf9e846854ddf24b9f6d2378c22c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.32.2.tgz",
+  "_shasum": "cea42534d623c526f5f7542b74562686a77163e5",
   "_spec": "@syncfusion/ej2-calendars@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -43,11 +43,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.6",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-popups": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-lists": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41"
   },
   "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.",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.6",
+  "version": "24.1.41",
   "sideEffects": false
 }

package/src/calendar/calendar.js

@@ -319,7 +319,7 @@ var CalendarBase = /** @class */ (function (_super) {
         }
         this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER });
         if (this.weekNumber) {
-            html += '<th class="e-week-number"></th>';
+            html += '<th class="e-week-number" aria-hidden="true"></th>';
             if (this.getModuleName() === 'calendar') {
                 addClass([this.element], '' + WEEKNUMBER);
             }
@@ -718,6 +718,7 @@ var CalendarBase = /** @class */ (function (_super) {
             }
             if (currentMonth !== localDate.getMonth()) {
                 addClass([tdEle], OTHERMONTH);
+                dayLink.setAttribute('aria-disabled', 'true');
             }
             if (localDate.getDay() === 0 || localDate.getDay() === 6) {
                 addClass([tdEle], WEEKEND);
@@ -753,6 +754,7 @@ var CalendarBase = /** @class */ (function (_super) {
             if (this.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {
                 addClass([tdEle], DISABLED);
                 addClass([tdEle], OVERLAY);
+                dayLink.setAttribute('aria-disabled', 'true');
                 if (+this.renderDayCellArgs.date === +this.todayDate) {
                     this.todayDisabled = true;
                 }
@@ -914,6 +916,7 @@ var CalendarBase = /** @class */ (function (_super) {
             });
             if ((year < startFullYr) || (year > endFullYr)) {
                 addClass([tdEle], OTHERDECADE);
+                dayLink.setAttribute('aria-disabled', 'true');
                 if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
                     addClass([tdEle], SELECTED);
                 }

package/src/datepicker/datepicker.js

@@ -972,7 +972,9 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.createCalendar = function () {
         var _this = this;
-        this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });
+        this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER, id: this.inputElement.id + '_options' });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
@@ -1816,6 +1818,7 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.isCalendar()) {
             Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
             attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
+            attributes(this.inputElement, { 'aria-controls': this.inputElement.id });
             if (this.value) {
                 attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
             }
@@ -1823,6 +1826,7 @@ var DatePicker = /** @class */ (function (_super) {
         else {
             Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
             this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-controls');
             this.inputElement.removeAttribute('aria-activedescendant');
         }
     };
@@ -1919,8 +1923,10 @@ var DatePicker = /** @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.placeholder, this.inputElement);
+                    if (this.datepickerOptions && this.datepickerOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.placeholder, this.inputElement);
+                    }
                     this.updateInput();
                     if (this.enableMask) {
                         this.notify('createMask', {

package/src/daterangepicker/daterangepicker.js

@@ -793,6 +793,8 @@ var DateRangePicker = /** @class */ (function (_super) {
             }
         }
         this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         this.adjustLongHeaderWidth();
         var isPreset = (!this.isCustomRange || this.isMobile);
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {
@@ -981,8 +983,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                 if (range.length > 1) {
                     this.invalidValueString = null;
                     var dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
-                    var start = new Date(range[0]);
-                    var end = new Date(range[1]);
+                    var start = this.globalize.parseDate(range[0], dateOptions);
+                    var end = this.globalize.parseDate(range[1], dateOptions);
                     var startDate = this.getStartEndDate(start, false, range, dateOptions);
                     var endDate = this.getStartEndDate(end, true, range, dateOptions);
                     if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
@@ -2946,7 +2948,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });
             var listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);
-            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
+            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0', 'aria-label': 'daterangepicker-preset' });
             this.presetElement.appendChild(listTag);
             this.popupWrapper.appendChild(this.presetElement);
             var customElement = this.presetElement.querySelector('#custom_range');
@@ -3033,7 +3035,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                         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' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id, 'aria-controls': _this.inputElement.id });
                 if (_this.value) {
                     attributes(_this.inputElement, { 'aria-activedescendant': _this.inputElement.id });
                 }
@@ -3088,6 +3090,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             close: function () {
                 attributes(_this.inputElement, { 'aria-expanded': 'false' });
                 _this.inputElement.removeAttribute('aria-owns');
+                _this.inputElement.removeAttribute('aria-controls');
                 _this.inputElement.removeAttribute('aria-activedescendant');
                 removeClass([_this.inputWrapper.buttons[0]], ACTIVE);
                 if (_this.isRangeIconClicked) {
@@ -3108,7 +3111,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 }
             }, targetExitViewport: function () {
                 var popupEle = _this.popupObj && _this.popupObj.element;
-                if (!Browser.isDevice && popupEle && popupEle.getBoundingClientRect().height < popupEle.parentElement.getBoundingClientRect().height) {
+                if (!Browser.isDevice && popupEle && popupEle.getBoundingClientRect().height < window.innerHeight) {
                     _this.hide();
                 }
             }
@@ -3441,10 +3444,10 @@ var DateRangePicker = /** @class */ (function (_super) {
             'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         });
-        Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
-        if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {
-            Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);
-        }
+        Input.addAttributes({ 'aria-label': 'select', 'role': 'button' }, this.inputWrapper.buttons[0]);
+        // if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {
+        //     Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);
+        // }
         this.setEleWidth(this.width);
         addClass([this.inputWrapper.container], DATERANGEWRAPPER);
         if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {
@@ -4172,8 +4175,10 @@ var DateRangePicker = /** @class */ (function (_super) {
     DateRangePicker.prototype.setLocale = function () {
         this.globalize = new Internationalization(this.locale);
         this.l10n.setLocale(this.locale);
-        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-        Input.setPlaceholder(this.placeholder, this.inputElement);
+        if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {
+            this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+            Input.setPlaceholder(this.placeholder, this.inputElement);
+        }
         this.updateInput();
         this.updateHiddenInput();
         this.changeTrigger();
@@ -4330,8 +4335,10 @@ var DateRangePicker = /** @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.placeholder, this.inputElement);
+                    if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.placeholder, this.inputElement);
+                    }
                     this.setLocale();
                     break;
                 case 'htmlAttributes':

package/src/datetimepicker/datetimepicker.d.ts

@@ -54,6 +54,8 @@ export declare class DateTimePicker extends DatePicker {
     protected moduleName: string;
     protected touchDTModule: Touch;
     protected touchDTStart: boolean;
+    private formatRegex;
+    private dateFormatString;
     /**
      * Specifies the format of the time value that to be displayed in time popup list.
      *
@@ -571,6 +573,7 @@ export declare class DateTimePicker extends DatePicker {
     protected isValidLI(li: Element | HTMLElement): boolean;
     private calculateStartEnd;
     private startTime;
+    private TimePopupFormat;
     private endTime;
     hide(e?: KeyboardEvent | MouseEvent | Event): void;
     private dateTimeCloseEventCallback;

package/src/datetimepicker/datetimepicker.js

@@ -85,6 +85,8 @@ var DateTimePicker = /** @class */ (function (_super) {
         _this.valueWithMinutes = null;
         _this.scrollInvoked = false;
         _this.moduleName = _this.getModuleName();
+        _this.formatRegex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|'[^']*'|'[^']*'/g;
+        _this.dateFormatString = '';
         _this.dateTimeOptions = options;
         return _this;
     }
@@ -504,8 +506,9 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.listCreation = function () {
         var dateObject;
         if (this.calendarMode === 'Gregorian') {
+            this.cldrDateTimeFormat().replace(this.formatRegex, this.TimePopupFormat());
             dateObject = this.globalize.parseDate(this.inputElement.value, {
-                format: this.cldrDateTimeFormat(), type: 'datetime'
+                format: this.dateFormatString, type: 'datetime'
             });
         }
         else {
@@ -536,7 +539,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         if (type === 'date') {
             if (!this.readonly && this.popupWrapper) {
                 addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);
-                attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });
+                attributes(this.popupWrapper, { 'id': this.element.id + '_options' });
             }
         }
         else {
@@ -595,6 +598,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 addClass([_this.inputWrapper.container], [ICONANIMATION]);
                 attributes(_this.inputElement, { 'aria-expanded': 'true' });
                 attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });
                 EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
             }
         });
@@ -994,6 +998,40 @@ var DateTimePicker = /** @class */ (function (_super) {
         }
         return this.calculateStartEnd(tempStartValue, start, 'starttime');
     };
+    DateTimePicker.prototype.TimePopupFormat = function () {
+        var format = '';
+        var formatCount = 0;
+        var proxy = this;
+        function formatValueSpecifier(formattext) {
+            switch (formattext) {
+                case 'd':
+                case 'dd':
+                case 'ddd':
+                case 'dddd':
+                case 'M':
+                case 'MM':
+                case 'MMM':
+                case 'MMMM':
+                case 'y':
+                case 'yy':
+                case 'yyy':
+                case 'yyyy':
+                    if (format == '') {
+                        format = format + formattext;
+                    }
+                    else {
+                        format = format + "/" + formattext;
+                    }
+                    formatCount = formatCount + 1;
+                    break;
+            }
+            if (formatCount > 2) {
+                proxy.dateFormatString = format;
+            }
+            return format;
+        }
+        return formatValueSpecifier;
+    };
     DateTimePicker.prototype.endTime = function (date) {
         var tempEndValue;
         var end;
@@ -1074,6 +1112,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             this.inputWrapper.container.classList.remove(ICONANIMATION);
             attributes(this.inputElement, { 'aria-expanded': 'false' });
             this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-controls');
             EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
         }
     };
@@ -1441,8 +1480,10 @@ var DateTimePicker = /** @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);
+                    if (this.dateTimeOptions && this.dateTimeOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);
+                    }
                     this.dateTimeFormat = this.cldrDateTimeFormat();
                     _super.prototype.updateInput.call(this);
                     break;

package/src/maskbase/masked-date-time.d.ts

@@ -35,6 +35,7 @@ export declare class MaskedDateTime {
     private isDateZero;
     private isMonthZero;
     private isYearZero;
+    private isLeadingZero;
     private dayTypeCount;
     private monthTypeCount;
     private hourTypeCount;

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

@@ -42,6 +42,7 @@ var MaskedDateTime = /** @class */ (function () {
         this.isDateZero = false;
         this.isMonthZero = false;
         this.isYearZero = false;
+        this.isLeadingZero = false;
         this.dayTypeCount = 0;
         this.monthTypeCount = 0;
         this.hourTypeCount = 0;
@@ -285,7 +286,18 @@ var MaskedDateTime = /** @class */ (function () {
                         }
                         if (month >= 1) {
                             newDateValue.setMonth(month - 1);
-                            this.isNavigate = month.toString().length === 2;
+                            if (month >= 10 || month == 1) {
+                                if (this.isLeadingZero && month == 1) {
+                                    this.isNavigate = month.toString().length === 1;
+                                    this.isLeadingZero = false;
+                                }
+                                else {
+                                    this.isNavigate = month.toString().length === 2;
+                                }
+                            }
+                            else {
+                                this.isNavigate = month.toString().length === 1;
+                            }
                             if (newDateValue.getMonth() !== month - 1) {
                                 newDateValue.setDate(1);
                                 newDateValue.setMonth(month - 1);
@@ -303,6 +315,7 @@ var MaskedDateTime = /** @class */ (function () {
                         }
                         else {
                             newDateValue.setMonth(0);
+                            this.isLeadingZero = true;
                             this.isMonthPart = false;
                             this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;
                         }

package/src/timepicker/timepicker.js

@@ -539,6 +539,8 @@ var TimePicker = /** @class */ (function (_super) {
             className: ROOT + ' ' + POPUP,
             attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }
         });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
@@ -1098,6 +1100,7 @@ var TimePicker = /** @class */ (function (_super) {
                     removeClass([_this.inputWrapper.container], [ICONANIMATION]);
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
                     _this.inputElement.removeAttribute('aria-owns');
+                    _this.inputElement.removeAttribute('aria-controls');
                     _this.inputElement.removeAttribute('aria-activedescendant');
                     EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);
                 }
@@ -2209,6 +2212,7 @@ var TimePicker = /** @class */ (function (_super) {
                     _this.setActiveDescendant();
                     attributes(_this.inputElement, { 'aria-expanded': 'true' });
                     attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
+                    attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });
                     addClass([_this.inputWrapper.container], FOCUS);
                     EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
                     _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);
@@ -2370,7 +2374,9 @@ var TimePicker = /** @class */ (function (_super) {
                     this.setProperties({ locale: newProp.locale }, true);
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.updatePlaceHolder();
+                    if (this.timeOptions && this.timeOptions.placeholder == null) {
+                        this.updatePlaceHolder();
+                    }
                     this.setValue(this.value);
                     if (this.enableMask) {
                         this.notify('createMask', {

package/styles/daterangepicker/_layout.scss

@@ -721,13 +721,11 @@
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
                   @if ($skin-name == 'Material3') {
-                    margin-right: 60vw;
                     vertical-align: inherit;
                     font-size: $modal-range-tablet-font-size
                   }
                   @media screen and (orientation: landscape) {
                     @if ($skin-name == 'Material3') {
-                      margin-right: 78vw;
                       vertical-align: inherit;
                     }
                   }
@@ -742,9 +740,6 @@
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
-                  @if ($skin-name == 'Material3') {
-                    margin-right: 42px;
-                  }
 
                   #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
@@ -757,16 +752,17 @@
 
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
-                    @if ($skin-name == 'Material3') {
-                      margin-left: $modal-header-month-name-left-width;
-                      position: absolute;
-                      text-align: center;
-                      vertical-align: middle;
-                      width: $modal-header-month-name-width;
-                      line-height: $modal-month-name-line-height;
-                  }
-                    line-height: $modal-range-month-landscape-title-line-height;
-                  }
+                      @if ($skin-name =='Material3') {
+                        margin-left: $modal-header-month-name-left-landscape-width;
+                        position: absolute;
+                        text-align: center;
+                        vertical-align: middle;
+                        width: $modal-header-month-name-width;
+                        line-height: $modal-month-name-line-height;
+                      }
+                  
+                      line-height: $modal-range-month-landscape-title-line-height;
+                    }
           
                   @media (min-height: 600px) {
                     @if ($skin-name == 'Material3') {

package/styles/daterangepicker/_material3-definition.scss

@@ -250,7 +250,8 @@ $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
 $modal-range-start-end-size: 28px !default;
 $modal-month-name-line-height: 44px !default;
-$modal-header-month-name-left-width: -25vw !default;
+$modal-header-month-name-left-width: -29vw !default;
+$modal-header-month-name-left-landscape-width: -27vw !default;
 $modal-header-month-name-width: 50vw !default;
 
 // header styles for presets

package/styles/daterangepicker/material3-dark.css

@@ -834,13 +834,11 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
   height: 36px;
   width: 36px;
-  margin-right: 60vw;
   vertical-align: inherit;
   font-size: 18px;
 }
 @media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
-    margin-right: 78vw;
     vertical-align: inherit;
   }
 }
@@ -853,7 +851,6 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
   height: 36px;
   width: 36px;
-  margin-right: 42px;
 }
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
   padding: 10px;
@@ -866,7 +863,7 @@
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -27vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;
@@ -877,7 +874,7 @@
 }
 @media (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -29vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;

package/styles/daterangepicker/material3.css

@@ -890,13 +890,11 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
   height: 36px;
   width: 36px;
-  margin-right: 60vw;
   vertical-align: inherit;
   font-size: 18px;
 }
 @media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
-    margin-right: 78vw;
     vertical-align: inherit;
   }
 }
@@ -909,7 +907,6 @@
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
   height: 36px;
   width: 36px;
-  margin-right: 42px;
 }
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
   padding: 10px;
@@ -922,7 +919,7 @@
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -27vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;
@@ -933,7 +930,7 @@
 }
 @media (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -29vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;

package/styles/material3-dark.css

@@ -2502,13 +2502,11 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
   height: 36px;
   width: 36px;
-  margin-right: 60vw;
   vertical-align: inherit;
   font-size: 18px;
 }
 @media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-prev, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-prev {
-    margin-right: 78vw;
     vertical-align: inherit;
   }
 }
@@ -2521,7 +2519,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next {
   height: 36px;
   width: 36px;
-  margin-right: 42px;
 }
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-next span, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-next span {
   padding: 10px;
@@ -2534,7 +2531,7 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -27vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;
@@ -2545,7 +2542,7 @@ ejs-calendar {
 }
 @media (min-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year .e-title, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade .e-title {
-    margin-left: -25vw;
+    margin-left: -29vw;
     position: absolute;
     text-align: center;
     vertical-align: middle;