@syncfusion/ej2-calendars - npm Package Compare versions

Comparing version 1.0.22 to 15.4.17

dist/es6/calendar/calendar.js

@@ -113,4 +113,6 @@ var __extends = (this && this.__extends) || (function () {
     Calendar.prototype.validateDate = function () {
-        this.setProperties({ value: new Date('' + this.value) }, true);
-        this.currentDate = this.currentDate ? this.currentDate : new Date();
+        this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true);
+        this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);
+        this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);
+        this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));
         if (!isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {
@@ -308,7 +310,7 @@ this.currentDate = new Date('' + this.value);
             case 'moveLeft':
-                this.KeyboardNavigate(-1, view, e);
+                this.KeyboardNavigate(-1, view, e, this.max, this.min);
                 e.preventDefault();
                 break;
             case 'moveRight':
-                this.KeyboardNavigate(1, view, e);
+                this.KeyboardNavigate(1, view, e, this.max, this.min);
                 e.preventDefault();
@@ -318,6 +320,6 @@ break;
                 if (view === 0) {
-                    this.KeyboardNavigate(-7, view, e);
+                    this.KeyboardNavigate(-7, view, e, this.max, this.min);
                 }
                 else {
-                    this.KeyboardNavigate(-4, view, e);
+                    this.KeyboardNavigate(-4, view, e, this.max, this.min);
                 }
@@ -328,6 +330,6 @@ e.preventDefault();
                 if (view === 0) {
-                    this.KeyboardNavigate(7, view, e);
+                    this.KeyboardNavigate(7, view, e, this.max, this.min);
                 }
                 else {
-                    this.KeyboardNavigate(4, view, e);
+                    this.KeyboardNavigate(4, view, e, this.max, this.min);
                 }
@@ -337,9 +339,10 @@ e.preventDefault();
             case 'select':
-                if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate)) {
+                var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
+                if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
                     if (levelRestrict) {
-                        var d = new Date(parseInt('' + (focusedDate || selectedDate).id, 0));
-                        this.selectDate(e, d, (focusedDate || selectedDate));
+                        var d = new Date(parseInt('' + (element).id, 0));
+                        this.selectDate(e, d, (element));
                     }
                     else {
-                        this.contentClick(null, --view, (focusedDate || selectedDate));
+                        this.contentClick(null, --view, (element));
                     }
@@ -399,4 +402,7 @@ }
         }
+        if (this.getModuleName() === 'calendar') {
+            this.table.focus();
+        }
     };
