@syncfusion/ej2-calendars 23.2.6 → 24.1.41

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

@@ -318,7 +318,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
         }
         this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER });
         if (this.weekNumber) {
-            html += '<th class="e-week-number"></th>';
+            html += '<th class="e-week-number" aria-hidden="true"></th>';
             if (this.getModuleName() === 'calendar') {
                 addClass([this.element], '' + WEEKNUMBER);
             }
@@ -717,6 +717,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             }
             if (currentMonth !== localDate.getMonth()) {
                 addClass([tdEle], OTHERMONTH);
+                dayLink.setAttribute('aria-disabled', 'true');
             }
             if (localDate.getDay() === 0 || localDate.getDay() === 6) {
                 addClass([tdEle], WEEKEND);
@@ -752,6 +753,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             if (this.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {
                 addClass([tdEle], DISABLED);
                 addClass([tdEle], OVERLAY);
+                dayLink.setAttribute('aria-disabled', 'true');
                 if (+this.renderDayCellArgs.date === +this.todayDate) {
                     this.todayDisabled = true;
                 }
@@ -913,6 +915,7 @@ var CalendarBase = /** @__PURE__ @class */ (function (_super) {
             });
             if ((year < startFullYr) || (year > endFullYr)) {
                 addClass([tdEle], OTHERDECADE);
+                dayLink.setAttribute('aria-disabled', 'true');
                 if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
                     addClass([tdEle], SELECTED);
                 }
@@ -4142,7 +4145,9 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     };
     DatePicker.prototype.createCalendar = function () {
         var _this = this;
-        this.popupWrapper = this.createElement('div', { className: '' + ROOT$1 + ' ' + POPUPWRAPPER });
+        this.popupWrapper = this.createElement('div', { className: '' + ROOT$1 + ' ' + POPUPWRAPPER, id: this.inputElement.id + '_options' });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
@@ -4986,6 +4991,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         if (this.isCalendar()) {
             Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);
             attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });
+            attributes(this.inputElement, { 'aria-controls': this.inputElement.id });
             if (this.value) {
                 attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });
             }
@@ -4993,6 +4999,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         else {
             Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
             this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-controls');
             this.inputElement.removeAttribute('aria-activedescendant');
         }
     };
@@ -5089,8 +5096,10 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.placeholder, this.inputElement);
+                    if (this.datepickerOptions && this.datepickerOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.placeholder, this.inputElement);
+                    }
                     this.updateInput();
                     if (this.enableMask) {
                         this.notify('createMask', {
@@ -6046,6 +6055,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT$2 + ' ' + POPUP$1 });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         this.adjustLongHeaderWidth();
         var isPreset = (!this.isCustomRange || this.isMobile);
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {
@@ -6234,8 +6245,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                 if (range.length > 1) {
                     this.invalidValueString = null;
                     var dateOptions = { format: this.formatString, type: 'date', skeleton: 'yMd' };
-                    var start = new Date(range[0]);
-                    var end = new Date(range[1]);
+                    var start = this.globalize.parseDate(range[0], dateOptions);
+                    var end = this.globalize.parseDate(range[1], dateOptions);
                     var startDate = this.getStartEndDate(start, false, range, dateOptions);
                     var endDate = this.getStartEndDate(end, true, range, dateOptions);
                     if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {
@@ -8199,7 +8210,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });
             var listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);
-            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });
+            attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0', 'aria-label': 'daterangepicker-preset' });
             this.presetElement.appendChild(listTag);
             this.popupWrapper.appendChild(this.presetElement);
             var customElement = this.presetElement.querySelector('#custom_range');
@@ -8286,7 +8297,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                         EventHandler.add(_this.calendarElement.querySelector(".e-content.e-month"), "touchstart", _this.touchStartRangeHandler, _this);
                     }
                 }
-                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id, 'aria-controls': _this.inputElement.id });
                 if (_this.value) {
                     attributes(_this.inputElement, { 'aria-activedescendant': _this.inputElement.id });
                 }
@@ -8341,6 +8352,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             close: function () {
                 attributes(_this.inputElement, { 'aria-expanded': 'false' });
                 _this.inputElement.removeAttribute('aria-owns');
+                _this.inputElement.removeAttribute('aria-controls');
                 _this.inputElement.removeAttribute('aria-activedescendant');
                 removeClass([_this.inputWrapper.buttons[0]], ACTIVE$1);
                 if (_this.isRangeIconClicked) {
@@ -8361,7 +8373,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                 }
             }, targetExitViewport: function () {
                 var popupEle = _this.popupObj && _this.popupObj.element;
-                if (!Browser.isDevice && popupEle && popupEle.getBoundingClientRect().height < popupEle.parentElement.getBoundingClientRect().height) {
+                if (!Browser.isDevice && popupEle && popupEle.getBoundingClientRect().height < window.innerHeight) {
                     _this.hide();
                 }
             }
@@ -8694,10 +8706,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
             'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',
             'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'
         });
-        Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);
-        if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {
-            Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);
-        }
+        Input.addAttributes({ 'aria-label': 'select', 'role': 'button' }, this.inputWrapper.buttons[0]);
+        // if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {
+        //     Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);
+        // }
         this.setEleWidth(this.width);
         addClass([this.inputWrapper.container], DATERANGEWRAPPER);
         if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {
@@ -9425,8 +9437,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     DateRangePicker.prototype.setLocale = function () {
         this.globalize = new Internationalization(this.locale);
         this.l10n.setLocale(this.locale);
-        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-        Input.setPlaceholder(this.placeholder, this.inputElement);
+        if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {
+            this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+            Input.setPlaceholder(this.placeholder, this.inputElement);
+        }
         this.updateInput();
         this.updateHiddenInput();
         this.changeTrigger();
@@ -9583,8 +9597,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.placeholder, this.inputElement);
+                    if (this.dateRangeOptions && this.dateRangeOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.placeholder, this.inputElement);
+                    }
                     this.setLocale();
                     break;
                 case 'htmlAttributes':
