@syncfusion/ej2-calendars 20.1.56 → 20.2.36

package/helpers/e2e/datetimepickerHelper.js

@@ -1,110 +1,126 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class datetimepickerHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var datetimepickerHelper = (function (_super) {
+        __extends(datetimepickerHelper, _super);
+        function datetimepickerHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    selector(arg) {
-        return (this.wrapperFn ? this.wrapperFn(arg) : arg);
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    getDateIcon() {
-        return this.selector('.e-datetime-wrapper .e-date-icon');
-    }
-    getTimeIcon() {
-        return this.selector('.e-datetime-wrapper .e-time-icon');
-    }
-    getClearIcon() {
-        return this.selector('.e-datetime-wrapper .e-clear-icon');
-    }
-    getInputFocus() {
-        return this.selector('.e-datetime-wrapper.e-input-focus');
-    }
-    getPopupElement() {
-        return this.selector('.e-datepicker.e-popup-wrapper');
-    }
-    getCalender() {
-        return this.selector('.e-datepicker .e-calendar.e-lib.e-keyboard');
-    }
-    getCalendarMonthHeader() {
-        return this.selector('.e-datepicker .e-calendar .e-header.e-month');
-    }
-    getCalendarYearHeader() {
-        return this.selector('.e-datepicker .e-calendar .e-header.e-year');
-    }
-    getCalendarDecadeHeader() {
-        return this.selector('.e-datepicker .e-calendar .e-header.e-decade');
-    }
-    getTitleElement() {
-        return this.selector('.e-datepicker .e-calendar .e-header .e-day.e-title');
-    }
-    getIconContainer() {
-        return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container');
-    }
-    getPrevIcon() {
-        return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container .e-prev');
-    }
-    getNextIcon() {
-        return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container .e-next');
-    }
-    getWeeKHeader() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-week-header');
-    }
-    getCellElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell');
-    }
-    getOtherMonthCellElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-other-month');
-    }
-    getSelectedCellElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-selected');
-    }
-    getTodayElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-today');
-    }
-    getDisabledElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-disabled.e-overlay');
-    }
-    getFocusedElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-focused-date');
-    }
-    getWeenkendElement() {
-        return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-weekend');
-    }
-    getFooterContainer() {
-        return this.selector('.e-datepicker .e-calendar .e-footer-container');
-    }
-    getToday() {
-        return this.selector('.e-datepicker .e-calendar .e-footer-container .e-today');
-    }
-    getWeekNumber() {
-        return this.selector('.e-datepicker .e-calendar.e-week-number .e-content .e-cell.e-week-number');
-    }
-    getTimePopup() {
-        return this.selector('.e-datetimepicker.e-popup');
-    }
-    getTimePopupContent() {
-        return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent');
-    }
-    getTimePopupItem() {
-        return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item');
-    }
-    getTimePopupActiveItem() {
-        return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-active');
-    }
-    getTimePopupHoverItem() {
-        return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-hover');
-    }
-    getTimePopupDisabledItem() {
-        return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-disabled');
-    }
-}
-exports.datetimepickerHelper = datetimepickerHelper;
+        datetimepickerHelper.prototype.selector = function (arg) {
+            return (this.wrapperFn ? this.wrapperFn(arg) : arg);
+        };
+        datetimepickerHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        datetimepickerHelper.prototype.getDateIcon = function () {
+            return this.selector('.e-datetime-wrapper .e-date-icon');
+        };
+        datetimepickerHelper.prototype.getTimeIcon = function () {
+            return this.selector('.e-datetime-wrapper .e-time-icon');
+        };
+        datetimepickerHelper.prototype.getClearIcon = function () {
+            return this.selector('.e-datetime-wrapper .e-clear-icon');
+        };
+        datetimepickerHelper.prototype.getInputFocus = function () {
+            return this.selector('.e-datetime-wrapper.e-input-focus');
+        };
+        datetimepickerHelper.prototype.getPopupElement = function () {
+            return this.selector('.e-datepicker.e-popup-wrapper');
+        };
+        datetimepickerHelper.prototype.getCalender = function () {
+            return this.selector('.e-datepicker .e-calendar.e-lib.e-keyboard');
+        };
+        datetimepickerHelper.prototype.getCalendarMonthHeader = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header.e-month');
+        };
+        datetimepickerHelper.prototype.getCalendarYearHeader = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header.e-year');
+        };
+        datetimepickerHelper.prototype.getCalendarDecadeHeader = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header.e-decade');
+        };
+        datetimepickerHelper.prototype.getTitleElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header .e-day.e-title');
+        };
+        datetimepickerHelper.prototype.getIconContainer = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container');
+        };
+        datetimepickerHelper.prototype.getPrevIcon = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container .e-prev');
+        };
+        datetimepickerHelper.prototype.getNextIcon = function () {
+            return this.selector('.e-datepicker .e-calendar .e-header .e-icon-container .e-next');
+        };
+        datetimepickerHelper.prototype.getWeeKHeader = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-week-header');
+        };
+        datetimepickerHelper.prototype.getCellElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell');
+        };
+        datetimepickerHelper.prototype.getOtherMonthCellElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-other-month');
+        };
+        datetimepickerHelper.prototype.getSelectedCellElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-selected');
+        };
+        datetimepickerHelper.prototype.getTodayElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-today');
+        };
+        datetimepickerHelper.prototype.getDisabledElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-disabled.e-overlay');
+        };
+        datetimepickerHelper.prototype.getFocusedElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-focused-date');
+        };
+        datetimepickerHelper.prototype.getWeenkendElement = function () {
+            return this.selector('.e-datepicker .e-calendar .e-content .e-cell.e-weekend');
+        };
+        datetimepickerHelper.prototype.getFooterContainer = function () {
+            return this.selector('.e-datepicker .e-calendar .e-footer-container');
+        };
+        datetimepickerHelper.prototype.getToday = function () {
+            return this.selector('.e-datepicker .e-calendar .e-footer-container .e-today');
+        };
+        datetimepickerHelper.prototype.getWeekNumber = function () {
+            return this.selector('.e-datepicker .e-calendar.e-week-number .e-content .e-cell.e-week-number');
+        };
+        datetimepickerHelper.prototype.getTimePopup = function () {
+            return this.selector('.e-datetimepicker.e-popup');
+        };
+        datetimepickerHelper.prototype.getTimePopupContent = function () {
+            return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent');
+        };
+        datetimepickerHelper.prototype.getTimePopupItem = function () {
+            return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item');
+        };
+        datetimepickerHelper.prototype.getTimePopupActiveItem = function () {
+            return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-active');
+        };
+        datetimepickerHelper.prototype.getTimePopupHoverItem = function () {
+            return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-hover');
+        };
+        datetimepickerHelper.prototype.getTimePopupDisabledItem = function () {
+            return this.selector('.e-datetimepicker.e-popup .e-content .e-list-parent .e-list-item.e-disabled');
+        };
+        return datetimepickerHelper;
+    }(e2e_1.TestHelper));
+    exports.datetimepickerHelper = datetimepickerHelper;
+});