-    Calendar.prototype.KeyboardNavigate = function (number, currentView, e) {
+    Calendar.prototype.KeyboardNavigate = function (number, currentView, e, max, min) {
         var date = new Date('' + this.currentDate);
@@ -425,3 +431,3 @@ switch (currentView) {
             case 0:
-                this.addDay(this.currentDate, number);
+                this.addDay(this.currentDate, number, e, max, min);
                 if (this.isMinMaxRange(this.currentDate)) {
@@ -449,9 +455,30 @@ detach(this.tableBodyElement);
     ;
+    Calendar.prototype.minMaxDate = function (localDate) {
+        var currentDate = new Date(new Date(+localDate).setHours(0, 0, 0, 0));
+        var minDate = new Date(new Date(+this.min).setHours(0, 0, 0, 0));
+        var maxDate = new Date(new Date(+this.max).setHours(0, 0, 0, 0));
+        if (+currentDate === +minDate || +currentDate === +maxDate) {
+            if (+localDate < +this.min) {
+                localDate = new Date(+this.min);
+            }
+            if (+localDate > +this.max) {
+                localDate = new Date(+this.max);
+            }
+        }
+        return localDate;
+    };
     Calendar.prototype.renderMonths = function (e) {
+        var numCells = this.weekNumber ? 8 : 7;
+        var tdEles = this.renderDays(this.currentDate, e);
+        this.contentHdr();
+        this.renderTemplate(tdEles, numCells, MONTH, e);
+    };
+    Calendar.prototype.renderDays = function (currentDate, e) {
         var tdEles = [];
         var cellsCount = 42;
-        var localDate = new Date('' + this.currentDate);
+        var localDate = new Date('' + currentDate);
+        var minMaxDate;
         var numCells = this.weekNumber ? 8 : 7;
         var currentMonth = localDate.getMonth();
-        this.titleUpdate(this.currentDate, 'days');
+        this.titleUpdate(currentDate, 'days');
         var d = localDate;
@@ -471,2 +498,4 @@ localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
             }
+            minMaxDate = new Date(+localDate);
+            localDate = this.minMaxDate(localDate);
             var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };
@@ -521,10 +550,10 @@ var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
             else {
-                if (this.currentDate.getDate() === localDate.getDate() && !otherMnthBool && !disabledCls) {
+                if (currentDate.getDate() === localDate.getDate() && !otherMnthBool && !disabledCls) {
                     addClass([tdEle], FOCUSEDDATE);
                 }
                 else {
-                    if (this.currentDate >= this.max && parseInt(tdEle.id, 0) === +this.max && !otherMnthBool && !disabledCls) {
+                    if (currentDate >= this.max && parseInt(tdEle.id, 0) === +this.max && !otherMnthBool && !disabledCls) {
                         addClass([tdEle], FOCUSEDDATE);
                     }
-                    if (this.currentDate <= this.min && parseInt(tdEle.id, 0) === +this.min && !otherMnthBool && !disabledCls) {
+                    if (currentDate <= this.min && parseInt(tdEle.id, 0) === +this.min && !otherMnthBool && !disabledCls) {
                         addClass([tdEle], FOCUSEDDATE);
@@ -541,6 +570,6 @@ }
             tdEles.push(tdEle);
-            this.addDay(localDate, 1);
+            localDate = new Date(+minMaxDate);
+            this.addDay(localDate, 1, null, this.max, this.min);
         }
-        this.contentHdr();
-        this.renderTemplate(tdEles, numCells, MONTH, e);
+        return tdEles;
     };
@@ -645,3 +674,12 @@ Calendar.prototype.renderYears = function (e) {
     Calendar.prototype.firstDay = function (date) {
-        return new Date(date.getFullYear(), date.getMonth());
+        var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');
+        if (collection.length) {
+            for (var i = 0; i < collection.length; i++) {
+                if (!collection[i].classList.contains(DISABLED)) {
+                    date = new Date(parseInt(collection[i].id, 0));
+                    break;
+                }
+            }
+        }
+        return date;
     };
@@ -654,5 +692,20 @@ Calendar.prototype.lastDay = function (date) {
         }
-        return lastDate;
+        return this.findlastDay(lastDate);
     };
     ;
+    Calendar.prototype.checkDateValue = function (value) {
+        return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
+    };
+    Calendar.prototype.findlastDay = function (date) {
+        var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');
+        if (collection.length) {
+            for (var i = collection.length - 1; i >= 0; i--) {
+                if (!collection[i].classList.contains(DISABLED)) {
+                    date = new Date(parseInt(collection[i].id, 0));
+                    break;
+                }
+            }
+        }
+        return date;
+    };
     Calendar.prototype.removeTheadEle = function () {
@@ -803,2 +856,3 @@ if (this.getModuleName() === 'calendar') {
                 case 'value':
+                    this.setProperties({ value: new Date('' + newProp.value) }, true);
                     if (isNaN(+this.value)) {
@@ -836,2 +890,4 @@ this.setProperties({ value: oldProp.value }, true);
                 case 'max':
+                    prop === 'min' ? this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true) :
+                        this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);
                     this.setProperties({ start: this.currentView() }, true);
@@ -1040,3 +1096,4 @@ detach(this.tableBodyElement);
         var date = this.globalize.parseDate(dateString, dateFormatOptions);
-        return this.globalize.parseDate(dateString, dateFormatOptions);
+        var value = date.valueOf() - date.valueOf() % 1000;
+        return new Date(value);
     };
@@ -1157,5 +1214,39 @@ Calendar.prototype.selectDate = function (e, date, element) {
     };
-    Calendar.prototype.addDay = function (date, i) {
-        date.setDate(date.getDate() + i);
+    Calendar.prototype.addDay = function (date, i, e, max, min) {
+        var column = i;
+        var value = new Date(+date);
+        if (!isNullOrUndefined(this.tableBodyElement) && !isNullOrUndefined(e)) {
+            while (this.findNextTD(new Date(+date), column, max, min)) {
+                column += i;
+            }
+            var rangeValue = new Date(value.setDate(value.getDate() + column));
+            column = (+rangeValue > +max || +rangeValue < +min) ? column === i ? i - i : i : column;
+        }
+        date.setDate(date.getDate() + column);
     };
+    Calendar.prototype.findNextTD = function (date, column, max, min) {
+        var value = new Date(date.setDate(date.getDate() + column));
+        var collection = [];
+        var isDisabled = false;
+        if ((!isNullOrUndefined(value) && value.getMonth()) !== (!isNullOrUndefined(this.currentDate) && this.currentDate.getMonth())) {
+            var tdEles = this.renderDays(value, null);
+            collection = tdEles.filter(function (ele) {
+                return ele.classList.contains(DISABLED);
+            });
+        }
+        else {
+            collection = this.tableBodyElement.querySelectorAll('td.' + DISABLED);
+        }
+        if (+value <= (+(max)) && +value >= (+(min))) {
+            if (collection.length) {
+                for (var i = 0; i < collection.length; i++) {
+                    isDisabled = (+value === +new Date(parseInt(collection[i].id, 0))) ? true : false;
+                    if (isDisabled) {
+                        break;
+                    }
+                }
+            }
+        }
+        return isDisabled;
+    };
     Calendar.prototype.getMaxDays = function (d) {
@@ -1162,0 +1253,0 @@ var date;

dist/es6/datepicker/datepicker.js

@@ -128,5 +128,8 @@ var __extends = (this && this.__extends) || (function () {
         if (+new Date('' + this.value)) {
-            var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
-            var dateString = this.globalize.formatDate(this.value, dateOptions);
-            this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);
+            if (typeof this.value === 'string') {
+                this.value = this.checkDateValue(new Date('' + this.value));
+                var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+                var dateString = this.globalize.formatDate(this.value, dateOptions);
+                this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);
+            }
         }
@@ -304,10 +307,21 @@ if (this.strictMode) {
     DatePicker.prototype.strictModeUpdate = function () {
-        var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+        var format = isNullOrUndefined(this.format) ? this.format : this.format.replace('dd', 'd');
+        if (!isNullOrUndefined(format)) {
+            var len = format.split('M').length - 1;
+            if (len < 3) {
+                format = format.replace('MM', 'M');
+            }
+        }
+        var dateOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
         var date = this.globalize.parseDate(this.inputEle.value, dateOptions);
         if (this.strictMode && date) {
             Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputEle, this.floatLabelType, false);
-            this.setProperties({ value: date }, true);
+            if (this.inputEle.value !== this.previousEleValue) {
+                this.setProperties({ value: date }, true);
+            }
         }
         else if (!this.strictMode) {
-            this.setProperties({ value: date }, true);
+            if (this.inputEle.value !== this.previousEleValue) {
+                this.setProperties({ value: date }, true);
+            }
         }
@@ -320,2 +334,5 @@ if (this.strictMode && !date && this.inputEle.value === '') {
         }
+        if (isNullOrUndefined(this.value)) {
+            this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
+        }
     };
@@ -353,3 +370,2 @@ DatePicker.prototype.createCalendar = function () {
                 }
-                EventHandler.add(document, 'mousedown touchstart', _this.documentHandler, _this);
             }, close: function () {
@@ -365,3 +381,2 @@ if (!Browser.isDevice) {
                 }
-                EventHandler.remove(document, 'mousedown touchstart', _this.documentHandler);
                 if (_this.value) {
@@ -381,2 +396,3 @@ _this.disabledDates();
             document.body.className += ' ' + OVERFLOW;
+            this.modal.style.display = 'block';
         }
@@ -445,5 +461,2 @@ };
     DatePicker.prototype.show = function () {
-        var args = {
-            popupElement: this.popupObj
-        };
         var prevent = true;
@@ -459,2 +472,5 @@ if (!this.isCalendar()) {
         };
+        var args = {
+            popupElement: this.popupObj
+        };
         merge(args, this.preventArgs);
@@ -472,5 +488,2 @@ this.trigger('open', args);
             this.setAriaAttributes();
-            if (Browser.isDevice) {
-                this.modal.style.display = 'block';
-            }
         }
@@ -482,2 +495,3 @@ else {
         }
+        EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
     };
@@ -514,2 +528,3 @@ DatePicker.prototype.hide = function () {
         }
+        EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);
     };
@@ -586,2 +601,3 @@ DatePicker.prototype.focusIn = function () {
         this.globalize = new Internationalization(this.locale);
+        var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
         var attributes = ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
@@ -619,3 +635,4 @@ for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
                         if (!this.value) {
-                            this.setProperties(setValue(prop, this.globalize.parseDate(this.inputEle.getAttribute(prop)), {}), true);
+                            var value = this.inputEle.getAttribute(prop);
+                            this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), true);
                         }
@@ -652,3 +669,6 @@ break;
             if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {
-                this.setProperties({ 'value': null }, true);
+                if (!this.strictMode) {
+                    this.setProperties({ 'value': null }, true);
+                    this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
+                }
             }
@@ -682,2 +702,3 @@ }
     DatePicker.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -687,2 +708,6 @@ var prop = _a[_i];
                 case 'value':
+                    if (typeof newProp.value === 'string') {
+                        newProp.value = this.globalize.parseDate(newProp.value, options);
+                    }
+                    this.setProperties({ value: newProp.value }, true);
                     this.previousEleValue = this.inputEle.value;
@@ -689,0 +714,0 @@ if (isNullOrUndefined(this.value)) {

dist/es6/timepicker/timepicker.js

@@ -93,2 +93,4 @@ var __extends = (this && this.__extends) || (function () {
         this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true);
+        this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);
+        this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);
         this.checkAttributes();
@@ -101,3 +103,3 @@ var localeText = { placeholder: this.placeholder };
         this.initMax = this.checkDateValue(this.max);
-        this.isNavigate = this.isPreventBlur = false;
+        this.isNavigate = this.isPreventBlur = this.isTextSelected = false;
         this.activeIndex = this.valueWithMinutes = this.prevDate = null;
@@ -278,30 +280,2 @@ if (this.element.getAttribute('id')) {
     };
-    TimePicker.prototype.getSelectionDetails = function () {
-        var parts = (this.input).value.split(' ');
-        var meridianValue = this.getMeridianText();
-        var partLength = 0;
-        var curPos = this.getCursorSelection();
-        var valLength;
-        for (var i = 0; i < parts.length; i++) {
-            if (parts[i] !== meridianValue.am && parts[i] !== meridianValue.pm) {
-                var strVal = parts[i].split(this.getSeparator());
-                for (var j = 0; j < strVal.length; j++) {
-                    valLength = partLength + strVal[j].length;
-                    if (curPos.start <= valLength) {
-                        return { start: partLength, end: valLength };
-                    }
-                    else {
-                        partLength += strVal[j].length + 1;
-                    }
-                }
-            }
-            else {
-                if (curPos.start <= partLength + parts[i].length) {
-                    valLength = parts[i].length + partLength;
-                    return { start: partLength, end: valLength };
-                }
-            }
-        }
-        return { start: partLength, end: valLength };
-    };
     TimePicker.prototype.getMeridianText = function () {
@@ -357,26 +331,6 @@ var meridian;
     };
-    TimePicker.prototype.currentTimeElement = function (value) {
-        var element = undefined;
-        if (!isNullOrUndefined(this.popupWrapper)) {
-            var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);
-            if (items.length) {
-                for (var i = 0; i < items.length; i++) {
-                    if (this.timeCollections[i] >= +this.getDateObject(value)) {
-                        element = items[i];
-                        break;
-                    }
-                }
-            }
-        }
-        return element;
-    };
     TimePicker.prototype.setScrollPosition = function () {
         var listHeight = this.getPopupHeight();
         var element;
-        if (isNullOrUndefined(this.value) && true) {
-            element = this.currentTimeElement(new Date());
-        }
-        else {
-            element = this.selectedElement;
-        }
+        element = this.selectedElement;
         if (!isNullOrUndefined(element)) {
@@ -480,5 +434,3 @@ var nextEle = element.nextElementSibling;
             var curPos = this.getCursorSelection();
-            if (curPos.start === 0 && curPos.end === this.input.value.length) {
-                this.input.setSelectionRange(0, 0);
-            }
+            this.input.setSelectionRange(0, 0);
             EventHandler.add(this.input, 'mouseup', this.mouseUpHandler, this);
@@ -493,3 +445,5 @@ }
             if (!(curPos.start === 0 && curPos.end === this.input.value.length)) {
-                this.cursorDetails = this.getSelectionDetails();
+                if (this.input.value.length > 0) {
+                    this.cursorDetails = this.focusSelection();
+                }
                 this.input.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);
@@ -499,2 +453,36 @@ }
     };
