@syncfusion/ej2-calendars 26.2.12 → 27.1.50

package/dist/es6/ej2-calendars.es2015.js

@@ -295,8 +295,8 @@ let CalendarBase = class CalendarBase extends Component {
     getCultureValues() {
         const culShortNames = [];
         let cldrObj;
-        const dayFormat = 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase();
-        if (this.locale === 'en' || this.locale === 'en-US') {
+        const 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 {
@@ -483,22 +483,19 @@ let CalendarBase = class CalendarBase extends Component {
         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.
                     }
@@ -509,8 +506,7 @@ let CalendarBase = class CalendarBase extends Component {
                 }
                 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);
                     }
@@ -533,7 +529,12 @@ let CalendarBase = class CalendarBase extends Component {
                 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 {
@@ -544,7 +545,12 @@ let CalendarBase = class CalendarBase extends Component {
                             const 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 {
@@ -636,7 +642,12 @@ let CalendarBase = class CalendarBase extends Component {
             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;
@@ -730,13 +741,13 @@ let CalendarBase = class CalendarBase extends Component {
             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);
         }
     }
@@ -1024,7 +1035,7 @@ let CalendarBase = class CalendarBase extends Component {
         return this.createElement('td', attrs);
     }
     firstDay(date) {
-        const collection = this.currentView() !== 'Decade' ? this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '') :
+        const collection = this.currentView() !== 'Decade' ? this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')') :
             this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '');
         if (collection.length) {
             for (let i = 0; i < collection.length; i++) {
@@ -1055,7 +1066,7 @@ let CalendarBase = class CalendarBase extends Component {
     }
     findLastDay(date) {
         const 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 (let i = collection.length - 1; i >= 0; i--) {
                 if (!collection[i].classList.contains(DISABLED)) {
@@ -1686,8 +1697,8 @@ let CalendarBase = class CalendarBase extends Component {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getCultureObjects(ld, c) {
-        const gregorianFormat = '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase();
-        const islamicFormat = '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase();
+        const gregorianFormat = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
+        const islamicFormat = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
         const mainVal = 'main.';
         if (this.calendarMode === 'Gregorian') {
             return getValue(mainVal + '' + this.locale + gregorianFormat, ld);
@@ -2644,6 +2655,7 @@ let Calendar = class Calendar extends CalendarBase {
         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))) {
@@ -3377,7 +3389,7 @@ let DatePicker = class DatePicker extends Calendar {
         const 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') {
             const l10nLocale = { placeholder: this.placeholder };
@@ -3415,6 +3427,9 @@ let DatePicker = class DatePicker extends Calendar {
             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;
@@ -3528,9 +3543,9 @@ let DatePicker = class DatePicker extends Calendar {
                 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;
     }
@@ -4121,9 +4136,8 @@ let DatePicker = class DatePicker extends Calendar {
             this.inputElement.value = this.inputElement.value.trim();
         }
         if ((this.getModuleName() === 'datetimepicker')) {
-            if (this.checkDateValue(this.globalize.parseDate(this.inputElement.value, dateOptions))) {
-                const modifiedValue = this.inputElement.value.replace(/(am|pm|Am|aM|pM|Pm)/g, (match) => 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') {
@@ -4132,11 +4146,11 @@ let DatePicker = class DatePicker extends Calendar {
                 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))
@@ -4245,6 +4259,20 @@ let DatePicker = class DatePicker extends Calendar {
         this.popupObj.element.className += ' ' + this.cssClass;
         this.setAriaAttributes();
     }
+    getAmPmValue(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, (match) => 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
+        }
+    }
     CalendarSwipeHandler(e) {
         let direction = 0;
         if (this.iconRight) {
@@ -4671,7 +4699,6 @@ let DatePicker = class DatePicker extends Calendar {
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
-        this.hide(null);
         super.destroy();
         Input.destroy({
             element: this.inputElement,
@@ -4687,8 +4714,11 @@ let DatePicker = class DatePicker extends Calendar {
         const 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'))) {
@@ -4922,19 +4952,19 @@ let DatePicker = class DatePicker extends Calendar {
                     case 'value':
                         if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic)) {
                             const 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) {
                             const 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) {
                             const 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':
@@ -5037,9 +5067,11 @@ let DatePicker = class DatePicker extends Calendar {
             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' });
         }
@@ -5048,6 +5080,9 @@ let DatePicker = class DatePicker extends Calendar {
             attributes(this.inputElement, { 'aria-invalid': 'false' });
         }
     }
+    isValidTime(value) {
+        return true;
+    }
     /**
      * Called internally if any of the property value changed.
      *
@@ -5735,7 +5770,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     processPresets() {
         this.presetsItem = [];
         let 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 (const range of this.presets) {
                 const id = range.label.replace(/\s+/g, '') + '_' + (++i);
                 if (typeof range.end === 'string') {
@@ -5804,10 +5839,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (this.firstHiddenChild && this.secondHiddenChild) {
             const 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);
@@ -5982,7 +6017,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                         break;
                     case 'min':
                         if ((isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) || isDynamic) {
-                            const dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            const dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
                         }
                         break;
@@ -5991,20 +6026,20 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                         break;
                     case 'max':
                         if ((isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) || isDynamic) {
-                            const dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            const dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.setProperties(setValue(prop, dateValue, {}), !isDynamic);
                         }
                         break;
                     case 'startDate':
                         if (isNullOrUndefined(this.startDate)) {
-                            const dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            const dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.startValue = dateValue;
                             this.setValue();
                         }
                         break;
                     case 'endDate':
                         if (isNullOrUndefined(this.endDate)) {
-                            const dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);
+                            const dateValue = this.globalize.parseDate(this.getAmPmValue(this.inputElement.getAttribute(prop)), format);
                             this.endValue = dateValue;
                             this.setValue();
                         }
@@ -6239,8 +6274,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                 if (range.length > 1) {
                     this.invalidValueString = null;
                     const dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
-                    const start = this.globalize.parseDate(range[0], dateOptions);
-                    const end = this.globalize.parseDate(range[1], dateOptions);
+                    const start = this.globalize.parseDate(this.getAmPmValue(range[0]), dateOptions);
+                    const end = this.globalize.parseDate(this.getAmPmValue(range[1]), dateOptions);
                     const startDate = this.getStartEndDate(start, false, range, dateOptions);
                     const endDate = this.getStartEndDate(end, true, range, dateOptions);
                     if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
@@ -6316,7 +6351,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     }
     getStartEndDate(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);
@@ -6333,7 +6368,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.currentDate = null;
     }
     errorClass() {
-        const inputStr = this.inputElement.value.trim();
+        const 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)
@@ -9508,6 +9543,20 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.updateHeader();
         }
     }
+    getAmPmValue(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, (match) => 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
+        }
+    }
     getStartEndValue(date, isEnd) {
         if (this.depth === 'Month') {
             return this.checkDateValue(new Date(this.checkValue(date)));
@@ -9607,7 +9656,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     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);
@@ -9617,7 +9666,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     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);
@@ -10257,18 +10306,18 @@ let TimePicker = class TimePicker extends Component {
                 if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {
                     valueExpression = this.setCurrentDate(this.getDateObject(value));
                     if (isNullOrUndefined(valueExpression)) {
-                        valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {
+                        valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {
                             format: this.getCldrDateTimeFormat(), type: 'datetime'
                         }));
                         if (isNullOrUndefined(valueExpression)) {
-                            valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {
+                            valueExpression = this.checkDateValue(this.globalize.parseDate(this.getAmPmValue(valueString), {
                                 format: this.formatString, type: 'dateTime', skeleton: 'yMd'
                             }));
                         }
                     }
                 }
             }
-            valueExp = this.globalize.parseDate(valueString, {
+            valueExp = this.globalize.parseDate(this.getAmPmValue(valueString), {
                 format: this.getCldrDateTimeFormat(), type: 'datetime'
             });
             valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;
@@ -10307,6 +10356,20 @@ let TimePicker = class TimePicker extends Component {
         }
         return modules;
     }
+    getAmPmValue(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, (match) => 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
+        }
+    }
     cldrFormat(type) {
         let cldrDateTimeString;
         if (this.locale === 'en' || this.locale === 'en-US') {
@@ -11078,7 +11141,7 @@ let TimePicker = class TimePicker extends Component {
         return dateVal;
     }
     valueIsDisable(value) {
-        if (this.disableItemCollection.length > 0) {
+        if (!isNullOrUndefined(this.disableItemCollection) && this.disableItemCollection.length > 0) {
             if (this.disableItemCollection.length === this.timeCollections.length) {
                 return false;
             }
@@ -11807,10 +11870,10 @@ let TimePicker = class TimePicker extends Component {
     }
     timeParse(today, val) {
         let value;
-        value = this.globalize.parseDate(today + ' ' + val, {
+        value = this.globalize.parseDate(this.getAmPmValue(today + ' ' + val), {
             format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'
         });
-        value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {
+        value = isNullOrUndefined(value) ? this.globalize.parseDate(this.getAmPmValue(today + ' ' + val), {
             format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'
         }) : value;
         value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));
@@ -12564,7 +12627,6 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
-        this.hide(null);
         if (this.popupObject && this.popupObject.element.classList.contains(POPUP$3)) {
             this.popupObject.destroy();
             detach(this.dateTimeWrapper);
@@ -12637,6 +12699,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         if (typeof (this.max) === 'string') {
             this.max = this.checkDateValue(new Date(this.max));
         }
+        if (typeof (this.minTime) === 'string') {
+            this.minTime = this.checkDateValue(new Date(this.minTime));
+        }
+        if (typeof (this.maxTime) === 'string') {
+            this.maxTime = this.checkDateValue(new Date(this.maxTime));
+        }
         if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
@@ -12707,7 +12775,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     checkValidState(value) {
         this.isValidState = true;
         if (!this.strictMode) {
-            if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {
+            if ((+(value) > +(this.max)) || (+(value) < +(this.min)) || !this.isValidTime(value)) {
                 this.isValidState = false;
             }
         }
@@ -12722,6 +12790,54 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
         attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });
     }
+    isValidTime(value) {
+        if (value != null && (this.minTime || this.maxTime)) {
+            let minTimeValue;
+            let maxTimeValue;
+            let maxValue;
+            let minValue;
+            const valueTime = value.getHours() * 3600000 + value.getMinutes() * 60000 +
+                value.getSeconds() * 1000 + value.getMilliseconds();
+            if (this.minTime) {
+                minTimeValue = this.minTime.getHours() * 3600000 + this.minTime.getMinutes() * 60000 +
+                    this.minTime.getSeconds() * 1000 + this.minTime.getMilliseconds();
+            }
+            if (this.maxTime) {
+                maxTimeValue = this.maxTime.getHours() * 3600000 + this.maxTime.getMinutes() * 60000 +
+                    this.maxTime.getSeconds() * 1000 + this.maxTime.getMilliseconds();
+            }
+            if (this.min && (+value.getDate() === +this.min.getDate() && +value.getMonth() === +this.min.getMonth() &&
+                +value.getFullYear() === +this.min.getFullYear())) {
+                minValue = this.min.getHours() * 3600000 + this.min.getMinutes() * 60000 +
+                    this.min.getSeconds() * 1000 + this.min.getMilliseconds();
+                minTimeValue = minTimeValue < minValue ? minValue : minTimeValue;
+            }
+            if (this.max && (+value.getDate() === +this.max.getDate() && +value.getMonth() === +this.max.getMonth() &&
+                +this.max.getFullYear() === +this.max.getFullYear())) {
+                maxValue = this.max.getHours() * 3600000 + this.max.getMinutes() * 60000 +
+                    this.max.getSeconds() * 1000 + this.max.getMilliseconds();
+                maxTimeValue = maxTimeValue > maxValue ? maxValue : maxTimeValue;
+            }
+            if (this.strictMode) {
+                let newValue;
+                if (minTimeValue && valueTime < minTimeValue) {
+                    newValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.minTime.getHours(), this.minTime.getMinutes(), this.minTime.getSeconds(), this.minTime.getMilliseconds());
+                    this.setProperties({ value: newValue }, true);
+                    this.changedArgs = { value: this.value };
+                }
+                else if (maxTimeValue && valueTime > maxTimeValue) {
+                    newValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.maxTime.getHours(), this.maxTime.getMinutes(), this.maxTime.getSeconds(), this.maxTime.getMilliseconds());
+                    this.setProperties({ value: newValue }, true);
+                    this.changedArgs = { value: this.value };
+                }
+                return true;
+            }
+            else {
+                return !((minTimeValue && valueTime < minTimeValue) || (maxTimeValue && valueTime > maxTimeValue));
+            }
+        }
+        return true;
+    }
     validateValue(value) {
         let dateVal = value;
         if (this.strictMode) {
@@ -12940,12 +13056,12 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             if (this.dateFormatString === '') {
                 this.dateFormatString = this.cldrDateTimeFormat();
             }
-            dateObject = this.globalize.parseDate(this.inputElement.value, {
+            dateObject = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), {
                 format: this.dateFormatString, type: 'datetime'
             });
         }
         else {
-            dateObject = this.globalize.parseDate(this.inputElement.value, {
+            dateObject = this.globalize.parseDate(this.getAmPmValue(this.inputElement.value), {
                 format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'
             });
         }
@@ -13416,20 +13532,35 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         let tempStartValue;
         let start;
         const tempMin = this.min;
+        const tempMax = this.max;
         const value = date === null ? new Date() : date;
-        if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&
-            +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=
-            +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {
+        let isModified = false;
+        let startValue;
+        if (this.minTime) {
+            startValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.minTime.getHours(), this.minTime.getMinutes(), this.minTime.getSeconds(), this.minTime.getMilliseconds());
+            isModified = true;
+        }
+        else {
+            startValue = value;
+        }
+        if ((+startValue.getDate() === +tempMin.getDate() && +startValue.getMonth() === +tempMin.getMonth() &&
+            +startValue.getFullYear() === +tempMin.getFullYear()) ||
+            ((+new Date(startValue.getFullYear(), startValue.getMonth(), startValue.getDate())) <=
+                +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {
             start = false;
-            tempStartValue = this.min;
+            tempStartValue = tempMin;
+            if (isModified && ((+new Date(startValue.getFullYear(), startValue.getMonth(), startValue.getDate(), startValue.getHours(), startValue.getMinutes(), startValue.getSeconds(), startValue.getMilliseconds())) >=
+                +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate(), tempMin.getHours(), tempMin.getMinutes(), tempMin.getSeconds(), tempMin.getMilliseconds()))) {
+                tempStartValue.setHours(startValue.getHours(), startValue.getMinutes(), startValue.getSeconds(), startValue.getMilliseconds());
+            }
         }
-        else if (+value < +this.max && +value > +this.min) {
-            start = true;
-            tempStartValue = value;
+        else if (+startValue < +tempMax && +startValue > +tempMin) {
+            start = !isModified;
+            tempStartValue = startValue;
         }
-        else if (+value >= +this.max) {
+        else if (+startValue >= +tempMax) {
             start = true;
-            tempStartValue = this.max;
+            tempStartValue = tempMax;
         }
         return this.calculateStartEnd(tempStartValue, start, 'starttime');
     }
@@ -13478,17 +13609,31 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         let end;
         const tempMax = this.max;
         const value = date === null ? new Date() : date;
-        if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&
-            +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=
-            +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {
+        let isModified = false;
+        let endValue;
+        if (this.maxTime) {
+            endValue = new Date(value.getFullYear(), value.getMonth(), value.getDate(), this.maxTime.getHours(), this.maxTime.getMinutes(), this.maxTime.getSeconds(), this.maxTime.getMilliseconds());
+            isModified = true;
+        }
+        else {
+            endValue = value;
+        }
+        if ((+endValue.getDate() === +tempMax.getDate() && +endValue.getMonth() === +tempMax.getMonth() &&
+            +endValue.getFullYear() === +tempMax.getFullYear()) ||
+            (+new Date(endValue.getUTCFullYear(), endValue.getMonth(), endValue.getDate()) >=
+                +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {
             end = false;
             tempEndValue = this.max;
+            if (isModified && (+new Date(endValue.getUTCFullYear(), endValue.getMonth(), endValue.getDate(), endValue.getHours(), endValue.getMinutes(), endValue.getSeconds(), endValue.getMilliseconds()) <=
+                +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate(), tempMax.getHours(), tempMax.getMinutes(), tempMax.getSeconds(), tempMax.getMilliseconds()))) {
+                tempEndValue.setHours(endValue.getHours(), endValue.getMinutes(), endValue.getSeconds(), endValue.getMilliseconds());
+            }
         }
-        else if (+value < +this.max && +value > +this.min) {
-            end = true;
-            tempEndValue = value;
+        else if (+endValue < +this.max && +endValue > +this.min) {
+            end = !isModified;
+            tempEndValue = endValue;
         }
-        else if (+value <= +this.min) {
+        else if (+endValue <= +this.min) {
             end = true;
             tempEndValue = this.min;
         }
@@ -14089,6 +14234,12 @@ __decorate$4([
 __decorate$4([
     Property(new Date(2099, 11, 31))
 ], DateTimePicker.prototype, "max", void 0);
+__decorate$4([
+    Property(null)
+], DateTimePicker.prototype, "minTime", void 0);
+__decorate$4([
+    Property(null)
+], DateTimePicker.prototype, "maxTime", void 0);
 __decorate$4([
     Property(null)
 ], DateTimePicker.prototype, "firstDayOfWeek", void 0);