package/helpers/e2e/index.js

@@ -1,10 +1,12 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./calendarHelper"));
-__export(require("./datepickerHelper"));
-__export(require("./datetimepickerHelper"));
-__export(require("./daterangepickerHelper"));
-__export(require("./timepickerHelper"));
+define(["require", "exports", "./calendarHelper", "./datepickerHelper", "./datetimepickerHelper", "./daterangepickerHelper", "./timepickerHelper"], function (require, exports, calendarHelper_1, datepickerHelper_1, datetimepickerHelper_1, daterangepickerHelper_1, timepickerHelper_1) {
+    "use strict";
+    function __export(m) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", { value: true });
+    __export(calendarHelper_1);
+    __export(datepickerHelper_1);
+    __export(datetimepickerHelper_1);
+    __export(daterangepickerHelper_1);
+    __export(timepickerHelper_1);
+});

package/helpers/e2e/timepickerHelper.js

@@ -1,47 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class timepickerHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var timepickerHelper = (function (_super) {
+        __extends(timepickerHelper, _super);
+        function timepickerHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    selector(arg) {
-        return (this.wrapperFn ? this.wrapperFn(arg) : arg);
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    getTimePickerInput() {
-        return this.selector('.e-control.e-timepicker.e-lib.e-input');
-    }
-    getTimePickerIcon() {
-        return this.selector('.e-time-wrapper .e-time-icon');
-    }
-    getTimePickerClearIcon() {
-        return this.selector('.e-time-wrapper .e-clear-icon');
-    }
-    getTimePicker() {
-        return this.selector('.e-input-group.e-control-wrapper');
-    }
-    getTimePickerContent() {
-        return this.selector('.e-timepicker .e-content');
-    }
-    getTimePickerListContent() {
-        return this.selector('.e-timepicker .e-content .e-list-parent');
-    }
-    getTimePickerListItem() {
-        return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item');
-    }
-    getTimePickerDisabledTime() {
-        return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-disabled');
-    }
-    getTimePickerSelectedTime() {
-        return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-active');
-    }
-}
-exports.timepickerHelper = timepickerHelper;
+        timepickerHelper.prototype.selector = function (arg) {
+            return (this.wrapperFn ? this.wrapperFn(arg) : arg);
+        };
+        timepickerHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        timepickerHelper.prototype.getTimePickerInput = function () {
+            return this.selector('.e-control.e-timepicker.e-lib.e-input');
+        };
+        timepickerHelper.prototype.getTimePickerIcon = function () {
+            return this.selector('.e-time-wrapper .e-time-icon');
+        };
+        timepickerHelper.prototype.getTimePickerClearIcon = function () {
+            return this.selector('.e-time-wrapper .e-clear-icon');
+        };
+        timepickerHelper.prototype.getTimePicker = function () {
+            return this.selector('.e-input-group.e-control-wrapper');
+        };
+        timepickerHelper.prototype.getTimePickerContent = function () {
+            return this.selector('.e-timepicker .e-content');
+        };
+        timepickerHelper.prototype.getTimePickerListContent = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent');
+        };
+        timepickerHelper.prototype.getTimePickerListItem = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item');
+        };
+        timepickerHelper.prototype.getTimePickerDisabledTime = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-disabled');
+        };
+        timepickerHelper.prototype.getTimePickerSelectedTime = function () {
+            return this.selector('.e-timepicker .e-content .e-list-parent .e-list-item.e-active');
+        };
+        return timepickerHelper;
+    }(e2e_1.TestHelper));
+    exports.timepickerHelper = timepickerHelper;
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@20.1.52",
+  "_id": "@syncfusion/ej2-calendars@18.29.2",
   "_inBundle": false,
-  "_integrity": "sha512-gd1cYle0tXgqU2CPzR/O08RwBJvXwOYDXoRovI4WpDBt/RAWgqxeasZC6lC6o5jlQT7UYrPCKJbptS2T57j1nQ==",
+  "_integrity": "sha512-MuOL7C9+HqtHwhH084J+MsNyH34ido8mHtAQEsIdTZWbwuj/tg5YxhC8PCPszG4z8/YZHhdDMRuFpatB+mGG+g==",
   "_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-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.29.2.tgz",
+  "_shasum": "d6b8c311d201d00f8322939e0acb955093667213",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.56",
-    "@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-base": "~20.2.36",
+    "@syncfusion/ej2-buttons": "~20.2.36",
+    "@syncfusion/ej2-inputs": "~20.2.36",
+    "@syncfusion/ej2-lists": "~20.2.36",
+    "@syncfusion/ej2-popups": "~20.2.36"
   },
   "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.2.36",
   "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;