+    TimePicker.prototype.focusSelection = function () {
+        var regex = new RegExp('^[a-zA-Z0-9]+$');
+        var split = this.input.value.split('');
+        split.push(' ');
+        var curPos = this.getCursorSelection();
+        var start = 0;
+        var end = 0;
+        var isSeparator = false;
+        if (!this.isTextSelected) {
+            for (var i = 0; i < split.length; i++) {
+                if (!regex.test(split[i])) {
+                    end = i;
+                    isSeparator = true;
+                }
+                if (isSeparator) {
+                    if (curPos.start >= start && curPos.end <= end) {
+                        end = end;
+                        this.isTextSelected = true;
+                        break;
+                    }
+                    else {
+                        start = i + 1;
+                        isSeparator = false;
+                    }
+                }
+            }
+        }
+        else {
+            start = curPos.start;
+            end = curPos.end;
+            this.isTextSelected = false;
+        }
+        return { start: start, end: end };
+    };
     TimePicker.prototype.inputHandler = function (event) {
@@ -522,2 +510,3 @@ if (!this.readonly && this.enabled) {
                     this.hide();
+                    addClass([this.inputWrapper.container], FOCUS);
                     this.isNavigate = false;
@@ -548,2 +537,5 @@ break;
             this.hide();
+            if (!Browser.isDevice) {
+                addClass([this.inputWrapper.container], FOCUS);
+            }
         }
@@ -1200,7 +1192,7 @@ };
         if (val === 'min') {
-            this.initMin = date.min;
+            this.initMin = this.checkDateValue(new Date('' + date.min));
             this.setProperties({ min: this.initMin }, true);
         }
         else {
-            this.initMax = date.max;
+            this.initMax = this.checkDateValue(new Date('' + date.max));
             this.setProperties({ max: this.initMax }, true);
@@ -1321,2 +1313,3 @@ }
                 case 'value':
+                    newProp.value = this.checkDateValue(new Date('' + newProp.value));
                     this.initValue = newProp.value;
@@ -1323,0 +1316,0 @@ this.checkValue(newProp.value);

package.json

 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "1.0.22",
+  "version": "15.4.17",
   "description": "Essential JS 2 Calendar Components",
@@ -9,7 +9,7 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.22",
-    "@syncfusion/ej2-popups": "^1.0.22",
-    "@syncfusion/ej2-inputs": "^1.0.22",
-    "@syncfusion/ej2-lists": "^1.0.19",
-    "@syncfusion/ej2-buttons": "^1.0.22",
+    "@syncfusion/ej2-base": "^15.4.17",
+    "@syncfusion/ej2-popups": "^15.4.17",
+    "@syncfusion/ej2-inputs": "^15.4.17",
+    "@syncfusion/ej2-lists": "^15.4.17",
+    "@syncfusion/ej2-buttons": "^15.4.17",
     "intl": "^1.2.5"
@@ -16,0 +16,0 @@ },

src/calendar/calendar.d.ts

@@ -133,3 +133,3 @@ import { Component, Internationalization, EmitType } from '@syncfusion/ej2-base';
     protected keyActionHandle(e: KeyboardEventArgs): void;
