@syncfusion/ej2-calendars 20.1.56 → 20.1.57

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.56
+*  version : 20.1.57
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@20.1.52",
+  "_id": "@syncfusion/ej2-calendars@20.1.57",
   "_inBundle": false,
-  "_integrity": "sha512-gd1cYle0tXgqU2CPzR/O08RwBJvXwOYDXoRovI4WpDBt/RAWgqxeasZC6lC6o5jlQT7UYrPCKJbptS2T57j1nQ==",
+  "_integrity": "sha512-lRBwmT180cnE0ZvTsXN4owglGNws7i0guVsm9H/KoqZiXqwNPVgS3DPiSAA6u8okKuewyfwFfmwTLK15f6MVaA==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.1.52.tgz",
-  "_shasum": "b846b9bbfa51f9c9ecead919804e470a035954b5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-20.1.57.tgz",
+  "_shasum": "b6d2ec3518ded1dd7a8e8132020d074062a007f4",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -48,7 +48,7 @@
     "@syncfusion/ej2-buttons": "~20.1.55",
     "@syncfusion/ej2-inputs": "~20.1.55",
     "@syncfusion/ej2-lists": "~20.1.55",
-    "@syncfusion/ej2-popups": "~20.1.55"
+    "@syncfusion/ej2-popups": "~20.1.57"
   },
   "deprecated": false,
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.56",
+  "version": "20.1.57",
   "sideEffects": false
 }

package/src/calendar/calendar.js

@@ -238,6 +238,10 @@ var CalendarBase = /** @class */ (function (_super) {
             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);

package/src/datepicker/datepicker.d.ts

@@ -62,6 +62,7 @@ export declare class DatePicker extends Calendar implements IInput {
     protected isIconClicked: boolean;
     protected isDynamicValueChanged: boolean;
     protected moduleName: string;
+    protected isFocused: boolean;
     /**
      * Specifies the width of the DatePicker component.
      *

package/src/datepicker/datepicker.js

@@ -85,6 +85,7 @@ var DatePicker = /** @class */ (function (_super) {
         _this.isIconClicked = false;
         _this.isDynamicValueChanged = false;
         _this.moduleName = _this.getModuleName();
+        _this.isFocused = false;
         _this.datepickerOptions = options;
         return _this;
     }
@@ -650,6 +651,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
     };
     DatePicker.prototype.inputFocusHandler = function () {
+        this.isFocused = true;
         if (!this.enabled) {
             return;
         }

package/src/daterangepicker/daterangepicker.d.ts

@@ -642,7 +642,9 @@ export declare class DateRangePicker extends CalendarBase {
     private errorClass;
     private keyCalendarUpdate;
     private navInCalendar;
+    private firstCellToFocus;
     private keyInputHandler;
+    private tabKeyValidation;
     private keyNavigation;
     private inputHandler;
     private bindCalendarCellEvents;

package/src/daterangepicker/daterangepicker.js

@@ -344,7 +344,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.validationAttribute(this.element, this.inputElement);
         }
         this.checkHtmlAttributes(false);
-        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab' });
+        merge(this.defaultKeyConfigs, { shiftTab: 'shift+tab', tab: 'tab' });
         var 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);
@@ -1055,8 +1055,11 @@ var DateRangePicker = /** @class */ (function (_super) {
             }
         }
     };
-    DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele) {
-        this.removeFocusedDate();
+    DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele, isRemoveFocus) {
+        if (isRemoveFocus === void 0) { isRemoveFocus = true; }
+        if (isRemoveFocus) {
+            this.removeFocusedDate();
+        }
         if (isLeftCalendar) {
             this.leftCalCurrentDate = new Date(+this.currentDate);
             ele = this.leftCalendar;
@@ -1157,8 +1160,37 @@ var DateRangePicker = /** @class */ (function (_super) {
                 }
                 this.keyNavigation(ele, e);
                 break;
+            case 'tab':
+                if (this.tabKeyValidation(ele, LEFTCALENDER)) {
+                    ele = this.keyCalendarUpdate(false, ele, false);
+                    var 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);
+                    var 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;
         }
     };
+    DateRangePicker.prototype.firstCellToFocus = function (calendar) {
+        var focusAbleEle = calendar.children[1].firstElementChild.querySelector('td.e-cell:not(.e-week-number):not(.e-disabled):not(.e-other-month)');
+        var focusEleID = focusAbleEle && focusAbleEle.id ? focusAbleEle.id.split('_')[0] : null;
+        var currentFirstDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
+        var focusDate = focusEleID ? new Date(+focusEleID) : currentFirstDay;
+        return focusDate;
+    };
     DateRangePicker.prototype.keyInputHandler = function (e, value) {
         var date;
         var view = this.getViewNumber(this.currentView());
@@ -1349,19 +1381,39 @@ var DateRangePicker = /** @class */ (function (_super) {
                     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();
     };
+    DateRangePicker.prototype.tabKeyValidation = function (ele, calendarPos) {
+        var isLeftCalendar = ele.classList.contains(calendarPos);
+        var rightHeader = this.rightCalendar.querySelector('.e-header');
+        var leftHeader = this.leftCalendar.querySelector('.e-header');
+        var isRightMonth = rightHeader ? rightHeader.classList.contains('e-month') : false;
+        var isLeftMonth = leftHeader ? leftHeader.classList.contains('e-month') : false;
+        return isLeftCalendar && isLeftMonth && isRightMonth && !this.isMobile;
+    };
     DateRangePicker.prototype.keyNavigation = function (calendar, e) {
         this.bindCalendarCellEvents(calendar);
         if (calendar.classList.contains(LEFTCALENDER)) {
@@ -2103,9 +2155,10 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         this.removeFocusedDate();
     };
-    DateRangePicker.prototype.updateControl = function (calendar) {
+    DateRangePicker.prototype.updateControl = function (calendar, customDate) {
+        if (customDate === void 0) { 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);
@@ -2433,7 +2486,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON);
             this.rightTitle = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE);
             remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER));
-            this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');
+            this.calendarElement.querySelector('table').setAttribute('tabindex', '0');
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalNextIcon);
             this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalPrevIcon);
             prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER));
