@syncfusion/ej2-calendars 32.2.9 → 33.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.9
+*  version : 33.2.3
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "32.2.9",
+  "version": "33.2.3",
   "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.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,11 +8,11 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-calendars.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.9",
-    "@syncfusion/ej2-buttons": "~32.2.9",
-    "@syncfusion/ej2-inputs": "~32.2.8",
-    "@syncfusion/ej2-lists": "~32.2.7",
-    "@syncfusion/ej2-popups": "~32.2.8"
+    "@syncfusion/ej2-base": "~33.2.3",
+    "@syncfusion/ej2-buttons": "~33.2.3",
+    "@syncfusion/ej2-inputs": "~33.2.3",
+    "@syncfusion/ej2-lists": "~33.2.3",
+    "@syncfusion/ej2-popups": "~33.2.3"
   },
   "devDependencies": {},
   "keywords": [

package/src/datepicker/datepicker.js

@@ -1935,9 +1935,12 @@ var DatePicker = /** @class */ (function (_super) {
             width += icons[index].offsetWidth;
         }
         if (label) {
-            var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
-                label.style.width = labelWidth + "px";
+            var isMaterial = window.getComputedStyle(this.element).getPropertyValue('--dummy-style').trim();
+            if (isMaterial === '') {
+                var labelWidth = (this.element.parentElement.offsetWidth) - width;
+                if (labelWidth) {
+                    label.style.width = labelWidth + "px";
+                }
             }
         }
     };
@@ -2112,7 +2115,7 @@ var DatePicker = /** @class */ (function (_super) {
                     this.setAllowEdit();
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(this.placeholder, this.inputElement);
+                    Input.setPlaceholder(this.placeholder, this.inputElement, this.getModuleName());
                     break;
                 case 'readonly':
                     Input.setReadonly(this.readonly, this.inputElement);

package/src/daterangepicker/daterangepicker.js

@@ -1612,7 +1612,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     var isDisabledCell = (!ele.classList.contains(DISABLED) || ele.classList.contains(DATEDISABLED));
                     if (!ele.classList.contains(WEEKNUMBER) && isDisabledCell) {
                         var eleDate = this.getIdValue(null, ele);
-                        var startDateValue = this.currentView() === 'Month' ? new Date(+this.startValue) : this.getStartEndDate(new Date(+this.startValue), false);
+                        var startDateValue = this.currentView() === 'Month' || currentDate != null ? new Date(+this.startValue) : this.getStartEndDate(new Date(+this.startValue), false);
                         var eleDateValue = new Date(+eleDate);
                         if (eleDateValue.setHours(0, 0, 0, 0) >= startDateValue.setHours(0, 0, 0, 0) && +eleDate <= +currentDate) {
                             addClass([ele], RANGEHOVER);
@@ -4135,9 +4135,12 @@ var DateRangePicker = /** @class */ (function (_super) {
             width += icons[index].offsetWidth;
         }
         if (label) {
-            var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
-                label.style.width = labelWidth + "px";
+            var isMaterial = window.getComputedStyle(this.element).getPropertyValue('--dummy-style').trim();
+            if (isMaterial === '') {
+                var labelWidth = (this.element.parentElement.offsetWidth) - width;
+                if (labelWidth) {
+                    label.style.width = labelWidth + "px";
+                }
             }
         }
     };
@@ -4494,7 +4497,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     this.changeTrigger();
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(newProp.placeholder, this.inputElement);
+                    Input.setPlaceholder(newProp.placeholder, this.inputElement, this.getModuleName());
                     this.setProperties({ placeholder: newProp.placeholder }, true);
                     break;
                 case 'readonly':

package/src/datetimepicker/datetimepicker.js

@@ -926,6 +926,12 @@ var DateTimePicker = /** @class */ (function (_super) {
             this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);
             if (this.enableMask) {
                 this.createMask();
+                if (this.globalize.culture === 'ar') {
+                    Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);
+                    this.notify('setMaskSelection', {
+                        module: 'MaskedDateTime'
+                    });
+                }
             }
         }
         this.updateIconState();
@@ -1630,7 +1636,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                     }
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(newProp.placeholder, this.inputElement);
+                    Input.setPlaceholder(newProp.placeholder, this.inputElement, this.getModuleName());
                     break;
                 case 'enabled':
                     Input.setEnabled(this.enabled, this.inputElement);
@@ -1708,9 +1714,12 @@ var DateTimePicker = /** @class */ (function (_super) {
             width += icons[index].offsetWidth;
         }
         if (label) {
-            var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
-                label.style.width = labelWidth + "px";
+            var isMaterial = window.getComputedStyle(this.element).getPropertyValue('--dummy-style').trim();
+            if (isMaterial === '') {
+                var labelWidth = (this.element.parentElement.offsetWidth) - width;
+                if (labelWidth) {
+                    label.style.width = labelWidth + "px";
+                }
             }
         }
     };

package/src/timepicker/timepicker.js

@@ -1902,6 +1902,16 @@ var TimePicker = /** @class */ (function (_super) {
             if (this.enableMask && this.value) {
                 this.createMask();
             }
+            if ((this.globalize.culture === 'ar') && !isNullOrUndefined(date)) {
+                var formatOptions = { format: this.cldrTimeFormat(), type: 'time' };
+                var value = this.globalize.formatDate(date, formatOptions);
+                this.updateInputValue(value);
+                if (this.enableMask) {
+                    this.notify('setMaskSelection', {
+                        module: 'MaskedDateTime'
+                    });
+                }
+            }
         }
         if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {
             this.checkErrorState(this.invalidValueString);
@@ -2385,9 +2395,12 @@ var TimePicker = /** @class */ (function (_super) {
             width += icons[index].offsetWidth;
         }
         if (label) {
-            var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
-                label.style.width = labelWidth + "px";
+            var isMaterial = window.getComputedStyle(this.element).getPropertyValue('--dummy-style').trim();
+            if (isMaterial === '') {
+                var labelWidth = (this.element.parentElement.offsetWidth) - width;
+                if (labelWidth) {
+                    label.style.width = labelWidth + "px";
+                }
             }
         }
     };

package/styles/datepicker/_layout.scss

@@ -15,6 +15,9 @@
   }
 
   #{&}.e-datepicker {
+    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
+      --dummy-style: true;
+    }
     #{if(&, '&', '*')} .e-calendar {
 
       #{if(&, '&', '*')} .e-content table tbody tr.e-month-hide:last-child {

package/styles/datepicker/material-dark.css

@@ -69,6 +69,9 @@
           box-sizing: border-box;
 }
 
+.e-datepicker {
+  --dummy-style: true;
+}
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }

package/styles/datepicker/material.css

@@ -90,6 +90,9 @@
           box-sizing: border-box;
 }
 