-    protected KeyboardNavigate(number: number, currentView: number, e: KeyboardEvent): void;
+    protected KeyboardNavigate(number: number, currentView: number, e: KeyboardEvent, max: Date, min: Date): void;
     /**
@@ -140,3 +140,5 @@ * Initialize the event handler
     protected preRender(): void;
+    private minMaxDate(localDate);
     protected renderMonths(e?: Event): void;
+    private renderDays(currentDate, e?);
     private renderYears(e?);
@@ -147,2 +149,4 @@ private renderDecades(e?);
     protected lastDay(date: Date): Date;
+    protected checkDateValue(value: Date): Date;
+    private findlastDay(date);
     private removeTheadEle();
@@ -218,3 +222,4 @@ private renderTemplate(elements, numCells, classNm, e?);
     private shiftArray(array, i);
-    protected addDay(date: Date, i: number): void;
+    protected addDay(date: Date, i: number, e: KeyboardEvent, max: Date, min: Date): void;
+    private findNextTD(date, column, max, min);
     private getMaxDays(d);
@@ -221,0 +226,0 @@ private setDateDecade(date, year);

src/calendar/calendar.js

@@ -111,4 +111,6 @@ var __extends = (this && this.__extends) || (function () {
         Calendar.prototype.validateDate = function () {
-            this.setProperties({ value: new Date('' + this.value) }, true);
-            this.currentDate = this.currentDate ? this.currentDate : new Date();
+            this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true);
+            this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);
+            this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);
+            this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));
             if (!ej2_base_5.isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {
@@ -306,7 +308,7 @@ this.currentDate = new Date('' + this.value);
                 case 'moveLeft':
-                    this.KeyboardNavigate(-1, view, e);
+                    this.KeyboardNavigate(-1, view, e, this.max, this.min);
                     e.preventDefault();
                     break;
                 case 'moveRight':
-                    this.KeyboardNavigate(1, view, e);
+                    this.KeyboardNavigate(1, view, e, this.max, this.min);
                     e.preventDefault();
@@ -316,6 +318,6 @@ break;
                     if (view === 0) {
-                        this.KeyboardNavigate(-7, view, e);
+                        this.KeyboardNavigate(-7, view, e, this.max, this.min);
                     }
                     else {
-                        this.KeyboardNavigate(-4, view, e);
+                        this.KeyboardNavigate(-4, view, e, this.max, this.min);
                     }
@@ -326,6 +328,6 @@ e.preventDefault();
                     if (view === 0) {
-                        this.KeyboardNavigate(7, view, e);
+                        this.KeyboardNavigate(7, view, e, this.max, this.min);
                     }
                     else {
-                        this.KeyboardNavigate(4, view, e);
+                        this.KeyboardNavigate(4, view, e, this.max, this.min);
                     }
@@ -335,9 +337,10 @@ e.preventDefault();
                 case 'select':
-                    if (!ej2_base_5.isNullOrUndefined(focusedDate) || !ej2_base_5.isNullOrUndefined(selectedDate)) {
+                    var element = !ej2_base_5.isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
+                    if (!ej2_base_5.isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
                         if (levelRestrict) {
-                            var d = new Date(parseInt('' + (focusedDate || selectedDate).id, 0));
-                            this.selectDate(e, d, (focusedDate || selectedDate));
+                            var d = new Date(parseInt('' + (element).id, 0));
+                            this.selectDate(e, d, (element));
                         }
                         else {
-                            this.contentClick(null, --view, (focusedDate || selectedDate));
+                            this.contentClick(null, --view, (element));
                         }
@@ -397,4 +400,7 @@ }
             }
+            if (this.getModuleName() === 'calendar') {
+                this.table.focus();
+            }
         };
-        Calendar.prototype.KeyboardNavigate = function (number, currentView, e) {
+        Calendar.prototype.KeyboardNavigate = function (number, currentView, e, max, min) {
             var date = new Date('' + this.currentDate);
@@ -423,3 +429,3 @@ switch (currentView) {
                 case 0:
-                    this.addDay(this.currentDate, number);
+                    this.addDay(this.currentDate, number, e, max, min);
                     if (this.isMinMaxRange(this.currentDate)) {
@@ -447,9 +453,30 @@ ej2_base_4.detach(this.tableBodyElement);
         ;
+        Calendar.prototype.minMaxDate = function (localDate) {
+            var currentDate = new Date(new Date(+localDate).setHours(0, 0, 0, 0));
+            var minDate = new Date(new Date(+this.min).setHours(0, 0, 0, 0));
+            var maxDate = new Date(new Date(+this.max).setHours(0, 0, 0, 0));
+            if (+currentDate === +minDate || +currentDate === +maxDate) {
+                if (+localDate < +this.min) {
+                    localDate = new Date(+this.min);
+                }
+                if (+localDate > +this.max) {
+                    localDate = new Date(+this.max);
+                }
+            }
+            return localDate;
+        };
         Calendar.prototype.renderMonths = function (e) {
+            var numCells = this.weekNumber ? 8 : 7;
+            var tdEles = this.renderDays(this.currentDate, e);
+            this.contentHdr();
+            this.renderTemplate(tdEles, numCells, MONTH, e);
+        };
+        Calendar.prototype.renderDays = function (currentDate, e) {
             var tdEles = [];
             var cellsCount = 42;
-            var localDate = new Date('' + this.currentDate);
+            var localDate = new Date('' + currentDate);
+            var minMaxDate;
             var numCells = this.weekNumber ? 8 : 7;
             var currentMonth = localDate.getMonth();
-            this.titleUpdate(this.currentDate, 'days');
+            this.titleUpdate(currentDate, 'days');
             var d = localDate;
@@ -469,2 +496,4 @@ localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
                 }
+                minMaxDate = new Date(+localDate);
+                localDate = this.minMaxDate(localDate);
                 var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };
@@ -519,10 +548,10 @@ var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
                 else {
-                    if (this.currentDate.getDate() === localDate.getDate() && !otherMnthBool && !disabledCls) {
+                    if (currentDate.getDate() === localDate.getDate() && !otherMnthBool && !disabledCls) {
                         ej2_base_4.addClass([tdEle], FOCUSEDDATE);
                     }
                     else {
-                        if (this.currentDate >= this.max && parseInt(tdEle.id, 0) === +this.max && !otherMnthBool && !disabledCls) {
+                        if (currentDate >= this.max && parseInt(tdEle.id, 0) === +this.max && !otherMnthBool && !disabledCls) {
                             ej2_base_4.addClass([tdEle], FOCUSEDDATE);
                         }
-                        if (this.currentDate <= this.min && parseInt(tdEle.id, 0) === +this.min && !otherMnthBool && !disabledCls) {
+                        if (currentDate <= this.min && parseInt(tdEle.id, 0) === +this.min && !otherMnthBool && !disabledCls) {
                             ej2_base_4.addClass([tdEle], FOCUSEDDATE);
@@ -539,6 +568,6 @@ }
                 tdEles.push(tdEle);
-                this.addDay(localDate, 1);
+                localDate = new Date(+minMaxDate);
+                this.addDay(localDate, 1, null, this.max, this.min);
             }
-            this.contentHdr();
-            this.renderTemplate(tdEles, numCells, MONTH, e);
+            return tdEles;
         };
@@ -643,3 +672,12 @@ Calendar.prototype.renderYears = function (e) {
         Calendar.prototype.firstDay = function (date) {
-            return new Date(date.getFullYear(), date.getMonth());
+            var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');
+            if (collection.length) {
+                for (var i = 0; i < collection.length; i++) {
+                    if (!collection[i].classList.contains(DISABLED)) {
+                        date = new Date(parseInt(collection[i].id, 0));
+                        break;
+                    }
+                }
+            }
+            return date;
         };
@@ -652,5 +690,20 @@ Calendar.prototype.lastDay = function (date) {
             }
-            return lastDate;
+            return this.findlastDay(lastDate);
         };
         ;
+        Calendar.prototype.checkDateValue = function (value) {
+            return (!ej2_base_5.isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
+        };
+        Calendar.prototype.findlastDay = function (date) {
+            var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');
+            if (collection.length) {
+                for (var i = collection.length - 1; i >= 0; i--) {
+                    if (!collection[i].classList.contains(DISABLED)) {
+                        date = new Date(parseInt(collection[i].id, 0));
+                        break;
+                    }
+                }
+            }
+            return date;
+        };
         Calendar.prototype.removeTheadEle = function () {
@@ -801,2 +854,3 @@ if (this.getModuleName() === 'calendar') {
                     case 'value':
+                        this.setProperties({ value: new Date('' + newProp.value) }, true);
                         if (isNaN(+this.value)) {
@@ -834,2 +888,4 @@ this.setProperties({ value: oldProp.value }, true);
                     case 'max':
+                        prop === 'min' ? this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true) :
+                            this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);
                         this.setProperties({ start: this.currentView() }, true);
@@ -1038,3 +1094,4 @@ ej2_base_4.detach(this.tableBodyElement);
             var date = this.globalize.parseDate(dateString, dateFormatOptions);
-            return this.globalize.parseDate(dateString, dateFormatOptions);
+            var value = date.valueOf() - date.valueOf() % 1000;
+            return new Date(value);
         };
@@ -1155,5 +1212,39 @@ Calendar.prototype.selectDate = function (e, date, element) {
         };
-        Calendar.prototype.addDay = function (date, i) {
-            date.setDate(date.getDate() + i);
+        Calendar.prototype.addDay = function (date, i, e, max, min) {
+            var column = i;
+            var value = new Date(+date);
+            if (!ej2_base_5.isNullOrUndefined(this.tableBodyElement) && !ej2_base_5.isNullOrUndefined(e)) {
+                while (this.findNextTD(new Date(+date), column, max, min)) {
+                    column += i;
+                }
+                var rangeValue = new Date(value.setDate(value.getDate() + column));
+                column = (+rangeValue > +max || +rangeValue < +min) ? column === i ? i - i : i : column;
+            }
+            date.setDate(date.getDate() + column);
         };
+        Calendar.prototype.findNextTD = function (date, column, max, min) {
+            var value = new Date(date.setDate(date.getDate() + column));
+            var collection = [];
+            var isDisabled = false;
+            if ((!ej2_base_5.isNullOrUndefined(value) && value.getMonth()) !== (!ej2_base_5.isNullOrUndefined(this.currentDate) && this.currentDate.getMonth())) {
+                var tdEles = this.renderDays(value, null);
+                collection = tdEles.filter(function (ele) {
+                    return ele.classList.contains(DISABLED);
+                });
+            }
+            else {
+                collection = this.tableBodyElement.querySelectorAll('td.' + DISABLED);
+            }
+            if (+value <= (+(max)) && +value >= (+(min))) {
+                if (collection.length) {
+                    for (var i = 0; i < collection.length; i++) {
+                        isDisabled = (+value === +new Date(parseInt(collection[i].id, 0))) ? true : false;
+                        if (isDisabled) {
+                            break;
+                        }
+                    }
+                }
+            }
+            return isDisabled;
+        };
         Calendar.prototype.getMaxDays = function (d) {
@@ -1160,0 +1251,0 @@ var date;

src/datepicker/datepicker.js

@@ -124,5 +124,8 @@ var __extends = (this && this.__extends) || (function () {
             if (+new Date('' + this.value)) {
-                var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
-                var dateString = this.globalize.formatDate(this.value, dateOptions);
-                this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);
+                if (typeof this.value === 'string') {
+                    this.value = this.checkDateValue(new Date('' + this.value));
+                    var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+                    var dateString = this.globalize.formatDate(this.value, dateOptions);
+                    this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);
+                }
             }
@@ -300,10 +303,21 @@ if (this.strictMode) {
         DatePicker.prototype.strictModeUpdate = function () {
-            var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+            var format = ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.format.replace('dd', 'd');
+            if (!ej2_base_4.isNullOrUndefined(format)) {
+                var len = format.split('M').length - 1;
+                if (len < 3) {
+                    format = format.replace('MM', 'M');
+                }
+            }
+            var dateOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
             var date = this.globalize.parseDate(this.inputEle.value, dateOptions);
             if (this.strictMode && date) {
                 ej2_inputs_1.Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputEle, this.floatLabelType, false);
-                this.setProperties({ value: date }, true);
+                if (this.inputEle.value !== this.previousEleValue) {
+                    this.setProperties({ value: date }, true);
+                }
             }
             else if (!this.strictMode) {
-                this.setProperties({ value: date }, true);
+                if (this.inputEle.value !== this.previousEleValue) {
+                    this.setProperties({ value: date }, true);
+                }
             }
@@ -316,2 +330,5 @@ if (this.strictMode && !date && this.inputEle.value === '') {
             }
+            if (ej2_base_4.isNullOrUndefined(this.value)) {
+                this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
+            }
         };
@@ -349,3 +366,2 @@ DatePicker.prototype.createCalendar = function () {
                     }
-                    ej2_base_1.EventHandler.add(document, 'mousedown touchstart', _this.documentHandler, _this);
                 }, close: function () {
@@ -361,3 +377,2 @@ if (!ej2_base_2.Browser.isDevice) {
                     }
-                    ej2_base_1.EventHandler.remove(document, 'mousedown touchstart', _this.documentHandler);
                     if (_this.value) {
@@ -377,2 +392,3 @@ _this.disabledDates();
                 document.body.className += ' ' + OVERFLOW;
+                this.modal.style.display = 'block';
             }
@@ -441,5 +457,2 @@ };
         DatePicker.prototype.show = function () {
-            var args = {
-                popupElement: this.popupObj
-            };
             var prevent = true;
@@ -455,2 +468,5 @@ if (!this.isCalendar()) {
             };
+            var args = {
+                popupElement: this.popupObj
+            };
             ej2_base_4.merge(args, this.preventArgs);
@@ -468,5 +484,2 @@ this.trigger('open', args);
                 this.setAriaAttributes();
-                if (ej2_base_2.Browser.isDevice) {
-                    this.modal.style.display = 'block';
-                }
             }
@@ -478,2 +491,3 @@ else {
             }
+            ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
         };
@@ -510,2 +524,3 @@ DatePicker.prototype.hide = function () {
             }
+            ej2_base_1.EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);
         };
@@ -582,2 +597,3 @@ DatePicker.prototype.focusIn = function () {
             this.globalize = new ej2_base_1.Internationalization(this.locale);
+            var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
             var attributes = ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
@@ -615,3 +631,4 @@ for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
                             if (!this.value) {
-                                this.setProperties(ej2_base_4.setValue(prop, this.globalize.parseDate(this.inputEle.getAttribute(prop)), {}), true);
+                                var value = this.inputEle.getAttribute(prop);
+                                this.setProperties(ej2_base_4.setValue(prop, this.globalize.parseDate(value, options), {}), true);
                             }
@@ -648,3 +665,6 @@ break;
                 if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {
-                    this.setProperties({ 'value': null }, true);
+                    if (!this.strictMode) {
+                        this.setProperties({ 'value': null }, true);
+                        this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
+                    }
                 }
@@ -678,2 +698,3 @@ }
         DatePicker.prototype.onPropertyChanged = function (newProp, oldProp) {
+            var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -683,2 +704,6 @@ var prop = _a[_i];
                     case 'value':
+                        if (typeof newProp.value === 'string') {
+                            newProp.value = this.globalize.parseDate(newProp.value, options);
+                        }
+                        this.setProperties({ value: newProp.value }, true);
                         this.previousEleValue = this.inputEle.value;
@@ -685,0 +710,0 @@ if (ej2_base_4.isNullOrUndefined(this.value)) {

src/daterangepicker/daterangepicker-builder.d.ts

@@ -12,3 +12,3 @@ import{DateRangePicker} from "./daterangepicker";
 	/**
-	* Triggers when the date range value is changed.
+	* Triggers when the date range value is changed in DateRangePicker.
 	*/