@@ -2547,7 +2600,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                         this.updateControl(this.leftCalendar);
                         this.updateCalendarElement(this.rightCalendar);
                         _super.prototype.navigateTo.call(this, view, this.rightCalCurrentDate);
-                        this.updateControl(this.rightCalendar);
+                        var customDate = this.rightCalCurrentDate ? this.rightCalCurrentDate : this.currentDate;
+                        this.updateControl(this.rightCalendar, customDate);
                         this.updateNavIcons();
                         this.calendarIconEvent();
                         this.calendarIconRipple();

package/src/maskbase/interface.d.ts

@@ -21,4 +21,5 @@ export interface IMaskedDateTime extends Component<HTMLElement> {
     cldrTimeFormat(): string;
     calendarMode: CalendarType;
     globalize: Internationalization;
+    isFocused: boolean;
 }

package/src/maskbase/masked-date-time.d.ts

@@ -26,6 +26,7 @@ export declare class MaskedDateTime {
     private isComplete;
     private previousDate;
     private isNavigate;
+    private navigated;
     private formatRegex;
     private isDeletion;
     private isShortYear;
@@ -48,6 +49,7 @@ export declare class MaskedDateTime {
     private setDynamicValue;
     private setSelection;
     private maskKeydownHandler;
+    private isPersist;
     private differenceCheck;
     private formatCheck;
     private maskInputHandler;

package/src/maskbase/masked-date-time.js

@@ -33,6 +33,7 @@ var MaskedDateTime = /** @class */ (function () {
         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;
@@ -152,6 +153,7 @@ var MaskedDateTime = /** @class */ (function () {
         this.parent.inputElement.setSelectionRange(start, end);
     };
     MaskedDateTime.prototype.maskKeydownHandler = function (args) {
+        this.dayTypeCount = this.monthTypeCount = this.hourTypeCount = this.minuteTypeCount = this.secondTypeCount = 0;
         if (args.e.key === 'Delete') {
             this.isDeleteKey = true;
             return;
@@ -185,6 +187,10 @@ var MaskedDateTime = /** @class */ (function () {
             this.validCharacterCheck();
         }
     };
+    MaskedDateTime.prototype.isPersist = function () {
+        var isPersist = this.parent.isFocused || this.navigated;
+        return isPersist;
+    };
     MaskedDateTime.prototype.differenceCheck = function () {
         var start = this.parent.inputElement.selectionStart;
         var inputValue = this.parent.inputElement.value;
@@ -204,7 +210,9 @@ var MaskedDateTime = /** @class */ (function () {
         }
         switch (this.previousHiddenMask[start - 1]) {
             case 'd':
-                var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 && !this.isPersist() ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                this.parent.isFocused = this.parent.isFocused ? false : this.parent.isFocused;
+                this.navigated = this.navigated ? false : this.navigated;
                 this.isDateZero = (newVal[start - 1] == '0');
                 if (isNaN(date)) {
                     return;
@@ -229,12 +237,14 @@ var MaskedDateTime = /** @class */ (function () {
                 break;
             case 'M':
                 var month = void 0;
-                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) {
@@ -307,7 +317,9 @@ var MaskedDateTime = /** @class */ (function () {
                 }
                 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;
                 }
@@ -320,7 +332,9 @@ var MaskedDateTime = /** @class */ (function () {
                 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;
                 }
@@ -333,7 +347,9 @@ var MaskedDateTime = /** @class */ (function () {
                 this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'm':
-                var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var 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;
                 }
@@ -346,7 +362,9 @@ var MaskedDateTime = /** @class */ (function () {
                 this.minuteTypeCount = this.minuteTypeCount + 1;
                 break;
             case 's':
-                var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
+                var 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;
                 }
@@ -401,6 +419,10 @@ var MaskedDateTime = /** @class */ (function () {
                 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();
@@ -424,6 +446,10 @@ var MaskedDateTime = /** @class */ (function () {
                 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();
@@ -453,6 +479,10 @@ var MaskedDateTime = /** @class */ (function () {
                     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();
@@ -463,6 +493,10 @@ var MaskedDateTime = /** @class */ (function () {
                     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();
@@ -473,6 +507,10 @@ var MaskedDateTime = /** @class */ (function () {
                     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();
@@ -483,6 +521,10 @@ var MaskedDateTime = /** @class */ (function () {
                     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();
@@ -561,6 +603,7 @@ var MaskedDateTime = /** @class */ (function () {
         var start = this.parent.inputElement.selectionStart;
         var end = this.parent.inputElement.selectionEnd;
         var 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]);