+.e-datepicker {
+  --dummy-style: true;
+}
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }

package/styles/datepicker/material3-dark.css

@@ -330,6 +330,9 @@
           box-sizing: border-box;
 }
 
+.e-datepicker {
+  --dummy-style: true;
+}
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }
@@ -339,7 +342,6 @@
   pointer-events: auto;
 }
 .e-datepicker.e-date-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -351,7 +353,6 @@
   z-index: 999;
 }
 .e-datepicker .e-model-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   cursor: default;
@@ -769,7 +770,6 @@
 }
 .e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: none;
 }
@@ -883,7 +883,6 @@
 }
 .e-bigger.e-datepicker .e-calendar,
 .e-bigger.e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: none;
 }

package/styles/datepicker/material3.css

@@ -250,6 +250,9 @@
           box-sizing: border-box;
 }
 
+.e-datepicker {
+  --dummy-style: true;
+}
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
   display: none;
 }
@@ -259,7 +262,6 @@
   pointer-events: auto;
 }
 .e-datepicker.e-date-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -271,7 +273,6 @@
   z-index: 999;
 }
 .e-datepicker .e-model-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   cursor: default;
@@ -691,7 +692,6 @@
 }
 .e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
 }
@@ -807,7 +807,6 @@
 }
 .e-bigger.e-datepicker .e-calendar,
 .e-bigger.e-small.e-datepicker .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: none;
 }

package/styles/daterangepicker/_layout.scss

@@ -22,6 +22,9 @@
   }
 
   #{&}.e-daterangepicker {
+    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
+      --dummy-style: true;
+    }
     #{if(&, '&', '*')}.e-popup {
       border: $range-popup-border;
       border-radius: $range-popup-border-radius;

package/styles/daterangepicker/material-dark.css

@@ -110,6 +110,9 @@
   width: 0;
 }
 
+.e-daterangepicker {
+  --dummy-style: true;
+}
 .e-daterangepicker.e-popup {
   border: #616161;
   border-radius: 0;

package/styles/daterangepicker/material.css

@@ -141,6 +141,9 @@
   width: 0;
 }
 
+.e-daterangepicker {
+  --dummy-style: true;
+}
 .e-daterangepicker.e-popup {
   border: none;
   border-radius: 0;

package/styles/daterangepicker/material3-dark.css

@@ -412,6 +412,9 @@
   width: 0;
 }
 
+.e-daterangepicker {
+  --dummy-style: true;
+}
 .e-daterangepicker.e-popup {
   border: none;
   border-radius: calc(var(--e-radius) * 0.5);
@@ -430,7 +433,6 @@
   max-height: none;
 }
 .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -1162,11 +1164,9 @@
 }
 
 .e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover {
@@ -1174,7 +1174,6 @@
   text-decoration: none;
 }
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -1242,11 +1241,9 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);
@@ -1361,7 +1358,6 @@
 }
 .e-bigger .e-daterangepicker.e-range-modal,
 *.e-device.e-daterangepicker.e-range-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -1376,7 +1372,6 @@
 .e-bigger .e-daterangepicker.e-popup,
 *.e-bigger.e-daterangepicker.e-popup,
 *.e-device.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