@@ -21,11 +21,11 @@ change(value:Function): BuilderProperties;
 	/**
-	* Triggers when the DateRangePicker is created
+	* Triggers when the DateRangePicker is created.
 	*/
 	created(value:Function): BuilderProperties;
 	/**
-	* Triggers when the Component is destroyed.
+	* Triggers when the DateRangePicker is destroyed.
 	*/
 	destroyed(value:Function): BuilderProperties;
 	/**
-	* Triggers when the popup is opened.
+	* Triggers when the DateRangePicker is opened.
 	*/
@@ -38,7 +38,7 @@ open(value:Function): BuilderProperties;
 	/**
-	* Triggers when the date range is selected.
+	* Triggers when the date range is selected successfully in DateRangePicker.
 	*/
 	select(value:Function): BuilderProperties;
 	/**
-	*  Specifies the root CSS class that need to be added in the root element which allows you to customize the UI appearance.
+	*  Sets the root CSS class to the DateRangePicker that allows you to customize the appearance.
 	*/
@@ -55,7 +55,7 @@ cssClass(value:string): BuilderProperties;
 	/**
-	* Specifies the component to be inactive and prevents the DateRangePicker from user interactions.
+	* Specifies the component to be disabled that prevents the DateRangePicker from user interactions.
 	*/
 	enabled(value:boolean): BuilderProperties;
 	/**
-	* Gets or sets the end date of the range.
+	* Gets or sets the end date of the date range selection.
 	*/
