@syncfusion/ej2-calendars 26.2.12 → 27.1.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.12
+*  version : 27.1.50
 *  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@26.2.11",
+  "_id": "@syncfusion/ej2-calendars@18.32.5",
   "_inBundle": false,
-  "_integrity": "sha512-Mxc9SOuea4bDMrp9EAAr3l17Ld4ebwP5yDdycrFnRbC2QpRU0ouqaFEMXql+AjvTFyV3PH7RrCDm6Ms8hlUnPw==",
+  "_integrity": "sha512-rksJYsGIPpCObDMJj5UXpkHFC3zmO0oIq9E4epQ7uMf79Wwm7p1xmvrBVW4Ie71RnIfpTbHXPqJuFrfidkJcRQ==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -31,10 +31,10 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-26.2.11.tgz",
-  "_shasum": "9207e5d66d5c602f2e5a72804c6655d7ea42c069",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-18.32.5.tgz",
+  "_shasum": "c76c6f7cbc4265f8ddd213a442133b7c0a8f34e0",
   "_spec": "@syncfusion/ej2-calendars@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -43,11 +43,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-buttons": "~26.2.10",
-    "@syncfusion/ej2-inputs": "~26.2.11",
-    "@syncfusion/ej2-lists": "~26.2.11",
-    "@syncfusion/ej2-popups": "~26.2.11"
+    "@syncfusion/ej2-base": "~27.1.50",
+    "@syncfusion/ej2-buttons": "~27.1.50",
+    "@syncfusion/ej2-inputs": "~27.1.50",
+    "@syncfusion/ej2-lists": "~27.1.50",
+    "@syncfusion/ej2-popups": "~27.1.50"
   },
   "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": "26.2.12",
+  "version": "27.1.50",
   "sideEffects": false
 }

package/src/calendar/calendar.js