@@ -10409,6 +10425,8 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
             className: ROOT$3 + ' ' + POPUP$2,
             attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }
         });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
@@ -10968,6 +10986,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
                     removeClass([_this.inputWrapper.container], [ICONANIMATION]);
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
                     _this.inputElement.removeAttribute('aria-owns');
+                    _this.inputElement.removeAttribute('aria-controls');
                     _this.inputElement.removeAttribute('aria-activedescendant');
                     EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);
                 }
@@ -12079,6 +12098,7 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
                     _this.setActiveDescendant();
                     attributes(_this.inputElement, { 'aria-expanded': 'true' });
                     attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
+                    attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });
                     addClass([_this.inputWrapper.container], FOCUS);
                     EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
                     _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);
@@ -12240,7 +12260,9 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
                     this.setProperties({ locale: newProp.locale }, true);
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.updatePlaceHolder();
+                    if (this.timeOptions && this.timeOptions.placeholder == null) {
+                        this.updatePlaceHolder();
+                    }
                     this.setValue(this.value);
                     if (this.enableMask) {
                         this.notify('createMask', {
@@ -12546,6 +12568,8 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         _this.valueWithMinutes = null;
         _this.scrollInvoked = false;
         _this.moduleName = _this.getModuleName();
+        _this.formatRegex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|'[^']*'|'[^']*'/g;
+        _this.dateFormatString = '';
         _this.dateTimeOptions = options;
         return _this;
     }
@@ -12965,8 +12989,9 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
     DateTimePicker.prototype.listCreation = function () {
         var dateObject;
         if (this.calendarMode === 'Gregorian') {
+            this.cldrDateTimeFormat().replace(this.formatRegex, this.TimePopupFormat());
             dateObject = this.globalize.parseDate(this.inputElement.value, {
-                format: this.cldrDateTimeFormat(), type: 'datetime'
+                format: this.dateFormatString, type: 'datetime'
             });
         }
         else {
@@ -12997,7 +13022,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         if (type === 'date') {
             if (!this.readonly && this.popupWrapper) {
                 addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);
-                attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });
+                attributes(this.popupWrapper, { 'id': this.element.id + '_options' });
             }
         }
         else {
@@ -13056,6 +13081,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                 addClass([_this.inputWrapper.container], [ICONANIMATION$1]);
                 attributes(_this.inputElement, { 'aria-expanded': 'true' });
                 attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });
                 EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);
             }
         });
@@ -13455,6 +13481,40 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
         }
         return this.calculateStartEnd(tempStartValue, start, 'starttime');
     };
+    DateTimePicker.prototype.TimePopupFormat = function () {
+        var format = '';
+        var formatCount = 0;
+        var proxy = this;
+        function formatValueSpecifier(formattext) {
+            switch (formattext) {
+                case 'd':
+                case 'dd':
+                case 'ddd':
+                case 'dddd':
+                case 'M':
+                case 'MM':
+                case 'MMM':
+                case 'MMMM':
+                case 'y':
+                case 'yy':
+                case 'yyy':
+                case 'yyyy':
+                    if (format == '') {
+                        format = format + formattext;
+                    }
+                    else {
+                        format = format + "/" + formattext;
+                    }
+                    formatCount = formatCount + 1;
+                    break;
+            }
+            if (formatCount > 2) {
+                proxy.dateFormatString = format;
+            }
+            return format;
+        }
+        return formatValueSpecifier;
+    };
     DateTimePicker.prototype.endTime = function (date) {
         var tempEndValue;
         var end;
@@ -13535,6 +13595,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             this.inputWrapper.container.classList.remove(ICONANIMATION$1);
             attributes(this.inputElement, { 'aria-expanded': 'false' });
             this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-controls');
             EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);
         }
     };
@@ -13902,8 +13963,10 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
                     this.l10n.setLocale(this.locale);
-                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
-                    Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);
+                    if (this.dateTimeOptions && this.dateTimeOptions.placeholder == null) {
+                        this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                        Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);
+                    }
                     this.dateTimeFormat = this.cldrDateTimeFormat();
                     _super.prototype.updateInput.call(this);
                     break;
@@ -14167,6 +14230,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
         this.isDateZero = false;
         this.isMonthZero = false;
         this.isYearZero = false;
+        this.isLeadingZero = false;
         this.dayTypeCount = 0;
         this.monthTypeCount = 0;
         this.hourTypeCount = 0;
@@ -14410,7 +14474,18 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                         }
                         if (month >= 1) {
                             newDateValue.setMonth(month - 1);
-                            this.isNavigate = month.toString().length === 2;
+                            if (month >= 10 || month == 1) {
+                                if (this.isLeadingZero && month == 1) {
+                                    this.isNavigate = month.toString().length === 1;
+                                    this.isLeadingZero = false;
+                                }
+                                else {
+                                    this.isNavigate = month.toString().length === 2;
+                                }
+                            }
+                            else {
+                                this.isNavigate = month.toString().length === 1;
+                            }
                             if (newDateValue.getMonth() !== month - 1) {
                                 newDateValue.setDate(1);
                                 newDateValue.setMonth(month - 1);
@@ -14428,6 +14503,7 @@ var MaskedDateTime = /** @__PURE__ @class */ (function () {
                         }
                         else {
                             newDateValue.setMonth(0);
+                            this.isLeadingZero = true;
                             this.isMonthPart = false;
                             this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;
                         }