@@ -68,3 +68,3 @@ endDate(value:Date): BuilderProperties;
 	/**
-	* Specifies the date format to the start and end date strings.
+	* Sets or gets the required date format to the start and end date string.
 	*/
@@ -82,3 +82,3 @@ format(value:string): BuilderProperties;
 	/**
-	*  Specifies the maximum span that can be allowed in a range selection.
+	*  Specifies the maximum span that can be allowed in a date range selection.
 	*/
@@ -91,23 +91,23 @@ maxDays(value:number): BuilderProperties;
 	/**
-	*  Specifies the minimum span that can be allowed in a range selection.
+	*  Specifies the minimum span that can be allowed in a date range selection.
 	*/
 	minDays(value:number): BuilderProperties;
 	/**
-	* Specifies the placeholder text that need to be displayed in the textbox.
+	* Specifies the placeholder text that is displayed in the DateRangePicker component.
 	*/
 	placeholder(value:string): BuilderProperties;
 	/**
-	* Denies the manual edit to the ranges.
+	* Denies editing the ranges in the DateRangePicker component.
 	*/
 	readonly(value:boolean): BuilderProperties;
 	/**
-	* Specifies the string value between the start and end date string in the range value.
+	* Gets or sets the string that is used between the start and end date string.
 	*/
 	separator(value:string): BuilderProperties;
 	/**
-	* Gets or sets the start date of the range.
+	* Gets or sets the start date of the date range selection.
 	*/
 	startDate(value:Date): BuilderProperties;
 	/**
-	* Lets the component to act as strict which allows entering only a valid date range in a DateRangePicker.
+	* Specifies the component to act as strict that allows to enter only a valid date range in a DateRangePicker.
 	*/
@@ -121,5 +121,5 @@ strictMode(value:boolean): BuilderProperties;
 	/**
-	* Gets or sets the width of the textbox.
+	* Specifies the width of the DateRangePicker component.
 	*/
 	width(value:number|string): BuilderProperties;
 }

src/daterangepicker/daterangepicker-model.d.ts

@@ -11,3 +11,3 @@ import { Property, EventHandler, CreateBuilder, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, Event, EmitType, Browser, L10n } from '@syncfusion/ej2-base';import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, setValue, rippleEffect, getValue, merge, extend } from '@syncfusion/ej2-base';import { CalendarView, Calendar, NavigatedEventArgs, RenderDayCellEventArgs } from '../calendar/calendar';import { Popup } from '@syncfusion/ej2-popups';import { Button } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';import { DateRangePickerHelper } from './daterangepicker-builder';
     /**
-     * Gets or sets the start date of the range.
+     * Gets or sets the start date of the date range selection.
      * @default null
@@ -18,4 +18,4 @@ */
     /**
-     * Gets or sets the end date of the range.
-     * @default null
+     * Gets or sets the end date of the date range selection.
+     * @default null.
      */
@@ -25,4 +25,4 @@ endDate?: Date;
     /**
-     * Provides an option to set the predefined ranges in a popup container.  
-     * @default null
+     * Sets the predefined ranges to pick the required range easily in a component.
+     * @default null.
      */
@@ -32,4 +32,4 @@ presets?: PresetsArgs[];
     /**
-     * Gets or sets the width of the textbox.
-     * @default ''
+     * Specifies the width of the DateRangePicker component.
+     * @default ''.
      */
@@ -39,4 +39,4 @@ width?: number | string;
     /**
-     *  Specifies the root CSS class that need to be added in the root element which allows you to customize the UI appearance.
-     * @default ''    
+     *  Sets the root CSS class to the DateRangePicker that allows you to customize the appearance.
+     * @default ''.   
      */
@@ -46,4 +46,4 @@ cssClass?: string;
     /**
-     * Specifies the string value between the start and end date string in the range value. 
-     * @default '-'
+     * Gets or sets the string that is used between the start and end date string.
+     * @default '-'.
      */
@@ -53,4 +53,4 @@ separator?: string;
     /**
-     *  Specifies the minimum span that can be allowed in a range selection.
-     * @default null    
+     *  Specifies the minimum span that can be allowed in a date range selection.
+     * @default null.
      */
@@ -60,4 +60,4 @@ minDays?: number;
     /**
-     *  Specifies the maximum span that can be allowed in a range selection.
-     * @default null
+     *  Specifies the maximum span that can be allowed in a date range selection.
+     * @default null.
      */
@@ -67,4 +67,4 @@ maxDays?: number;
     /**
-     * Lets the component to act as strict which allows entering only a valid date range in a DateRangePicker.
-     * @default false
+     * Specifies the component to act as strict that allows to enter only a valid date range in a DateRangePicker.
+     * @default false.
      */
@@ -74,4 +74,4 @@ strictMode?: boolean;
     /**
-     * Specifies the date format to the start and end date strings.
-     * @default null
+     * Sets or gets the required date format to the start and end date string.
+     * @default null.
      */
@@ -81,4 +81,4 @@ format?: string;
     /**
-     * Specifies the component to be inactive and prevents the DateRangePicker from user interactions. 
-     * @default true
+     * Specifies the component to be disabled that prevents the DateRangePicker from user interactions.
+     * @default true.
      */
@@ -88,4 +88,4 @@ enabled?: boolean;
     /**
-     * Denies the manual edit to the ranges. 
-     * @default false
+     * Denies editing the ranges in the DateRangePicker component.
+     * @default false.
      */
@@ -95,4 +95,4 @@ readonly?: boolean;
     /**
-     * Specifies the placeholder text that need to be displayed in the textbox.
-     * @default ''
+     * Specifies the placeholder text that is displayed in the DateRangePicker component.
+     * @default ''.
      */
@@ -104,3 +104,3 @@ placeholder?: string;
      * With the help of this property, initial view can be changed to year or decade view.
-     * @default month
+     * @default month.
      * @hidden
@@ -113,3 +113,3 @@ */
      * Depth view should be smaller than the start view to restrict its view navigation.
-     * @default month
+     * @default month.
      * @hidden
@@ -121,3 +121,3 @@ */
      * Gets or sets the selected date of the Calendar
-     * @default null
+     * @default null.
      * @hidden
@@ -128,3 +128,3 @@ */
     /**
-     * Triggers when the DateRangePicker is created
+     * Triggers when the DateRangePicker is created.
      * @event 
@@ -135,3 +135,3 @@ */
     /**
-     * Triggers when the Component is destroyed.
+     * Triggers when the DateRangePicker is destroyed.
      * @event 
@@ -142,3 +142,3 @@ */
     /**
-     * Triggers when the popup is opened.
+     * Triggers when the DateRangePicker is opened.
      * @event 
@@ -155,3 +155,3 @@ */
     /**
-     * Triggers when the date range value is changed.
+     * Triggers when the date range value is changed in DateRangePicker.
      * @event 
@@ -169,3 +169,3 @@ */
     /**
-     * Triggers when the date range is selected.
+     * Triggers when the date range is selected successfully in DateRangePicker.
      * @event 
@@ -172,0 +172,0 @@ */

src/daterangepicker/daterangepicker.d.ts