@@ -312,8 +312,8 @@ var CalendarBase = /** @class */ (function (_super) {
     CalendarBase.prototype.getCultureValues = function () {
         var culShortNames = [];
         var cldrObj;
-        var dayFormat = 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase();
-        if (this.locale === 'en' || this.locale === 'en-US') {
+        var dayFormat = !isNullOrUndefined(this.dayHeaderFormat) ? 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase() : null;
+        if ((this.locale === 'en' || this.locale === 'en-US') && !isNullOrUndefined(dayFormat)) {
             cldrObj = (getValue(dayFormat, getDefaultDateObject()));
         }
         else {
@@ -501,22 +501,19 @@ var CalendarBase = /** @class */ (function (_super) {
         this.effect = '';
         switch (e.action) {
             case 'moveLeft':
-                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target) &&
-                    e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
                     this.keyboardNavigate(-1, view, e, this.max, this.min);
                     e.preventDefault();
                 }
                 break;
             case 'moveRight':
-                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target) &&
-                    e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
                     this.keyboardNavigate(1, view, e, this.max, this.min);
                     e.preventDefault();
                 }
                 break;
             case 'moveUp':
-                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target) &&
-                    e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
                     if (view === 0) {
                         this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
                     }
@@ -527,8 +524,7 @@ var CalendarBase = /** @class */ (function (_super) {
                 }
                 break;
             case 'moveDown':
-                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target) &&
-                    e.target.classList.length > 0 && e.target.classList.contains(CONTENTTABLE)) {
+                if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined(e.target)) {
                     if (view === 0) {
                         this.keyboardNavigate(7, view, e, this.max, this.min);
                     }
@@ -551,7 +547,12 @@ var CalendarBase = /** @class */ (function (_super) {
                 else if (e.target === this.todayElement && !e.target.className.includes(DISABLED)) {
                     this.todayButtonClick(e, value);
                     if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
-                        this.element.focus();
+                        if (this.isAngular) {
+                            this.inputElement.focus();
+                        }
+                        else {
+                            this.element.focus();
+                        }
                     }
                 }
                 else {
@@ -562,7 +563,12 @@ var CalendarBase = /** @class */ (function (_super) {
                             var d = new Date(parseInt('' + (element).id, 0));
                             this.selectDate(e, d, (element));
                             if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
-                                this.element.focus();
+                                if (this.isAngular) {
+                                    this.inputElement.focus();
+                                }
+                                else {
+                                    this.element.focus();
+                                }
                             }
                         }
                         else {
@@ -654,7 +660,12 @@ var CalendarBase = /** @class */ (function (_super) {
             case 'shiftTab':
                 if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
                     e.preventDefault();
-                    this.element.focus();
+                    if (this.isAngular) {
+                        this.inputElement.focus();
+                    }
+                    else {
+                        this.element.focus();
+                    }
                     this.hide();
                 }
                 break;
@@ -749,13 +760,13 @@ var CalendarBase = /** @class */ (function (_super) {
             tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate, e);
         }
         else {
-            tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);
+            tdEles = !isNullOrUndefined(this.islamicModule) ? this.islamicModule.islamicRenderDays(this.currentDate, value) : null;
         }
         this.createContentHeader();
         if (this.calendarMode === 'Gregorian') {
             this.renderTemplate(tdEles, numCells, MONTH, e, value);
         }
-        else {
+        else if (!isNullOrUndefined(this.islamicModule)) {
             this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);
         }
     };
@@ -1043,7 +1054,7 @@ var CalendarBase = /** @class */ (function (_super) {
         return this.createElement('td', attrs);
     };
     CalendarBase.prototype.firstDay = function (date) {
-        var collection = this.currentView() !== 'Decade' ? this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '') :
+        var collection = this.currentView() !== 'Decade' ? this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')') :
             this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '');
         if (collection.length) {
             for (var i = 0; i < collection.length; i++) {
@@ -1074,7 +1085,7 @@ var CalendarBase = /** @class */ (function (_super) {
     };
     CalendarBase.prototype.findLastDay = function (date) {
         var collection = this.currentView() === 'Decade' ? this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '') :
-            this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');
+            this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')');
         if (collection.length) {
             for (var i = collection.length - 1; i >= 0; i--) {
                 if (!collection[i].classList.contains(DISABLED)) {
@@ -1706,8 +1717,8 @@ var CalendarBase = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     CalendarBase.prototype.getCultureObjects = function (ld, c) {
-        var gregorianFormat = '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase();
-        var islamicFormat = '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase();
+        var gregorianFormat = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
+        var islamicFormat = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
         var mainVal = 'main.';
         if (this.calendarMode === 'Gregorian') {
             return getValue(mainVal + '' + this.locale + gregorianFormat, ld);
@@ -2669,6 +2680,7 @@ var Calendar = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.value)) {
             this.setProperties({ value: this.value }, true);
         }
+        // eslint-disable-next-line
         if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) &&
             !isNullOrUndefined(this.previousDate) || this.previousDate === null
             && !isNaN(+this.value))) {

package/src/datepicker/datepicker.d.ts

@@ -442,6 +442,7 @@ export declare class DatePicker extends Calendar implements IInput {
     protected popupUpdate(): void;
     protected strictModeUpdate(): void;
     private createCalendar;
+    protected getAmPmValue(date: string | null | undefined): string;
     private CalendarSwipeHandler;
     private TouchStartHandler;
     private setAriaDisabled;
@@ -528,6 +529,7 @@ export declare class DatePicker extends Calendar implements IInput {
     private disabledDates;
     private setAriaAttributes;
     protected errorClass(): void;
+    protected isValidTime(value: Date): boolean;
     /**
      * Called internally if any of the property value changed.
      *

package/src/datepicker/datepicker.js

@@ -175,7 +175,7 @@ var DatePicker = /** @class */ (function (_super) {
         var ariaAttrs = {
             'aria-atomic': 'true', 'aria-expanded': 'false',
             'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',
-            'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false', 'aria-label': this.getModuleName()
+            'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'
         };
         if (this.getModuleName() === 'datepicker') {
             var l10nLocale = { placeholder: this.placeholder };
@@ -213,6 +213,9 @@ var DatePicker = /** @class */ (function (_super) {
             this.inputElement.setAttribute('name', '' + this.element.id);
         }
         attributes(this.inputElement, ariaAttrs);
+        if (!this.inputElement.hasAttribute('aria-label')) {
+            this.inputElement.setAttribute('aria-label', this.getModuleName());
+        }
         if (!this.enabled) {
             this.inputElement.setAttribute('aria-disabled', 'true');
             this.inputElement.tabIndex = -1;
@@ -328,9 +331,9 @@ var DatePicker = /** @class */ (function (_super) {
                 formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
             }
         }
-        returnDate = this.checkDateValue(this.globalize.parseDate(val, formatOptions));
+        returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatOptions));
         if (isNullOrUndefined(returnDate) && (this.getModuleName() === 'datetimepicker')) {
-            returnDate = this.checkDateValue(this.globalize.parseDate(val, formatDateTime));
+            returnDate = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(val), formatDateTime));
         }
         return returnDate;
     };
@@ -925,9 +928,8 @@ var DatePicker = /** @class */ (function (_super) {
             this.inputElement.value = this.inputElement.value.trim();
         }
         if ((this.getModuleName() === 'datetimepicker')) {
-            if (this.checkDateValue(this.globalize.parseDate(this.inputElement.value, dateOptions))) {
-                var modifiedValue = this.inputElement.value.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });
-                date = this.globalize.parseDate(modifiedValue, dateOptions);
+            if (this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions))) {
+                date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);
             }
             else {
                 if (this.calendarMode === 'Gregorian') {
@@ -936,11 +938,11 @@ var DatePicker = /** @class */ (function (_super) {
                 else {
                     formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };
                 }
-                date = this.globalize.parseDate(this.inputElement.value, formatOptions);
+                date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), formatOptions);
             }
         }
         else {
-            date = this.globalize.parseDate(this.inputElement.value, dateOptions);
+            date = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), dateOptions);
             date = (!isNullOrUndefined(date) && isNaN(+date)) ? null : date;
             if (!isNullOrUndefined(this.formatString) && this.inputElement.value !== '' && this.strictMode) {
                 if ((this.isPopupClicked || (!this.isPopupClicked && this.inputElement.value === this.previousElementValue))
@@ -1050,6 +1052,20 @@ var DatePicker = /** @class */ (function (_super) {
         this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     };
+    DatePicker.prototype.getAmPmValue = function (date) {
+        try {
+            if (typeof date === 'string' && date.trim() !== '') {
+                // Replace am/pm variants with uppercase AM/PM
+                return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });
+            }
+            // If date is null, undefined, or an empty string, return a default value or empty string
+            return '';
+        }
+        catch (error) {
+            console.error('Error occurred while processing date:', error);
+            return ''; // Return a default value in case of an error
+        }
+    };
     DatePicker.prototype.CalendarSwipeHandler = function (e) {
         var direction = 0;
         if (this.iconRight) {
@@ -1482,7 +1498,6 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
-        this.hide(null);
         _super.prototype.destroy.call(this);
         Input.destroy({
             element: this.inputElement,
@@ -1498,8 +1513,11 @@ var DatePicker = /** @class */ (function (_super) {
         var ariaAttrs = {
             'aria-atomic': 'true', 'aria-disabled': 'true',
             'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',
-            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-label': this.getModuleName()
+            'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         };
+        if (this.inputElement.hasAttribute('aria-label')) {
+            this.inputElement.removeAttribute('aria-label');
+        }
         if (this.inputElement) {
             Input.removeAttributes(ariaAttrs, this.inputElement);
             if (!isNullOrUndefined(this.inputElementCopy.getAttribute('tabindex'))) {
@@ -1734,19 +1752,19 @@ var DatePicker = /** @class */ (function (_super) {
                     case 'value':
                         if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic)) {
                             var value = this.inputElement.getAttribute(prop);
-                            this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), !dynamic);
+                            this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(value), options), {}), !dynamic);
                         }
                         break;
                     case 'min':
                         if ((+this.min === +new Date(1900, 0, 1)) || dynamic) {
                             var min = this.inputElement.getAttribute(prop);
-                            this.setProperties(setValue(prop, this.globalize.parseDate(min, options), {}), !dynamic);
+                            this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(min), options), {}), !dynamic);
                         }
                         break;
                     case 'max':
                         if ((+this.max === +new Date(2099, 11, 31)) || dynamic) {
                             var max = this.inputElement.getAttribute(prop);
-                            this.setProperties(setValue(prop, this.globalize.parseDate(max, options), {}), !dynamic);
+                            this.setProperties(setValue(prop, this.globalize.parseDate(this.getAmPmValue(max), options), {}), !dynamic);
                         }
                         break;
                     case 'type':
@@ -1851,9 +1869,11 @@ var DatePicker = /** @class */ (function (_super) {
             this.calendarElement.querySelectorAll(dateIdString)[0] &&
             this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled');
         if ((!isNullOrUndefined(this.value) && !isNullOrUndefined(this.min) &&
-            !isNullOrUndefined(this.max) && !(new Date(this.value).setMilliseconds(0) >= new Date(this.min).setMilliseconds(0)
+            !isNullOrUndefined(this.max) && !(new Date(this.value).setMilliseconds(0) >=
+            new Date(this.min).setMilliseconds(0)
             && new Date(this.value).setMilliseconds(0) <= new Date(this.max).setMilliseconds(0)))
-            || (!this.strictMode && this.inputElement.value !== '' && this.inputElement.value !== this.maskedDateValue && isNullOrUndefined(this.value) || isDisabledDate)) {
+            || (!this.strictMode && this.inputElement.value !== '' && this.inputElement.value !== this.maskedDateValue &&
+                isNullOrUndefined(this.value) || isDisabledDate) || !this.isValidTime(this.value)) {
             addClass([this.inputWrapper.container], ERROR);
             attributes(this.inputElement, { 'aria-invalid': 'true' });
         }
@@ -1862,6 +1882,9 @@ var DatePicker = /** @class */ (function (_super) {
             attributes(this.inputElement, { 'aria-invalid': 'false' });
         }
     };
+    DatePicker.prototype.isValidTime = function (value) {
+        return true;
+    };
     /**
      * Called internally if any of the property value changed.
      *

package/src/daterangepicker/daterangepicker.d.ts

@@ -834,6 +834,7 @@ export declare class DateRangePicker extends CalendarBase {
     private clearModelvalue;
     private createHiddenInput;
     private setMinMaxDays;
+    private getAmPmValue;
     private getStartEndValue;
     /**
      * Called internally if any of the property value changed.

package/src/daterangepicker/daterangepicker.js

@@ -474,7 +474,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     DateRangePicker.prototype.processPresets = function () {
         this.presetsItem = [];
         var i = 0;
-        if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
+        if (!isNullOrUndefined(this.presets[0]) && !isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             for (var _i = 0, _a = this.presets; _i < _a.length; _i++) {
                 var range = _a[_i];
                 var id = range.label.replace(/\s+/g, '') + '_' + (++i);
@@ -544,10 +544,10 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (this.firstHiddenChild && this.secondHiddenChild) {
             var format = { format: this.formatString, type: 'datetime', skeleton: 'yMd' };
             if (typeof this.startDate === 'string') {
-                this.startDate = this.globalize.parseDate(this.startDate, format);
+                this.startDate = this.globalize.parseDate(this.getAmPmValue(this.startDate), format);
             }
             if (typeof this.endDate === 'string') {
-                this.endDate = this.globalize.parseDate(this.endDate, format);
+                this.endDate = this.globalize.parseDate(this.getAmPmValue(this.endDate), format);
             }
             this.firstHiddenChild.value = (this.startDate && this.globalize.formatDate(this.startDate, format))
                 || (this.inputElement.value);
@@ -723,7 +723,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                         break;
                     case 'min':
                         if ((isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) || isDynamic) {
-                            var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
                         }
                         break;
@@ -732,20 +732,20 @@ var DateRangePicker = /** @class */ (function (_super) {
                         break;
                     case 'max':
                         if ((isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) || isDynamic) {
-                            var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
                         }
                         break;
                     case 'startDate':
                         if (isNullOrUndefined(this.startDate)) {
-                            var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.startValue = dateValue;
                             this.setValue();
                         }
                         break;
                     case 'endDate':
                         if (isNullOrUndefined(this.endDate)) {
-                            var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            var dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.endValue = dateValue;
                             this.setValue();
                         }
@@ -980,8 +980,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                 if (range.length > 1) {
                     this.invalidValueString = null;
                     var dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
-                    var start = this.globalize.parseDate(range[0], dateOptions);
-                    var end = this.globalize.parseDate(range[1], dateOptions);
+                    var start = this.globalize.parseDate(this.getAmPmValue(range[0]), dateOptions);
+                    var end = this.globalize.parseDate(this.getAmPmValue(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)) {
@@ -1057,7 +1057,7 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.getStartEndDate = function (date, isEnd, range, dateOptions) {
         if (this.depth === 'Month') {
-            return this.globalize.parseDate(range[isEnd ? 1 : 0].trim(), dateOptions);
+            return this.globalize.parseDate(this.getAmPmValue(range[isEnd ? 1 : 0]).trim(), dateOptions);
         }
         else if (this.depth === 'Year' && !isNullOrUndefined(date)) {
             return new Date(date.getFullYear(), date.getMonth() + (isEnd ? 1 : 0), isEnd ? 0 : 1);
@@ -1074,7 +1074,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         this.currentDate = null;
     };
     DateRangePicker.prototype.errorClass = function () {
-        var inputStr = this.inputElement.value.trim();
+        var inputStr = !isNullOrUndefined(this.inputElement.value) ? this.inputElement.value.trim() : null;
         if (((isNullOrUndefined(this.endValue) && isNullOrUndefined(this.startValue) && inputStr !== '') ||
             ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)
                 || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)
@@ -4272,6 +4272,20 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.updateHeader();
         }
     };
+    DateRangePicker.prototype.getAmPmValue = function (date) {
+        try {
+            if (typeof date === 'string' && date.trim() !== '') {
+                // Replace am/pm variants with uppercase AM/PM
+                return date.replace(/(am|pm|Am|aM|pM|Pm)/g, function (match) { return match.toLocaleUpperCase(); });
+            }
+            // If date is null, undefined, or an empty string, return a default value or empty string
+            return '';
+        }
+        catch (error) {
+            console.error('Error occurred while processing date:', error);
+            return ''; // Return a default value in case of an error
+        }
+    };
     DateRangePicker.prototype.getStartEndValue = function (date, isEnd) {
         if (this.depth === 'Month') {
             return this.checkDateValue(new Date(this.checkValue(date)));
@@ -4372,7 +4386,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     break;
                 case 'startDate':
                     if (typeof newProp.startDate === 'string') {
-                        newProp.startDate = this.globalize.parseDate(newProp.startDate, format);
+                        newProp.startDate = this.globalize.parseDate(this.getAmPmValue(newProp.startDate), format);
                     }
                     if (+this.initStartDate !== +newProp.startDate) {
                         this.startValue = this.getStartEndValue(newProp.startDate, false);
@@ -4382,7 +4396,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     break;
                 case 'endDate':
                     if (typeof newProp.endDate === 'string') {
-                        newProp.endDate = this.globalize.parseDate(newProp.endDate, format);
+                        newProp.endDate = this.globalize.parseDate(this.getAmPmValue(newProp.endDate), format);
                     }
                     if (+this.initEndDate !== +newProp.endDate) {
                         this.endValue = this.getStartEndValue(newProp.endDate, true);

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

@@ -284,6 +284,20 @@ export interface DateTimePickerModel extends DatePickerModel{
      */
     max?: Date;
 
+    /**
+     * Gets or sets the minimum time that can be selected in the time popup of the DateTimePicker.
+     *
+     * @default null
+     */
+    minTime?: Date;
+
+    /**
+     * Gets or sets the maximum time that can be selected in the time popup of the DateTimePicker.
+     *
+     * @default null
+     */
+    maxTime?: Date;
+
     /**
      * Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
      *

package/src/datetimepicker/datetimepicker.d.ts

@@ -321,6 +321,18 @@ export declare class DateTimePicker extends DatePicker {
      * @default new Date(2099, 11, 31)
      */
     max: Date;
+    /**
+     * Gets or sets the minimum time that can be selected in the time popup of the DateTimePicker.
+     *
+     * @default null
+     */
+    minTime: Date;
+    /**
+     * Gets or sets the maximum time that can be selected in the time popup of the DateTimePicker.
+     *
+     * @default null
+     */
+    maxTime: Date;
     /**
      * Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
      *
@@ -521,6 +533,7 @@ export declare class DateTimePicker extends DatePicker {
     private validateMinMaxRange;
     private checkValidState;
     private checkErrorState;
+    protected isValidTime(value: Date): boolean;
     private validateValue;
     private disablePopupButton;
     private getFormattedValue;