@syncfusion/ej2-calendars 29.2.11 → 30.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.11
+*  version : 30.2.4
 *  Copyright Syncfusion Inc. 2001 - 2024. 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": "29.2.11",
+  "version": "30.2.4",
   "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": "~29.2.11",
-    "@syncfusion/ej2-buttons": "~29.2.5",
-    "@syncfusion/ej2-inputs": "~29.2.5",
-    "@syncfusion/ej2-lists": "~29.2.4",
-    "@syncfusion/ej2-popups": "~29.2.8"
+    "@syncfusion/ej2-base": "~30.2.4",
+    "@syncfusion/ej2-buttons": "~30.2.4",
+    "@syncfusion/ej2-inputs": "~30.2.4",
+    "@syncfusion/ej2-lists": "~30.2.4",
+    "@syncfusion/ej2-popups": "~30.2.4"
   },
   "devDependencies": {},
   "keywords": [

package/src/calendar/calendar.js

@@ -100,10 +100,10 @@ var CalendarBase = /** @class */ (function (_super) {
         this.calendarEleCopy = this.element.cloneNode(true);
         if (this.calendarMode === 'Islamic') {
             if (+(this.min.setSeconds(0)) === +new Date(1900, 0, 1, 0, 0, 0)) {
-                this.min = new Date(1944, 2, 18);
+                this.min = new Date(1941, 12, 18);
             }
             if (+this.max === +new Date(2099, 11, 31)) {
-                this.max = new Date(2069, 10, 16);
+                this.max = new Date(2068, 2, 4);
             }
         }
         this.globalize = new Internationalization(this.locale);
@@ -1966,10 +1966,10 @@ var CalendarBase = /** @class */ (function (_super) {
         }
         else {
             var islamicDate = this.islamicModule.getIslamicDate(date);
-            return islamicDate.month >= (this.islamicModule.getIslamicDate(new Date(1944, 1, 18))).month
-                && islamicDate.year >= (this.islamicModule.getIslamicDate(new Date(1944, 1, 18))).year
-                && islamicDate.month <= (this.islamicModule.getIslamicDate(new Date(2069, 1, 16))).month
-                && islamicDate.year <= (this.islamicModule.getIslamicDate(new Date(2069, 1, 16))).year;
+            return (islamicDate.month >= (this.islamicModule.getIslamicDate(new Date(1941, 12, 18))).month)
+                && islamicDate.year >= (this.islamicModule.getIslamicDate(new Date(1941, 12, 18))).year
+                && islamicDate.month <= (this.islamicModule.getIslamicDate(new Date(2068, 2, 4))).month
+                && islamicDate.year <= (this.islamicModule.getIslamicDate(new Date(2068, 2, 4))).year;
         }
     };
     CalendarBase.prototype.compareYear = function (start, end) {

package/src/calendar/islamic.js

@@ -23,7 +23,7 @@ var TODAY = 'e-today';
 var LINK = 'e-day';
 var CELL = 'e-cell';
 var dayMilliSeconds = 86400000;
-var minDecade = 2060;
+var minDecade = 2058;
 var maxDecade = 2069;
 var Islamic = /** @class */ (function () {
     function Islamic(instance) {
@@ -297,9 +297,21 @@ var Islamic = /** @class */ (function () {
         var endFullYr = endYr.getFullYear();
         var startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
         var endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });
+        if (islamicDate.year % 10 === 1) {
+            startHdrYr = islamicDate.year;
+            endHdrYr = islamicDate.year + 9;
+        }
+        else if (islamicDate.year % 10 > 1) {
+            startHdrYr = islamicDate.year - ((islamicDate.year % 10) - 1);
+            endHdrYr = startHdrYr + 9;
+        }
+        else if (islamicDate.year % 10 === 0) {
+            startHdrYr = islamicDate.year - 9;
+            endHdrYr = islamicDate.year;
+        }
         if (this.calendarInstance.locale === 'ar') {
-            startHdrYr = Number(startHdrYr.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));
-            endHdrYr = Number(endHdrYr.replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));
+            startHdrYr = Number(startHdrYr.toString().replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));
+            endHdrYr = Number(endHdrYr.toString().replace(/[٠١٢٣٤٥٦٧٨٩]/g, function (d) { return String.fromCharCode(d.charCodeAt(0) - 1632 + 48); }));
         }
         var splityear = this.calendarInstance.headerElement.textContent.split('-');
         if ((!isNullOrUndefined(e) && (splityear[0] !== startHdrYr) && e.action === 'home') ||
@@ -398,6 +410,10 @@ var Islamic = /** @class */ (function () {
                 if (islamicDate.year === parseInt(startHdrYr, 10) - 1 || (year_1 < startFullYr) ||
                     (year_1 > endFullYr) && islamicDate.year !== parseInt(endHdrYr, 10)) {
                     addClass([tdEle], OTHERMONTH);
+                    if (year_1 <= new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
+                        || year_1 >= new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
+                        addClass([tdEle], DISABLED);
+                    }
                 }
                 else if (year_1 < new Date(this.islamicInValue(this.calendarInstance.min)).getFullYear()
                     || year_1 > new Date(this.islamicInValue(this.calendarInstance.max)).getFullYear()) {
@@ -409,7 +425,7 @@ var Islamic = /** @class */ (function () {
                     addClass([tdEle], SELECTED);
                 }
                 else {
-                    if (localDate.getFullYear() === this.calendarInstance.currentDate.getFullYear() &&
+                    if (this.getIslamicDate(localDate).year === this.getIslamicDate(this.calendarInstance.currentDate).year &&
                         !tdEle.classList.contains(DISABLED)) {
                         addClass([tdEle], FOCUSEDDATE);
                     }

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

@@ -396,6 +396,14 @@ export interface DateRangePickerModel extends CalendarBaseModel{
      */
     format?: string | RangeFormatObject;
 
+    /**
+     * Specifies an array of acceptable date input formats for parsing user input.
+     *
+     * @default null
+     * @aspType string[]
+     */
+    inputFormats?: string[] | RangeFormatObject[];
+
     /**
      * Specifies the component to be disabled which prevents the DateRangePicker from user interactions.
      *

package/src/daterangepicker/daterangepicker.d.ts

@@ -164,6 +164,7 @@ export declare class DateRangePicker extends CalendarBase {
     private endCopy;
     private formElement;
     private formatString;
+    private inputFormatsString;
     protected tabIndex: string;
     private invalidValueString;
     private dateRangeOptions;
@@ -509,6 +510,13 @@ export declare class DateRangePicker extends CalendarBase {
      * @default null
      */
     format: string | RangeFormatObject;
+    /**
+     * Specifies an array of acceptable date input formats for parsing user input.
+     *
+     * @default null
+     * @aspType string[]
+     */
+    inputFormats: string[] | RangeFormatObject[];
     /**
      * Specifies the component to be disabled which prevents the DateRangePicker from user interactions.
      *
@@ -614,6 +622,7 @@ export declare class DateRangePicker extends CalendarBase {
     private updateValue;
     private initProperty;
     protected checkFormat(): void;
+    protected checkInputFormats(): void;
     private initialize;
     private setDataAttribute;
     private setRangeAllowEdit;

package/src/daterangepicker/daterangepicker.js

@@ -234,6 +234,9 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.value = [new Date(rangeArray[0]), new Date(rangeArray[1])];
         }
         this.initProperty();
+        if (this.inputFormats) {
+            this.checkInputFormats();
+        }
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
         this.element.removeAttribute('tabindex');
         _super.prototype.preRender.call(this);
@@ -347,6 +350,31 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.formatString = null;
         }
     };
+    DateRangePicker.prototype.checkInputFormats = function () {
+        this.inputFormatsString = [];
+        if (this.inputFormats) {
+            for (var _i = 0, _a = this.inputFormats; _i < _a.length; _i++) {
+                var format = _a[_i];
+                var formatString = '';
+                if (typeof format === 'string') {
+                    formatString = format;
+                }
+                else if (format.skeleton !== '' && !isNullOrUndefined(format.skeleton)) {
+                    var skeletonString = format.skeleton;
+                    formatString = this.globalize.getDatePattern({ skeleton: skeletonString, type: 'date' });
+                }
+                if (formatString) {
+                    this.inputFormatsString.push(formatString);
+                }
+            }
+            if (this.inputFormatsString.length === 0) {
+                this.inputFormatsString = null;
+            }
+        }
+        else {
+            this.inputFormatsString = null;
+        }
+    };
     DateRangePicker.prototype.initialize = function () {
         if (this.angularTag !== null) {
             this.validationAttribute(this.element, this.inputElement);
@@ -990,6 +1018,24 @@ var DateRangePicker = /** @class */ (function (_super) {
                             endDate = this.max;
                         }
                     }
+                    if (((isNullOrUndefined(startDate) || (typeof (startDate) === 'object' && isNaN(startDate.getTime()))
+                        || isNullOrUndefined(endDate)) || (typeof (endDate) === 'object' && isNaN(endDate.getTime())))
+                        && !isNullOrUndefined(this.inputFormatsString)) {
+                        for (var _i = 0, _a = this.inputFormatsString; _i < _a.length; _i++) {
+                            var format = _a[_i];
+                            var inputFormatOptions = { format: format, type: 'date', skeleton: 'yMd' };
+                            if (isNullOrUndefined(startDate) || (typeof (startDate) === 'object' && isNaN(startDate.getTime()))) {
+                                startDate = this.globalize.parseDate(this.getAmPmValue(range[0]).trim(), inputFormatOptions);
+                            }
+                            if (isNullOrUndefined(endDate) || (typeof (endDate) === 'object' && isNaN(endDate.getTime()))) {
+                                endDate = this.globalize.parseDate(this.getAmPmValue(range[1]).trim(), inputFormatOptions);
+                            }
+                            if (!isNullOrUndefined(startDate) && startDate instanceof Date && !isNaN(startDate.getTime())
+                                && !isNullOrUndefined(endDate) && endDate instanceof Date && !isNaN(endDate.getTime())) {
+                                break;
+                            }
+                        }
+                    }
                     if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
                         var prevStartVal = this.startValue;
                         this.startValue = startDate;
@@ -4430,6 +4476,9 @@ var DateRangePicker = /** @class */ (function (_super) {
                     this.updateInput();
                     this.changeTrigger();
                     break;
+                case 'inputFormats':
+                    this.checkInputFormats();
+                    break;
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
@@ -4695,6 +4744,9 @@ var DateRangePicker = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], DateRangePicker.prototype, "format", void 0);
+    __decorate([
+        Property(null)
+    ], DateRangePicker.prototype, "inputFormats", void 0);
     __decorate([
         Property(true)
     ], DateRangePicker.prototype, "enabled", void 0);

package/styles/calendar/_layout.scss

@@ -252,6 +252,12 @@
     }
   }
 
+  .e-calendar .e-date-icon-prev {
+    @if $skin-name =='tailwind3' {
+      transform: scale(1.1);
+    }
+  }
+
   //normal style
   #{&}.e-calendar {
     @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {

package/styles/calendar/tailwind3.css

@@ -208,6 +208,11 @@ ejs-calendar {
   text-transform: uppercase;
 }
 
+.e-calendar .e-date-icon-prev {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
 .e-calendar {
   border-spacing: 0;
   max-width: 242px;

package/styles/daterangepicker/_fluent2-definition.scss

@@ -304,6 +304,7 @@ $range-bigger-small-icon-container-min-width: 34px !default;
 $range-bigger-small-icon-container-min-height: 34px !default;
 $range-bigger-small-icon-border-radius: 20px !default;
 
-.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+.e-bigger.e-daterangepicker .e-calendar.e-week-number,
+.e-bigger .e-daterangepicker .e-calendar.e-week-number {
   max-width: 350px;
 }

package/styles/daterangepicker/fluent2.css

@@ -190,7 +190,8 @@
   min-width: 230px;
 }
 
-.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+.e-bigger.e-daterangepicker .e-calendar.e-week-number,
+.e-bigger .e-daterangepicker .e-calendar.e-week-number {
   max-width: 350px;
 }
 

package/styles/datetimepicker/_fluent2-definition.scss

@@ -50,7 +50,7 @@ $datetime-list-border-color: 1px solid $border-light !default;
 $datetime-list-bg-color: $content-bg-color !default;
 $datetime-list-active-bg-color: $content-bg-color-pressed !default;
 $datetime-list-active-font-color: $content-text-color-pressed !default;
-$datetime-list-active-icon-color: $content-text-color-pressed !default;
+$datetime-list-active-icon-color: $icon-color !default;
 $datetime-list-hover-bg-color: $flyout-bg-color-focus !default;
 $datetime-list-hover-font-color: $content-text-color-hover !default;
 $datetime-list-popup-icon-active-color: $icon-color-pressed !default;

package/styles/datetimepicker/fluent2.css

@@ -340,7 +340,7 @@
 
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
-  color: var(--color-sf-content-text-color-pressed);
+  color: var(--color-sf-icon-color);
 }
 .e-datetime-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
   color: var(--color-sf-icon-color-pressed);

package/styles/fluent2-lite.css

@@ -1617,7 +1617,8 @@ ejs-calendar {
   color: var(--color-sf-icon-color);
 }
 
-.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+.e-bigger.e-daterangepicker .e-calendar.e-week-number,
+.e-bigger .e-daterangepicker .e-calendar.e-week-number {
   max-width: 350px;
 }
 
@@ -2590,7 +2591,7 @@ ejs-calendar {
 
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
-  color: var(--color-sf-content-text-color-pressed);
+  color: var(--color-sf-icon-color);
 }
 .e-datetime-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
   color: var(--color-sf-icon-color-pressed);

package/styles/fluent2.css

@@ -2376,7 +2376,8 @@ ejs-calendar {
   margin: 0;
 }
 
-.e-bigger.e-daterangepicker .e-calendar.e-week-number {
+.e-bigger.e-daterangepicker .e-calendar.e-week-number,
+.e-bigger .e-daterangepicker .e-calendar.e-week-number {
   max-width: 350px;
 }
 
@@ -4005,7 +4006,7 @@ ejs-calendar {
 
 /*! datetimepicker theme */
 .e-datetime-wrapper .e-input-group-icon.e-icons.e-active {
-  color: var(--color-sf-content-text-color-pressed);
+  color: var(--color-sf-icon-color);
 }
 .e-datetime-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
   color: var(--color-sf-icon-color-pressed);

package/styles/tailwind3-lite.css

@@ -208,6 +208,11 @@ ejs-calendar {
   text-transform: uppercase;
 }
 
+.e-calendar .e-date-icon-prev {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
 .e-calendar {
   border-spacing: 0;
   max-width: 242px;

package/styles/tailwind3.css

@@ -208,6 +208,11 @@ ejs-calendar {
   text-transform: uppercase;
 }
 
+.e-calendar .e-date-icon-prev {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
 .e-calendar {
   border-spacing: 0;
   max-width: 242px;