@@ -33,4 +33,4 @@ /// <reference path="../calendar/calendar-model.d.ts" />
 /**
- * Represents the DateRangePicker component that allows user to select the date range from the calendar
- * or entering the range through the input element.
+ * Represents the DateRangePicker component that allows to select the date range from the calendar
+ * or entering range through the input element.
  * ```html
@@ -90,2 +90,3 @@ * <input id="daterangepicker"/>
     private isRangeIconClicked;
+    private isMaxDaysClicked;
     private popupKeyboardModule;
@@ -100,3 +101,3 @@ private presetKeyboardModule;
     /**
-     * Gets or sets the start date of the range.
+     * Gets or sets the start date of the date range selection.
      * @default null
@@ -106,59 +107,59 @@ */
     /**
-     * Gets or sets the end date of the range.
-     * @default null
+     * Gets or sets the end date of the date range selection.
+     * @default null.
      */
     endDate: Date;
     /**
-     * Provides an option to set the predefined ranges in a popup container.
-     * @default null
+     * Sets the predefined ranges to pick the required range easily in a component.
+     * @default null.
      */
     presets: PresetsArgs[];
     /**
-     * Gets or sets the width of the textbox.
-     * @default ''
+     * Specifies the width of the DateRangePicker component.
+     * @default ''.
      */
     width: number | string;
     /**
-     *  Specifies the root CSS class that need to be added in the root element which allows you to customize the UI appearance.
-     * @default ''
+     *  Sets the root CSS class to the DateRangePicker that allows you to customize the appearance.
+     * @default ''.
      */
     cssClass: string;
     /**
-     * Specifies the string value between the start and end date string in the range value.
-     * @default '-'
+     * Gets or sets the string that is used between the start and end date string.
+     * @default '-'.
      */
     separator: string;
     /**
-     *  Specifies the minimum span that can be allowed in a range selection.
-     * @default null
+     *  Specifies the minimum span that can be allowed in a date range selection.
+     * @default null.
      */
     minDays: number;
     /**
-     *  Specifies the maximum span that can be allowed in a range selection.
-     * @default null
+     *  Specifies the maximum span that can be allowed in a date range selection.
+     * @default null.
      */
     maxDays: number;
     /**
-     * Lets the component to act as strict which allows entering only a valid date range in a DateRangePicker.
-     * @default false
+     * Specifies the component to act as strict that allows to enter only a valid date range in a DateRangePicker.
+     * @default false.
      */
     strictMode: boolean;
     /**
-     * Specifies the date format to the start and end date strings.
-     * @default null
+     * Sets or gets the required date format to the start and end date string.
+     * @default null.
      */
     format: string;
     /**
-     * Specifies the component to be inactive and prevents the DateRangePicker from user interactions.
-     * @default true
+     * Specifies the component to be disabled that prevents the DateRangePicker from user interactions.
+     * @default true.
      */
     enabled: boolean;
     /**
-     * Denies the manual edit to the ranges.
-     * @default false
+     * Denies editing the ranges in the DateRangePicker component.
+     * @default false.
      */
     readonly: boolean;
     /**
-     * Specifies the placeholder text that need to be displayed in the textbox.
-     * @default ''
+     * Specifies the placeholder text that is displayed in the DateRangePicker component.
+     * @default ''.
      */
@@ -169,3 +170,3 @@ placeholder: string;
      * With the help of this property, initial view can be changed to year or decade view.
-     * @default month
+     * @default month.
      * @hidden
@@ -177,3 +178,3 @@ */
      * Depth view should be smaller than the start view to restrict its view navigation.
-     * @default month
+     * @default month.
      * @hidden
@@ -184,3 +185,3 @@ */
      * Gets or sets the selected date of the Calendar
-     * @default null
+     * @default null.
      * @hidden
@@ -190,3 +191,3 @@ */
     /**
-     * Triggers when the DateRangePicker is created
+     * Triggers when the DateRangePicker is created.
      * @event
@@ -196,3 +197,3 @@ */
     /**
-     * Triggers when the Component is destroyed.
+     * Triggers when the DateRangePicker is destroyed.
      * @event
@@ -202,3 +203,3 @@ */
     /**
-     * Triggers when the popup is opened.
+     * Triggers when the DateRangePicker is opened.
      * @event
@@ -213,3 +214,3 @@ */
     /**
-     * Triggers when the date range value is changed.
+     * Triggers when the date range value is changed in DateRangePicker.
      * @event
@@ -225,3 +226,3 @@ */
     /**
-     * Triggers when the date range is selected.
+     * Triggers when the date range is selected successfully in DateRangePicker.
      * @event
@@ -353,3 +354,3 @@ */
     /**
-     * To destroy the widget.
+     * Destroys the widget.
      * @returns void
@@ -360,3 +361,3 @@ */
      * To get component name
-     * @returns string
+     * @returns string.
      * @private
@@ -366,13 +367,13 @@ */
     /**
-     * Return the properties that are maintained upon browser refresh.
-     * @returns string
+     * Returns the properties that are maintained upon browser refresh.
+     * @returns string.
      */
     getPersistData(): string;
     /**
-     * Return the selected range and day span in the DateRangePicker.
-     * @returns Object
+     * Returns the selected range and day span in the DateRangePicker.
+     * @returns Object.
      */
     getSelectedRange(): Object;
     /**
-     * To open the Popup.
+     * Opens the Popup container in the DateRangePicker component.
      * @returns void
@@ -382,3 +383,3 @@ */
     /**
-     * To close the Popup.
+     * Closes the Popup container in the DateRangePicker component.
      * @returns void
@@ -385,0 +386,0 @@ */

src/timepicker/timepicker-builder.d.ts

@@ -20,3 +20,3 @@ import{TimePicker} from "./timepicker";
 	/**
-	* Triggers when the popup gets close.
+	* Triggers when the popup is closed.
 	*/
@@ -33,7 +33,7 @@ close(value:Function): BuilderProperties;
 	/**
-	* Triggers when the control gets focus.
+	* Triggers when the control gets focused.
 	*/
 	focus(value:Function): BuilderProperties;
 	/**
-	* Triggers when the popup gets open.
+	* Triggers when the popup is opened.
 	*/
@@ -51,7 +51,7 @@ open(value:Function): BuilderProperties;
 	/**
-	* Specifies the component to be rendered in right to left direction.
+	* Specifies the component to be rendered in right-to-left direction.
 	*/
 	enableRtl(value:boolean): BuilderProperties;
 	/**
-	* Specifies the component to be disabled or not.
+	* Specifies whether the component to be disabled or not.
 	*/
@@ -64,3 +64,3 @@ enabled(value:boolean): BuilderProperties;
 	/**
-	* Specifies the format of the value that to be displayed in component. By default, the format is
+	* Specifies the format of value that is to be displayed in component. By default, the format is
 based on the culture.
@@ -83,3 +83,3 @@ */
 	/**
-	* Specifies the placeholder text that displayed in textbox.
+	* Specifies the placeholder text that is displayed in textbox.
 	*/
@@ -96,8 +96,8 @@ placeholder(value:string): BuilderProperties;
 	/**
-	* Specifies the component to act as strict. So that, it allows to enter only a valid time value within a specified range or else it
-will resets to previous value. By default, strictMode is in false.
+	* Specifies the component to act as strict so that, it allows to enter only a valid time value within a specified range or else
+resets to previous value. By default, strictMode is in false.
 	*/
 	strictMode(value:boolean): BuilderProperties;
 	/**
-	* Gets or sets the value of the component. The value is parsed based on format.
+	* Gets or sets the value of the component. The value is parsed based on the format.
 	*/
