@syncfusion/ej2-calendars 23.2.6 → 24.1.41

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

@@ -302,7 +302,7 @@ let CalendarBase = class CalendarBase extends Component {
         }
         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);
             }
@@ -700,6 +700,7 @@ let CalendarBase = class CalendarBase extends Component {
             }
             if (currentMonth !== localDate.getMonth()) {
                 addClass([tdEle], OTHERMONTH);
+                dayLink.setAttribute('aria-disabled', 'true');
             }
             if (localDate.getDay() === 0 || localDate.getDay() === 6) {
                 addClass([tdEle], WEEKEND);
@@ -735,6 +736,7 @@ let CalendarBase = class CalendarBase extends Component {
             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;
                 }
@@ -896,6 +898,7 @@ let CalendarBase = class CalendarBase extends Component {
             });
             if ((year < startFullYr) || (year > endFullYr)) {
                 addClass([tdEle], OTHERDECADE);
+                dayLink.setAttribute('aria-disabled', 'true');
                 if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
                     addClass([tdEle], SELECTED);
                 }
@@ -4097,7 +4100,9 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     createCalendar() {
-        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;
         }
@@ -4936,6 +4941,7 @@ let DatePicker = class DatePicker extends Calendar {
         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() });
             }
@@ -4943,6 +4949,7 @@ let DatePicker = class DatePicker extends Calendar {
         else {
             Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);
             this.inputElement.removeAttribute('aria-owns');
+            this.inputElement.removeAttribute('aria-controls');
             this.inputElement.removeAttribute('aria-activedescendant');
         }
     }
@@ -5038,8 +5045,10 @@ let DatePicker = class DatePicker extends Calendar {
                 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', {
@@ -5969,6 +5978,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             }
         }
         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();
         const isPreset = (!this.isCustomRange || this.isMobile);
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {
@@ -6157,8 +6168,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 = new Date(range[0]);
-                    const end = new Date(range[1]);
+                    const start = this.globalize.parseDate(range[0], dateOptions);
+                    const end = this.globalize.parseDate(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)) {
@@ -8106,7 +8117,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {
             this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });
             const 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);
             const customElement = this.presetElement.querySelector('#custom_range');
@@ -8192,7 +8203,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                         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 });
                 }
@@ -8247,6 +8258,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             close: () => {
                 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) {
@@ -8267,7 +8279,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                 }
             }, targetExitViewport: () => {
                 let 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();
                 }
             }
@@ -8600,10 +8612,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             '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'))) {
@@ -9329,8 +9341,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     setLocale() {
         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();
@@ -9486,8 +9500,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                 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':
@@ -10291,6 +10307,8 @@ let TimePicker = class TimePicker extends Component {
             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;
         }
@@ -10846,6 +10864,7 @@ let TimePicker = class TimePicker extends Component {
                     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);
                 }
@@ -11954,6 +11973,7 @@ let TimePicker = class TimePicker extends Component {
                     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);
@@ -12114,7 +12134,9 @@ let TimePicker = class TimePicker extends Component {
                     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', {
@@ -12405,6 +12427,8 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         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;
     }
     focusHandler() {
@@ -12822,8 +12846,9 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     listCreation() {
         let 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 {
@@ -12854,7 +12879,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         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 {
@@ -12912,6 +12937,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 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);
             }
         });
@@ -13310,6 +13336,40 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
         }
         return this.calculateStartEnd(tempStartValue, start, 'starttime');
     }
+    TimePopupFormat() {
+        var format = '';
+        var formatCount = 0;
+        const 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;
+    }
     endTime(date) {
         let tempEndValue;
         let end;
@@ -13389,6 +13449,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             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);
         }
     }
@@ -13754,8 +13815,10 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                 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.updateInput();
                     break;
@@ -14018,6 +14081,7 @@ class MaskedDateTime {
         this.isDateZero = false;
         this.isMonthZero = false;
         this.isYearZero = false;
+        this.isLeadingZero = false;
         this.dayTypeCount = 0;
         this.monthTypeCount = 0;
         this.hourTypeCount = 0;
@@ -14261,7 +14325,18 @@ class MaskedDateTime {
                         }
                         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);
@@ -14279,6 +14354,7 @@ class MaskedDateTime {
                         }
                         else {
                             newDateValue.setMonth(0);
+                            this.isLeadingZero = true;
                             this.isMonthPart = false;
                             this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;
                         }