@syncfusion/ej2-calendars 20.1.56 → 20.2.36

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

@@ -222,6 +222,10 @@ let CalendarBase = class CalendarBase extends Component {
             duration: 400,
             isCenterRipple: true
         });
+        if (this.getModuleName() === 'daterangepicker') {
+            attributes(this.previousIcon, { tabIndex: '-1' });
+            attributes(this.nextIcon, { tabIndex: '-1' });
+        }
         attributes(this.nextIcon, ariaNextAttrs);
         this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
         attributes(this.headerTitleElement, ariaTitleAttrs);
@@ -3047,6 +3051,7 @@ let DatePicker = class DatePicker extends Calendar {
         this.isIconClicked = false;
         this.isDynamicValueChanged = false;
         this.moduleName = this.getModuleName();
+        this.isFocused = false;
         this.datepickerOptions = options;
     }
     /**
@@ -3608,6 +3613,7 @@ let DatePicker = class DatePicker extends Calendar {
         }
     }
     inputFocusHandler() {
+        this.isFocused = true;
         if (!this.enabled) {
             return;
         }
@@ -5214,7 +5220,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.validationAttribute(this.element, this.inputElement);
         }
         this.checkHtmlAttributes(false);
-        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab' });
+        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab', tab: 'tab' });
         const start = this.checkDateValue(new Date(this.checkValue(this.startValue)));
         this.setProperties({ startDate: start }, true); // persist the value propeerty.
         this.setProperties({ endValue: this.checkDateValue(new Date(this.checkValue(this.endValue))) }, true);
@@ -5920,8 +5926,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             }
         }
     }
-    keyCalendarUpdate(isLeftCalendar, ele) {
-        this.removeFocusedDate();
+    keyCalendarUpdate(isLeftCalendar, ele, isRemoveFocus = true) {
+        if (isRemoveFocus) {
+            this.removeFocusedDate();
+        }
         if (isLeftCalendar) {
             this.leftCalCurrentDate = new Date(+this.currentDate);
             ele = this.leftCalendar;
@@ -6022,8 +6030,37 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                 }
                 this.keyNavigation(ele, e);
                 break;
+            case 'tab':
+                if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                    ele = this.keyCalendarUpdate(false, ele, false);
+                    const focusedCell = ele.querySelector('.e-focused-date');
+                    if (isNullOrUndefined(focusedCell)) {
+                        this.currentDate = this.firstCellToFocus(this.rightCalendar);
+                    }
+                    this.keyboardNavigate(0, view, e, max, min);
+                    this.keyNavigation(ele, e);
+                }
+                break;
+            case 'shiftTab':
+                if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                    ele = this.keyCalendarUpdate(true, ele, false);
+                    const focusedCell = ele.querySelector('.e-focused-date');
+                    if (isNullOrUndefined(focusedCell)) {
+                        this.currentDate = this.firstCellToFocus(this.leftCalendar);
+                    }
+                    this.keyboardNavigate(0, view, e, max, min);
+                    this.keyNavigation(ele, e);
+                }
+                break;
         }
     }
+    firstCellToFocus(calendar) {
+        const focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        const focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
+        const currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
+        const focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
+        return focusDate;
+    }
     keyInputHandler(e, value) {
         let date;
         let view = this.getViewNumber(this.currentView());
@@ -6214,19 +6251,39 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     this.presetElement.focus();
                     this.removeFocusedDate();
                 }
-                e.preventDefault();
+                if (isLeftCalendar) {
+                    e.preventDefault();
+                }
+                if (this.tabKeyValidation(ele, RIGHTCALENDER)) {
+                    this.currentDate = new Date(+this.leftCalCurrentDate);
+                    this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+                }
                 break;
             case 'spacebar':
                 if (this.applyButton && !this.applyButton.disabled) {
                     this.applyFunction(e);
                 }
                 break;
+            case 'tab':
+                if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                    this.currentDate = new Date(+this.rightCalCurrentDate);
+                    this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
+                }
+                break;
             default:
                 this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);
                 this.checkMinMaxDays();
         }
         this.presetHeight();
     }
+    tabKeyValidation(ele, calendarPos) {
+        const isLeftCalendar = ele.classList.contains(calendarPos);
+        const rightHeader = this.rightCalendar.querySelector('.e-header');
+        const leftHeader = this.leftCalendar.querySelector('.e-header');
+        const isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
+        const isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
+        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+    }
     keyNavigation(calendar, e) {
         this.bindCalendarCellEvents(calendar);
         if (calendar.classList.contains(LEFTCALENDER)) {
@@ -6955,9 +7012,9 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         this.removeFocusedDate();
     }
-    updateControl(calendar) {
+    updateControl(calendar, customDate = null) {
         if (calendar.classList.contains(RIGHTCALENDER)) {
-            this.rightCalCurrentDate = new Date(+this.currentDate);
+            this.rightCalCurrentDate = new Date(+(customDate ? customDate : this.currentDate));
         }
         else {
             this.leftCalCurrentDate = new Date(+this.currentDate);
@@ -7285,7 +7342,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
             this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON$1);
             this.rightTitle = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE$1);
             remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER$1));
-            this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');
+            this.calendarElement.querySelector('table').setAttribute('tabindex', '0');
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalNextIcon);
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1).appendChild(this.rightCalPrevIcon);
             prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER$1));
@@ -7399,7 +7456,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                         this.updateControl(this.leftCalendar);
                         this.updateCalendarElement(this.rightCalendar);
                         super.navigateTo.call(this, view, this.rightCalCurrentDate);
-                        this.updateControl(this.rightCalendar);
+                        const customDate = this.rightCalCurrentDate ? this.rightCalCurrentDate : this.currentDate;
+                        this.updateControl(this.rightCalendar, customDate);
                         this.updateNavIcons();
                         this.calendarIconEvent();
                         this.calendarIconRipple();
@@ -13291,6 +13349,7 @@ class MaskedDateTime {
         this.isHiddenMask = false;
         this.isComplete = false;
         this.isNavigate = false;
+        this.navigated = false;
         this.formatRegex = /EEEEE|EEEE|EEE|EE|E|dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|HH|H|hh|h|mm|m|fff|ff|f|aa|a|ss|s|zzzz|zzz|zz|z|'[^']*'|'[^']*'/g;
         this.isDeletion = false;
         this.isShortYear = false;
@@ -13410,6 +13469,7 @@ class MaskedDateTime {
         this.parent.inputElement.setSelectionRange(start, end);
     }
     maskKeydownHandler(args) {
+        this.dayTypeCount = this.monthTypeCount = this.hourTypeCount = this.minuteTypeCount = this.secondTypeCount = 0;
         if (args.e.key === 'Delete') {
             this.isDeleteKey = true;
             return;
@@ -13443,6 +13503,10 @@ class MaskedDateTime {
             this.validCharacterCheck();
         }
     }
+    isPersist() {
+        let isPersist = this.parent.isFocused || this.navigated;
+        return isPersist;
+    }
     differenceCheck() {
         let start = this.parent.inputElement.selectionStart;
         let inputValue = this.parent.inputElement.value;
@@ -13462,8 +13526,10 @@ class MaskedDateTime {
         }
         switch (this.previousHiddenMask[start - 1]) {
             case 'd':
-                let date = (this.isDayPart && newDateValue.getDate().toString().length < 2 ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                let date = (this.isDayPart && newDateValue.getDate().toString().length < 2 && !this.isPersist() ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
                 this.isDateZero = (newVal[start - 1] == '0');
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(date)) {
                     return;
                 }
@@ -13487,12 +13553,14 @@ class MaskedDateTime {
                 break;
             case 'M':
                 let month;
-                if (newDateValue.getMonth().toString().length < 2) {
+                if (newDateValue.getMonth().toString().length < 2 && !this.isPersist()) {
                     month = (this.isMonthPart ? (newDateValue.getMonth() + 1) * 10 : 0) + parseInt(newVal[start - 1], 10);
                 }
                 else {
                     month = parseInt(newVal[start - 1], 10);
                 }
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 this.isMonthZero = (newVal[start - 1] == '0');
                 if (!isNaN(month)) {
                     while (month > 12) {
@@ -13564,7 +13632,9 @@ class MaskedDateTime {
                 }
                 break;
             case 'h':
-                this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2 ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2 && !this.isPersist() ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(this.hour)) {
                     return;
                 }
@@ -13577,7 +13647,9 @@ class MaskedDateTime {
                 this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'H':
-                this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 && !this.isPersist() ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(this.hour)) {
                     return;
                 }
@@ -13590,7 +13662,9 @@ class MaskedDateTime {
                 this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'm':
-                let minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                let minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 && !this.isPersist() ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(minutes)) {
                     return;
                 }
@@ -13603,7 +13677,9 @@ class MaskedDateTime {
                 this.minuteTypeCount = this.minuteTypeCount + 1;
                 break;
             case 's':
-                let seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                let seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 && !this.isPersist() ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 if (isNaN(seconds)) {
                     return;
                 }
@@ -13657,6 +13733,10 @@ class MaskedDateTime {
                 case 'd':
                     result = proxy.isDayPart ? proxy.maskDateValue.getDate().toString() : proxy.defaultConstant['day'].toString();
                     result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);
+                    if (proxy.dayTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.dayTypeCount = 0;
+                    }
                     break;
                 case 'dd':
                     result = proxy.isDayPart ? proxy.roundOff(proxy.maskDateValue.getDate(), 2) : proxy.defaultConstant['day'].toString();
@@ -13680,6 +13760,10 @@ class MaskedDateTime {
                 case 'M':
                     result = proxy.isMonthPart ? (proxy.maskDateValue.getMonth() + 1).toString() : proxy.defaultConstant['month'].toString();
                     result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);
+                    if (proxy.monthTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.monthTypeCount = 0;
+                    }
                     break;
                 case 'MM':
                     result = proxy.isMonthPart ? proxy.roundOff(proxy.maskDateValue.getMonth() + 1, 2) : proxy.defaultConstant['month'].toString();
@@ -13709,6 +13793,10 @@ class MaskedDateTime {
                     break;
                 case 'h':
                     result = proxy.isHourPart ? (proxy.maskDateValue.getHours() % 12 || 12).toString() : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'hh':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours() % 12 || 12, 2) : proxy.defaultConstant['hour'].toString();
@@ -13719,6 +13807,10 @@ class MaskedDateTime {
                     break;
                 case 'H':
                     result = proxy.isHourPart ? proxy.maskDateValue.getHours().toString() : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'HH':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours(), 2) : proxy.defaultConstant['hour'].toString();
@@ -13729,6 +13821,10 @@ class MaskedDateTime {
                     break;
                 case 'm':
                     result = proxy.isMinutePart ? proxy.maskDateValue.getMinutes().toString() : proxy.defaultConstant['minute'].toString();
+                    if (proxy.minuteTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.minuteTypeCount = 0;
+                    }
                     break;
                 case 'mm':
                     result = proxy.isMinutePart ? proxy.roundOff(proxy.maskDateValue.getMinutes(), 2) : proxy.defaultConstant['minute'].toString();
@@ -13739,6 +13835,10 @@ class MaskedDateTime {
                     break;
                 case 's':
                     result = proxy.isSecondsPart ? proxy.maskDateValue.getSeconds().toString() : proxy.defaultConstant['second'].toString();
+                    if (proxy.secondTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.secondTypeCount = 0;
+                    }
                     break;
                 case 'ss':
                     result = proxy.isSecondsPart ? proxy.roundOff(proxy.maskDateValue.getSeconds(), 2) : proxy.defaultConstant['second'].toString();
@@ -13817,6 +13917,7 @@ class MaskedDateTime {
         let start = this.parent.inputElement.selectionStart;
         let end = this.parent.inputElement.selectionEnd;
         let formatIndex = isbackward ? start - 1 : end + 1;
+        this.navigated = true;
         while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {
             if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {
                 this.setSelection(this.hiddenMask[formatIndex]);