@@ -104,0 +104,0 @@ value(value:Date): BuilderProperties;

src/timepicker/timepicker-model.d.ts

@@ -24,4 +24,4 @@ import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, AnimationModel, Browser } from '@syncfusion/ej2-base';import { EmitType, Event, cldrData, L10n, Component, getDefaultDateObject, rippleEffect, RippleOptions } from '@syncfusion/ej2-base';import { createElement, remove, addClass, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, getUniqueID } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
     /**
-     * Specifies the component to act as strict. So that, it allows to enter only a valid time value within a specified range or else it 
-     * will resets to previous value. By default, strictMode is in false.
+     * Specifies the component to act as strict so that, it allows to enter only a valid time value within a specified range or else 
+     * resets to previous value. By default, strictMode is in false.
      * @default false
@@ -32,3 +32,3 @@ */
     /**
-     * Specifies the format of the value that to be displayed in component. By default, the format is
+     * Specifies the format of value that is to be displayed in component. By default, the format is
      * based on the culture. 
@@ -40,3 +40,3 @@ * @default null
     /**
-     * Specifies the component to be disabled or not.
+     * Specifies whether the component to be disabled or not.
      * @default true
@@ -58,3 +58,3 @@ */
     /**
-     * Specifies the placeholder text that displayed in textbox.
+     * Specifies the placeholder text that is displayed in textbox.
      * @default null
@@ -71,3 +71,3 @@ */
     /**
-     * Gets or sets the value of the component. The value is parsed based on format. 
+     * Gets or sets the value of the component. The value is parsed based on the format. 
      * @default null
@@ -90,3 +90,3 @@ */
     /**
-     * Specifies the component to be rendered in right to left direction.
+     * Specifies the component to be rendered in right-to-left direction.
      * @default false
@@ -115,3 +115,3 @@ */
     /**
-     * Triggers when the popup gets open.
+     * Triggers when the popup is opened.
      * @event
@@ -122,3 +122,3 @@ */
     /**
-     * Triggers when the popup gets close.
+     * Triggers when the popup is closed.
      * @event
@@ -135,3 +135,3 @@ */
     /**
-     * Triggers when the control gets focus.
+     * Triggers when the control gets focused.
      * @event
@@ -138,0 +138,0 @@ */

src/timepicker/timepicker.d.ts

@@ -8,3 +8,3 @@ import { Internationalization } from '@syncfusion/ej2-base';
 export interface ChangeEventArgs {
-    /** Defines the boolean which returns true when the value changed by user interaction otherwise returns false */
+    /** Defines the boolean that returns true when the value is changed by user interaction, otherwise returns false. */
     isInteracted: boolean;
@@ -36,3 +36,3 @@ /** Defines the selected time value of the TimePicker. */
  * TimePicker is an intuitive interface control which provides an options to select a time value
- * from popup list or set a desired time value.
+ * from popup list or to set a desired time value.
  * ```
@@ -67,2 +67,3 @@ * <input id='timepicker' type='text'/>
     protected isPreventBlur: boolean;
+    private isTextSelected;
     private prevValue;
@@ -91,4 +92,4 @@ private inputStyle;
     /**
-     * Specifies the component to act as strict. So that, it allows to enter only a valid time value within a specified range or else it
-     * will resets to previous value. By default, strictMode is in false.
+     * Specifies the component to act as strict so that, it allows to enter only a valid time value within a specified range or else
+     * resets to previous value. By default, strictMode is in false.
      * @default false
@@ -98,3 +99,3 @@ */
     /**
-     * Specifies the format of the value that to be displayed in component. By default, the format is
+     * Specifies the format of value that is to be displayed in component. By default, the format is
      * based on the culture.
@@ -105,3 +106,3 @@ * @default null
     /**
-     * Specifies the component to be disabled or not.
+     * Specifies whether the component to be disabled or not.
      * @default true
@@ -120,3 +121,3 @@ */
     /**
-     * Specifies the placeholder text that displayed in textbox.
+     * Specifies the placeholder text that is displayed in textbox.
      * @default null
@@ -131,3 +132,3 @@ */
     /**
-     * Gets or sets the value of the component. The value is parsed based on format.
+     * Gets or sets the value of the component. The value is parsed based on the format.
      * @default null
@@ -147,3 +148,3 @@ */
     /**
-     * Specifies the component to be rendered in right to left direction.
+     * Specifies the component to be rendered in right-to-left direction.
      * @default false
@@ -168,3 +169,3 @@ */
     /**
-     * Triggers when the popup gets open.
+     * Triggers when the popup is opened.
      * @event
@@ -174,3 +175,3 @@ */
     /**
-     * Triggers when the popup gets close.
+     * Triggers when the popup is closed.
      * @event
@@ -185,3 +186,3 @@ */
     /**
-     * Triggers when the control gets focus.
+     * Triggers when the control gets focused.
      * @event
@@ -218,3 +219,2 @@ */
     private selectInputText();
-    private getSelectionDetails();
     private getMeridianText();
@@ -225,3 +225,2 @@ private getCursorSelection();
     private setWidth();
-    private currentTimeElement(value);
     private setScrollPosition();
@@ -239,2 +238,3 @@ private getText();
     private mouseUpHandler(event);
+    private focusSelection();
     private inputHandler(event);
@@ -290,3 +290,3 @@ private onMouseClick(event);
     /**
-     * To focus out the TimePicker textbox element.
+     * Focuses out the TimePicker textbox element.
      * @returns void
@@ -297,3 +297,3 @@ */
     /**
-     * To focus the TimePicker textbox element.
+     * Focused the TimePicker textbox element.
      * @returns void
@@ -303,3 +303,3 @@ */
     /**
-     * Hide the TimePicker popup.
+     * Hides the TimePicker popup.
      * @returns void
@@ -309,3 +309,3 @@ */
     /**
-     * To open the popup for show the list items.
+     * Opens the popup to show the list items.
      * @returns void
@@ -315,3 +315,3 @@ */
     /**
-     * To get the properties to be maintained upon browser refresh.
+     * Gets the properties to be maintained upon browser refresh.
      * @returns string
@@ -318,0 +318,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

15113026

increased by0.72%

Lines of code

149102

increased by0.61%

Dependency changes

• + Added@syncfusion/ej2-base@15.4.23(transitive)

• + Added@syncfusion/ej2-buttons@15.4.30(transitive)

• + Added@syncfusion/ej2-data@15.4.30(transitive)

• + Added@syncfusion/ej2-inputs@15.4.29(transitive)

• + Added@syncfusion/ej2-lists@15.4.26(transitive)

• + Added@syncfusion/ej2-popups@15.4.27(transitive)

• - Removed@syncfusion/ej2-base@1.0.25(transitive)

• - Removed@syncfusion/ej2-buttons@1.0.25(transitive)

• - Removed@syncfusion/ej2-data@1.0.19(transitive)

• - Removed@syncfusion/ej2-inputs@1.0.22(transitive)

• - Removed@syncfusion/ej2-lists@1.0.19(transitive)

• - Removed@syncfusion/ej2-popups@1.0.22(transitive)

• Updated@syncfusion/ej2-base@^15.4.17

• Updated@syncfusion/ej2-buttons@^15.4.17

• Updated@syncfusion/ej2-inputs@^15.4.17

• Updated@syncfusion/ej2-lists@^15.4.17

• Updated@syncfusion/ej2-popups@^15.4.17