@@ -1617,7 +1612,6 @@
 *.e-bigger.e-daterangepicker .e-end-btn,
 *.e-device.e-daterangepicker .e-start-btn,
 *.e-device.e-daterangepicker .e-end-btn {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker .e-start-btn.e-active, .e-bigger .e-daterangepicker .e-start-btn.e-active:active, .e-bigger .e-daterangepicker .e-end-btn.e-active, .e-bigger .e-daterangepicker .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker .e-end-btn.e-active:hover,
@@ -1655,7 +1649,6 @@
   max-height: none;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -1871,12 +1864,10 @@
 
 .e-bigger.e-small .e-daterangepicker.e-popup,
 .e-bigger.e-small.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
@@ -1887,7 +1878,6 @@
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -1985,12 +1975,10 @@
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-footer,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);

package/styles/daterangepicker/material3.css

@@ -314,6 +314,9 @@
   width: 0;
 }
 
+.e-daterangepicker {
+  --dummy-style: true;
+}
 .e-daterangepicker.e-popup {
   border: none;
   border-radius: calc(var(--e-radius) * 0.5);
@@ -332,7 +335,6 @@
   max-height: none;
 }
 .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -1066,11 +1068,9 @@
 }
 
 .e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover {
@@ -1078,7 +1078,6 @@
   text-decoration: none;
 }
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -1146,11 +1145,9 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);
@@ -1267,7 +1264,6 @@
 }
 .e-bigger .e-daterangepicker.e-range-modal,
 *.e-device.e-daterangepicker.e-range-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -1282,7 +1278,6 @@
 .e-bigger .e-daterangepicker.e-popup,
 *.e-bigger.e-daterangepicker.e-popup,
 *.e-device.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
@@ -1523,7 +1518,6 @@
 *.e-bigger.e-daterangepicker .e-end-btn,
 *.e-device.e-daterangepicker .e-start-btn,
 *.e-device.e-daterangepicker .e-end-btn {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker .e-start-btn.e-active, .e-bigger .e-daterangepicker .e-start-btn.e-active:active, .e-bigger .e-daterangepicker .e-end-btn.e-active, .e-bigger .e-daterangepicker .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker .e-end-btn.e-active:hover,
@@ -1561,7 +1555,6 @@
   max-height: none;
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -1777,12 +1770,10 @@
 
 .e-bigger.e-small .e-daterangepicker.e-popup,
 .e-bigger.e-small.e-daterangepicker.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
@@ -1793,7 +1784,6 @@
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -1891,12 +1881,10 @@
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-separator,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-separator {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-bigger.e-small .e-daterangepicker.e-popup .e-footer,
 .e-bigger.e-small.e-daterangepicker.e-popup .e-footer {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: calc(var(--e-radius) * 0.5);
   border-bottom-right-radius: calc(var(--e-radius) * 0.5);

package/styles/datetimepicker/_layout.scss

@@ -55,6 +55,12 @@
     }
   }
 
+  #{&}.e-datetimepicker {
+    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
+      --dummy-style: true;
+    }
+  }
+
   .e-datetime-wrapper:not(.e-outline) {
     #{if(&, '&', '*')}.e-rtl .e-input-group-icon.e-time-icon {
       margin: $datetime-time-rtl-icon-margin;

package/styles/datetimepicker/material-dark.css

@@ -86,6 +86,10 @@
   margin: 0 0 4px 6px;
 }
 
+.e-datetimepicker {
+  --dummy-style: true;
+}
+
 .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
   margin: 0 6px 4px 0;
 }

package/styles/datetimepicker/material.css

@@ -125,6 +125,10 @@
   margin: 0 0 4px 6px;
 }
 
+.e-datetimepicker {
+  --dummy-style: true;
+}
+
 .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
   margin: 0 6px 4px 0;
 }

package/styles/datetimepicker/material3-dark.css

@@ -246,6 +246,10 @@
   margin: 0;
 }
 
+.e-datetimepicker {
+  --dummy-style: true;
+}
+
 .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
   margin: 0;
 }
@@ -285,7 +289,6 @@
 }
 
 .e-datetimepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -458,7 +461,6 @@
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {

package/styles/datetimepicker/material3.css

@@ -250,6 +250,10 @@
   margin: 0;
 }
 
+.e-datetimepicker {
+  --dummy-style: true;
+}
+
 .e-datetime-wrapper:not(.e-outline).e-rtl .e-input-group-icon.e-time-icon {
   margin: 0;
 }
@@ -289,7 +293,6 @@
 }
 
 .e-datetimepicker.e-time-modal {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -464,7 +467,6 @@
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {