@syncfusion/ej2-calendars - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

dist/es6/calendar/calendar.js

@@ -20,5 +20,6 @@ var __extends = (this && this.__extends) || (function () {
 import { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';
-import { createElement, removeClass, detach, addClass, attributes } from '@syncfusion/ej2-base';
+import { createElement, removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';
 var ROOT = 'e-calendar';
+var DEVICE = 'e-device';
 var HEADER = 'e-header';
@@ -56,2 +57,3 @@ var RTL = 'e-rtl';
         _this.effect = '';
+        _this.disabledDays = [];
         _this.keyConfigs = {
@@ -83,2 +85,5 @@ controlUp: 'ctrl+38',
             }
+            if (Browser.isDevice) {
+                this.element.classList.add(DEVICE);
+            }
             attributes(this.element, {
@@ -94,2 +99,5 @@ 'data-role': 'calendar'
             }
+            if (Browser.isDevice) {
+                this.calendarElement.classList.add(DEVICE);
+            }
             attributes(this.calendarElement, {
@@ -166,35 +174,31 @@ 'role': 'calendar'
         };
-        this.headerEle = createElement('div', { className: HEADER });
+        this.headerElement = createElement('div', { className: HEADER });
         var iconContainer = createElement('div', { className: ICONCONTAINER });
-        this.prevIcon = createElement('a', { className: '' + PREVICON });
-        if (!Browser.isIos && !Browser.isIos7 && !Browser.isIE) {
-            rippleEffect(this.prevIcon, {
-                duration: 400,
-                selector: '.e-prev',
-                isCenterRipple: true
-            });
-        }
-        attributes(this.prevIcon, ariaPrevAttrs);
+        this.previousIcon = createElement('a', { className: '' + PREVICON });
+        rippleEffect(this.previousIcon, {
+            duration: 400,
+            selector: '.e-prev',
+            isCenterRipple: true
+        });
+        attributes(this.previousIcon, ariaPrevAttrs);
         this.nextIcon = createElement('a', { className: '' + NEXTICON });
-        if (!Browser.isIos && !Browser.isIos7 && !Browser.isIE) {
-            rippleEffect(this.nextIcon, {
-                selector: '.e-next',
-                duration: 400,
-                isCenterRipple: true
-            });
-        }
+        rippleEffect(this.nextIcon, {
+            selector: '.e-next',
+            duration: 400,
+            isCenterRipple: true
+        });
         attributes(this.nextIcon, ariaNextAttrs);
-        this.hdrTitleEle = createElement('a', { className: '' + LINK + ' ' + TITLE, attrs: {} });
-        attributes(this.hdrTitleEle, ariaTitleAttrs);
-        this.headerEle.appendChild(this.hdrTitleEle);
-        this.prevIcon.appendChild(createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
+        this.headerTitleElement = createElement('a', { className: '' + LINK + ' ' + TITLE, attrs: {} });
+        attributes(this.headerTitleElement, ariaTitleAttrs);
+        this.headerElement.appendChild(this.headerTitleElement);
+        this.previousIcon.appendChild(createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
         this.nextIcon.appendChild(createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
-        iconContainer.appendChild(this.prevIcon);
+        iconContainer.appendChild(this.previousIcon);
         iconContainer.appendChild(this.nextIcon);
-        this.headerEle.appendChild(iconContainer);
+        this.headerElement.appendChild(iconContainer);
         if (this.getModuleName() === 'calendar') {
-            this.element.appendChild(this.headerEle);
+            this.element.appendChild(this.headerElement);
         }
         else {
-            this.calendarElement.appendChild(this.headerEle);
+            this.calendarElement.appendChild(this.headerElement);
         }
@@ -204,11 +208,11 @@ };
         this.previousDate = this.value;
-        this.contentEle = createElement('div', { className: CONTENT });
+        this.contentElement = createElement('div', { className: CONTENT });
         this.table = createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });
         if (this.getModuleName() === 'calendar') {
-            this.element.appendChild(this.contentEle);
+            this.element.appendChild(this.contentElement);
         }
         else {
-            this.calendarElement.appendChild(this.contentEle);
+            this.calendarElement.appendChild(this.contentElement);
         }
-        this.contentEle.appendChild(this.table);
+        this.contentElement.appendChild(this.table);
         this.contentHdr();
@@ -249,3 +253,3 @@ this.contentBody();
         }
-        this.theadEle = createElement('thead', { className: WEEKHEADER });
+        this.tableHeadElement = createElement('thead', { className: WEEKHEADER });
         if (this.weekNumber) {
@@ -259,4 +263,4 @@ html += '<th class="e-week-number"></th>';
         html = '<tr>' + html + '</tr>';
-        this.theadEle.innerHTML = html;
-        this.table.appendChild(this.theadEle);
+        this.tableHeadElement.innerHTML = html;
+        this.table.appendChild(this.tableHeadElement);
     };
@@ -286,3 +290,3 @@ Calendar.prototype.contentBody = function () {
     Calendar.prototype.wireEvents = function () {
-        EventHandler.add(this.hdrTitleEle, 'click', this.navTitle, this);
+        EventHandler.add(this.headerTitleElement, 'click', this.navTitle, this);
         if (this.getModuleName() === 'calendar') {
@@ -305,4 +309,4 @@ this.keyboardModule = new KeyboardEvents(this.element, {
         var view = this.getViewNumber(this.currentView());
-        var focusedDate = this.tbodyEle.querySelector('tr td.e-focused-date');
-        var selectedDate = this.tbodyEle.querySelector('tr td.e-selected');
+        var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
         var depthValue = this.getViewNumber(this.depth);
@@ -361,3 +365,3 @@ var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
                 this.currentDate = this.firstDay(this.currentDate);
-                detach(this.tbodyEle);
+                detach(this.tableBodyElement);
                 this.renderMonths(e);
@@ -368,3 +372,3 @@ e.preventDefault();
                 this.currentDate = this.lastDay(this.currentDate);
-                detach(this.tbodyEle);
+                detach(this.tableBodyElement);
                 this.renderMonths(e);
@@ -403,9 +407,9 @@ e.preventDefault();
     };
-    Calendar.prototype.KeyboardNavigate = function (num, currentView, e) {
+    Calendar.prototype.KeyboardNavigate = function (number, currentView, e) {
         var date = new Date('' + this.currentDate);
         switch (currentView) {
             case 2:
-                this.addYears(this.currentDate, num);
+                this.addYears(this.currentDate, number);
                 if (this.isMinMaxRange(this.currentDate)) {
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.renderDecades(e);
@@ -418,5 +422,5 @@ }
             case 1:
-                this.addMonths(this.currentDate, num);
+                this.addMonths(this.currentDate, number);
                 if (this.isMinMaxRange(this.currentDate)) {
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.renderYears(e);
@@ -429,5 +433,5 @@ }
             case 0:
-                this.addDay(this.currentDate, num);
+                this.addDay(this.currentDate, number);
                 if (this.isMinMaxRange(this.currentDate)) {
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.renderMonths(e);
@@ -443,2 +447,4 @@ }
         var _this = this;
+        this.navigatePreviousHandler = this.navigatePrevious.bind(this);
+        this.navigateNextHandler = this.navigateNext.bind(this);
         this.changeHandler = function (e) {
@@ -504,2 +510,5 @@ _this.triggerChange(e);
                 }
+                if (args.date.getMonth() === this.currentDate.getMonth() && args.date.getFullYear() === this.currentDate.getFullYear()) {
+                    this.disabledDays.push(new Date(+args.date));
+                }
             }
@@ -603,3 +612,3 @@ if (this.renderDaycellArg.isDisabled && !tdEle.classList.contains(SELECTED)) {
         var endHdrYr = this.globalize.formatDate(endYr, { type: 'date', skeleton: 'y' });
-        this.hdrTitleEle.textContent = startHdrYr + ' - ' + (endHdrYr);
+        this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);
         var start = new Date(localYr - (localYr % 10) - 1, 0, 1);
@@ -656,3 +665,3 @@ var startYear = start.getFullYear();
             if (!isNullOrUndefined(this.element.querySelectorAll('.e-content table thead')[0])) {
-                detach(this.theadEle);
+                detach(this.tableHeadElement);
             }
@@ -662,3 +671,3 @@ }
             if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content table thead')[0])) {
-                detach(this.theadEle);
+                detach(this.tableHeadElement);
             }
@@ -670,6 +679,6 @@ }
         var trEle;
-        this.tbodyEle = createElement('tbody');
-        this.table.appendChild(this.tbodyEle);
-        removeClass([this.contentEle, this.headerEle], [MONTH, DECADE, YEAR]);
-        addClass([this.contentEle, this.headerEle], [classNm]);
+        this.tableBodyElement = createElement('tbody');
+        this.table.appendChild(this.tableBodyElement);
+        removeClass([this.contentElement, this.headerElement], [MONTH, DECADE, YEAR]);
+        addClass([this.contentElement, this.headerElement], [classNm]);
         var weekNumCell = 41;
@@ -707,3 +716,3 @@ var numberCell = 35;
             rowIterator = rowIterator + 0;
-            this.tbodyEle.appendChild(trEle);
+            this.tableBodyElement.appendChild(trEle);
         }
@@ -746,3 +755,3 @@ this.table.querySelector('tbody').className = this.effect;
                 if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.currentDate = d;
@@ -759,3 +768,3 @@ this.effect = ZOOMIN;
                     this.effect = ZOOMIN;
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.renderMonths(e);
@@ -771,3 +780,3 @@ }
                     this.effect = ZOOMIN;
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.renderYears(e);
@@ -780,11 +789,11 @@ }
             case 0:
-                detach(this.tbodyEle);
+                detach(this.tableBodyElement);
                 this.renderMonths(e);
                 break;
             case 1:
-                detach(this.tbodyEle);
+                detach(this.tableBodyElement);
                 this.renderYears(e);
                 break;
             case 2:
-                detach(this.tbodyEle);
+                detach(this.tableBodyElement);
                 this.renderDecades(e);
@@ -839,3 +848,3 @@ }
                     this.setProperties({ start: this.currentView() }, true);
-                    detach(this.tbodyEle);
+                    detach(this.tableBodyElement);
                     this.minMaxUpdate();
@@ -853,3 +862,3 @@ this.contentBody();
     Calendar.prototype.setvalue = function () {
-        this.tbodyEle.remove();
+        this.tableBodyElement.remove();
         this.setProperties({ start: this.currentView() }, true);
@@ -862,6 +871,6 @@ this.contentBody();
             case 'days':
-                this.hdrTitleEle.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'yMMMM' });
+                this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'yMMMM' });
                 break;
             case 'months':
-                this.hdrTitleEle.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'y' });
+                this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'y' });
         }
@@ -871,4 +880,4 @@ };
         var id;
-        var focusedEle = this.tbodyEle.querySelector('tr td.e-focused-date');
-        var selectedEle = this.tbodyEle.querySelector('tr td.e-selected');
+        var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');
         var title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full' });
@@ -886,11 +895,11 @@ if (selectedEle || focusedEle) {
             case 'month':
-                this.prevIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);
+                this.previousIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);
                 this.nextIconHandler(this.compareMonth(new Date('' + this.currentDate), this.max) > -1);
                 break;
             case 'year':
-                this.prevIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);
+                this.previousIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);
                 this.nextIconHandler(this.compareYear(new Date('' + this.currentDate), this.max) > -1);
                 break;
             case 'decade':
-                this.prevIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);
+                this.previousIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);
                 this.nextIconHandler(this.compareDecade(new Date('' + this.currentDate), this.max) > -1);
@@ -906,4 +915,4 @@ }
         }
-        EventHandler.remove(this.hdrTitleEle, 'click', this.navTitle);
-        this.prevIconHandler(true);
+        EventHandler.remove(this.headerTitleElement, 'click', this.navTitle);
+        this.previousIconHandler(true);
         this.nextIconHandler(true);
@@ -952,3 +961,3 @@ this.keyboardModule.destroy();
     };
-    Calendar.prototype.navPrev = function (e) {
+    Calendar.prototype.navigatePrevious = function (e) {
         this.previous();
@@ -976,3 +985,3 @@ this.triggerNavigate(e);
     };
-    Calendar.prototype.navNext = function (eve) {
+    Calendar.prototype.navigateNext = function (eve) {
         this.next();
@@ -996,6 +1005,6 @@ this.triggerNavigate(eve);
     Calendar.prototype.currentView = function () {
-        if (this.contentEle.classList.contains(YEAR)) {
+        if (this.contentElement.classList.contains(YEAR)) {
             return 'year';
         }
-        else if (this.contentEle.classList.contains(DECADE)) {
+        else if (this.contentElement.classList.contains(DECADE)) {
             return 'decade';
@@ -1039,3 +1048,3 @@ }
     };
-    Calendar.prototype.getIdValue = function (e, ele) {
+    Calendar.prototype.getIdValue = function (e, element) {
         var eve;
@@ -1046,3 +1055,3 @@ if (e) {
         else {
-            eve = ele;
+            eve = element;
         }
@@ -1064,8 +1073,12 @@ var dateString = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), { skeleton: 'full' });
         }
-        if (!isNullOrUndefined(this.tbodyEle.querySelector('.' + SELECTED))) {
-            removeClass([this.tbodyEle.querySelector('.' + SELECTED)], SELECTED);
+        var tableBodyElement = closest(ele, '.' + ROOT);
+        if (isNullOrUndefined(tableBodyElement)) {
+            tableBodyElement = this.tableBodyElement;
         }
-        if (!isNullOrUndefined(this.tbodyEle.querySelector('.' + FOCUSEDDATE))) {
-            removeClass([this.tbodyEle.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);
+        if (!isNullOrUndefined(tableBodyElement.querySelector('.' + SELECTED))) {
+            removeClass([tableBodyElement.querySelector('.' + SELECTED)], SELECTED);
         }
+        if (!isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDDATE))) {
+            removeClass([tableBodyElement.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);
+        }
         addClass([ele], SELECTED);
@@ -1080,15 +1093,14 @@ this.changedArgs = { value: this.value };
     };
-    Calendar.prototype.prevIconHandler = function (disabled) {
+    Calendar.prototype.previousIconHandler = function (disabled) {
         if (disabled) {
-            EventHandler.remove(this.prevIcon, 'click', this.navPrev);
-            addClass([this.prevIcon], '' + DISABLED);
-            addClass([this.prevIcon], '' + OVERLAY);
-            this.prevIcon.setAttribute('aria-disabled', 'true');
+            EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
+            addClass([this.previousIcon], '' + DISABLED);
+            addClass([this.previousIcon], '' + OVERLAY);
+            this.previousIcon.setAttribute('aria-disabled', 'true');
         }
         else {
-            EventHandler.remove(this.prevIcon, 'click', this.navPrev);
-            EventHandler.add(this.prevIcon, 'click', this.navPrev, this);
-            removeClass([this.prevIcon], '' + DISABLED);
-            removeClass([this.prevIcon], '' + OVERLAY);
-            this.prevIcon.setAttribute('aria-disabled', 'false');
+            EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
+            removeClass([this.previousIcon], '' + DISABLED);
+            removeClass([this.previousIcon], '' + OVERLAY);
+            this.previousIcon.setAttribute('aria-disabled', 'false');
         }
@@ -1123,3 +1135,3 @@ };
         if (disabled) {
-            EventHandler.remove(this.nextIcon, 'click', this.navNext);
+            EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
             addClass([this.nextIcon], DISABLED);
@@ -1130,4 +1142,3 @@ addClass([this.nextIcon], OVERLAY);
         else {
-            EventHandler.remove(this.nextIcon, 'click', this.navNext);
-            EventHandler.add(this.nextIcon, 'click', this.navNext, this);
+            EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
             removeClass([this.nextIcon], DISABLED);
@@ -1134,0 +1145,0 @@ removeClass([this.nextIcon], OVERLAY);

dist/es6/datepicker/datepicker.js

@@ -216,4 +216,6 @@ var __extends = (this && this.__extends) || (function () {
                 else {
-                    this.addIconTabindex();
-                    this.inputWrapper.container.children[1].focus();
+                    if (+this.value !== +this.currentDate) {
+                        this.addIconTabindex();
+                        this.inputWrapper.container.children[1].focus();
+                    }
                 }
@@ -249,3 +251,3 @@ break;
         var target = e.target;
-        if (!(closest(target, '.e-calendar'))
+        if (!(closest(target, '.e-datepicker.e-popup-wrapper'))
             && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)) {
@@ -373,2 +375,3 @@ if (!Browser.isDevice) {
         if (Browser.isDevice) {
+            this.modelHdr();
             this.modal.className = '' + ROOT + ' e-date-modal';
@@ -378,2 +381,17 @@ document.body.className += ' ' + OVERFLOW;
     };
+    DatePicker.prototype.modelHdr = function () {
+        var modelHeader = createElement('div', { className: 'e-model-header' });
+        var yearHeading = createElement('h5', { className: 'e-model-year' });
+        var h2 = createElement('div');
+        var daySpan = createElement('span', { className: 'e-model-day' });
+        var monthSpan = createElement('span', { className: 'e-model-month' });
+        yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'y', skeleton: 'date' });
+        daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'E', skeleton: 'date' }) + ', ';
+        monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'MMM d', skeleton: 'date' });
+        modelHeader.appendChild(yearHeading);
+        h2.appendChild(daySpan);
+        h2.appendChild(monthSpan);
+        modelHeader.appendChild(h2);
+        this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);
+    };
     DatePicker.prototype.changeTrigger = function () {
@@ -470,2 +488,3 @@ if (this.inputEle.value !== this.previousEleValue) {
         var prevent = true;
+        removeClass(this.inputWrapper.buttons, ACTIVE);
         removeClass([document.body], OVERFLOW);
@@ -472,0 +491,0 @@ merge(args, this.preventArgs);

dist/es6/index.js

 export * from './calendar/index';
 export * from './datepicker/index';
+export * from './timepicker/index';

package.json

 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Essential JS 2 Calendar Components",
@@ -9,5 +9,6 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.18",
+    "@syncfusion/ej2-base": "^1.0.19",
     "@syncfusion/ej2-popups": "^1.0.17",
-    "@syncfusion/ej2-inputs": "^1.0.18",
+    "@syncfusion/ej2-inputs": "^1.0.19",
+    "@syncfusion/ej2-lists": "^1.0.19",
     "intl": "^1.2.5"
@@ -34,3 +35,6 @@ },
     "year",
-    "decade"
+    "decade",
+    "timepicker",
+    "stepranges",
+    "time"
   ],
@@ -37,0 +41,0 @@ "repository": {

ReadMe.md

@@ -11,2 +11,4 @@ # Calendar
 [DatePicker Documentation](http://ej2.syncfusion.com/documentation/datepicker) 
+[TimePicker Demo](http://ej2.syncfusion.com/demos/#/timepicker/default.html)       
+[TimePicker Documentation](http://ej2.syncfusion.com/documentation/timepicker) 
 
@@ -13,0 +15,0 @@ ## Changelog

src/calendar/calendar-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, EventHandler, Property, Event, CreateBuilder, Internationalization, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { cldrData, BaseEventArgs, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';import { createElement, removeClass, detach, addClass, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';import { CalendarHelper } from './calendar-builder';
+import { Component, EventHandler, Property, Event, CreateBuilder, Internationalization, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { cldrData, BaseEventArgs, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';import { createElement, removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';import { CalendarHelper } from './calendar-builder';
 import {CalendarView,ChangedEventArgs,NavigatedEventArgs,RenderDayCellEventArgs} from "./calendar";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/calendar/calendar.d.ts

@@ -23,13 +23,13 @@ import { Component, Internationalization, EmitType } from '@syncfusion/ej2-base';
 export declare class Calendar extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private headerEle;
-    private contentEle;
-    private table;
-    private theadEle;
-    private tbodyEle;
-    private nextIcon;
-    private prevIcon;
-    private hdrTitleEle;
+    protected headerElement: HTMLElement;
+    protected contentElement: HTMLElement;
+    protected table: HTMLElement;
+    protected tableHeadElement: HTMLElement;
+    protected tableBodyElement: Element;
+    protected nextIcon: HTMLElement;
+    protected previousIcon: HTMLElement;
+    protected headerTitleElement: HTMLElement;
     protected keyboardModule: KeyboardEvents;
     protected globalize: Internationalization;
-    private currentDate;
+    protected currentDate: Date;
     protected changedArgs: ChangedEventArgs;
@@ -42,3 +42,6 @@ protected navigatedArgs: NavigatedEventArgs;
     protected navigateHandler: Function;
+    protected navigatePreviousHandler: Function;
+    protected navigateNextHandler: Function;
     protected calendarElement: HTMLElement;
+    protected disabledDays: Date[];
     protected keyConfigs: {
@@ -126,4 +129,4 @@ [key: string]: string;
     private minMaxUpdate();
-    private header();
-    private content();
+    protected header(): void;
+    protected content(): void;
     private getCultureValues();
@@ -134,3 +137,3 @@ private contentHdr();
     protected keyActionHandle(e: KeyboardEventArgs): void;
-    private KeyboardNavigate(num, currentView, e);
+    protected KeyboardNavigate(number: number, currentView: number, e: KeyboardEvent): void;
     /**
@@ -141,8 +144,8 @@ * Initialize the event handler
     protected preRender(): void;
-    private renderMonths(e?);
+    protected renderMonths(e?: Event): void;
     private renderYears(e?);
     private renderDecades(e?);
     private dayCell(localDate);
-    private firstDay(date);
-    private lastDay(date);
+    protected firstDay(date: Date): Date;
+    protected lastDay(date: Date): Date;
     private removeTheadEle();
@@ -182,5 +185,5 @@ private renderTemplate(elements, numCells, classNm, e?);
     private previous();
-    private navPrev(e);
+    protected navigatePrevious(e: MouseEvent | KeyboardEvent): void;
     private next();
-    private navNext(eve);
+    protected navigateNext(eve: MouseEvent | KeyboardEvent): void;
     /**
@@ -202,8 +205,8 @@ * This method is used to navigate to the month/year/decade view of the Calendar.
     private setTime(date, time);
-    private addMonths(date, i);
-    private addYears(date, i);
-    private getIdValue(e, ele);
+    protected addMonths(date: Date, i: number): void;
+    protected addYears(date: Date, i: number): void;
+    protected getIdValue(e: MouseEvent, element: Element): Date;
     private selectDate(e, date, element);
     private setAriaActivedescendant();
-    private prevIconHandler(disabled);
+    protected previousIconHandler(disabled: boolean): void;
     protected renderDayCellEvent(args: RenderDayCellEventArgs): void;
@@ -214,5 +217,5 @@ protected navigatedEvent(eve: MouseEvent | KeyboardEvent): void;
     private triggerChange(e);
-    private nextIconHandler(disabled);
+    protected nextIconHandler(disabled: boolean): void;
     private compare(startDate, endDate, modifier);
-    private isMinMaxRange(date);
+    protected isMinMaxRange(date: Date): boolean;
     private compareYear(start, end);
@@ -222,3 +225,3 @@ private compareDecade(start, end);
     protected resetTime(date: Date): Date;
-    private addDay(date, i);
+    protected addDay(date: Date, i: number): void;
     private getMaxDays(d);
@@ -225,0 +228,0 @@ private setDateDecade(date, year);

src/calendar/calendar.js

@@ -21,2 +21,3 @@ var __extends = (this && this.__extends) || (function () {
     var ROOT = 'e-calendar';
+    var DEVICE = 'e-device';
     var HEADER = 'e-header';
@@ -54,2 +55,3 @@ var RTL = 'e-rtl';
             _this.effect = '';
+            _this.disabledDays = [];
             _this.keyConfigs = {
@@ -81,2 +83,5 @@ controlUp: 'ctrl+38',
                 }
+                if (ej2_base_5.Browser.isDevice) {
+                    this.element.classList.add(DEVICE);
+                }
                 ej2_base_4.attributes(this.element, {
@@ -92,2 +97,5 @@ 'data-role': 'calendar'
                 }
+                if (ej2_base_5.Browser.isDevice) {
+                    this.calendarElement.classList.add(DEVICE);
+                }
                 ej2_base_4.attributes(this.calendarElement, {
@@ -164,35 +172,31 @@ 'role': 'calendar'
             };
-            this.headerEle = ej2_base_4.createElement('div', { className: HEADER });
+            this.headerElement = ej2_base_4.createElement('div', { className: HEADER });
             var iconContainer = ej2_base_4.createElement('div', { className: ICONCONTAINER });
-            this.prevIcon = ej2_base_4.createElement('a', { className: '' + PREVICON });
-            if (!ej2_base_5.Browser.isIos && !ej2_base_5.Browser.isIos7 && !ej2_base_5.Browser.isIE) {
-                ej2_base_3.rippleEffect(this.prevIcon, {
-                    duration: 400,
-                    selector: '.e-prev',
-                    isCenterRipple: true
-                });
-            }
-            ej2_base_4.attributes(this.prevIcon, ariaPrevAttrs);
+            this.previousIcon = ej2_base_4.createElement('a', { className: '' + PREVICON });
+            ej2_base_3.rippleEffect(this.previousIcon, {
+                duration: 400,
+                selector: '.e-prev',
+                isCenterRipple: true
+            });
+            ej2_base_4.attributes(this.previousIcon, ariaPrevAttrs);
             this.nextIcon = ej2_base_4.createElement('a', { className: '' + NEXTICON });
-            if (!ej2_base_5.Browser.isIos && !ej2_base_5.Browser.isIos7 && !ej2_base_5.Browser.isIE) {
-                ej2_base_3.rippleEffect(this.nextIcon, {
-                    selector: '.e-next',
-                    duration: 400,
-                    isCenterRipple: true
-                });
-            }
+            ej2_base_3.rippleEffect(this.nextIcon, {
+                selector: '.e-next',
+                duration: 400,
+                isCenterRipple: true
+            });
             ej2_base_4.attributes(this.nextIcon, ariaNextAttrs);
-            this.hdrTitleEle = ej2_base_4.createElement('a', { className: '' + LINK + ' ' + TITLE, attrs: {} });
-            ej2_base_4.attributes(this.hdrTitleEle, ariaTitleAttrs);
-            this.headerEle.appendChild(this.hdrTitleEle);
-            this.prevIcon.appendChild(ej2_base_4.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
+            this.headerTitleElement = ej2_base_4.createElement('a', { className: '' + LINK + ' ' + TITLE, attrs: {} });
+            ej2_base_4.attributes(this.headerTitleElement, ariaTitleAttrs);
+            this.headerElement.appendChild(this.headerTitleElement);
+            this.previousIcon.appendChild(ej2_base_4.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
             this.nextIcon.appendChild(ej2_base_4.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
-            iconContainer.appendChild(this.prevIcon);
+            iconContainer.appendChild(this.previousIcon);
             iconContainer.appendChild(this.nextIcon);
-            this.headerEle.appendChild(iconContainer);
+            this.headerElement.appendChild(iconContainer);
             if (this.getModuleName() === 'calendar') {
-                this.element.appendChild(this.headerEle);
+                this.element.appendChild(this.headerElement);
             }
             else {
-                this.calendarElement.appendChild(this.headerEle);
+                this.calendarElement.appendChild(this.headerElement);
             }
@@ -202,11 +206,11 @@ };
             this.previousDate = this.value;
-            this.contentEle = ej2_base_4.createElement('div', { className: CONTENT });
+            this.contentElement = ej2_base_4.createElement('div', { className: CONTENT });
             this.table = ej2_base_4.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });
             if (this.getModuleName() === 'calendar') {
-                this.element.appendChild(this.contentEle);
+                this.element.appendChild(this.contentElement);
             }
             else {
-                this.calendarElement.appendChild(this.contentEle);
+                this.calendarElement.appendChild(this.contentElement);
             }
-            this.contentEle.appendChild(this.table);
+            this.contentElement.appendChild(this.table);
             this.contentHdr();
@@ -247,3 +251,3 @@ this.contentBody();
             }
-            this.theadEle = ej2_base_4.createElement('thead', { className: WEEKHEADER });
+            this.tableHeadElement = ej2_base_4.createElement('thead', { className: WEEKHEADER });
             if (this.weekNumber) {
@@ -257,4 +261,4 @@ html += '<th class="e-week-number"></th>';
             html = '<tr>' + html + '</tr>';
-            this.theadEle.innerHTML = html;
-            this.table.appendChild(this.theadEle);
+            this.tableHeadElement.innerHTML = html;
+            this.table.appendChild(this.tableHeadElement);
         };
@@ -284,3 +288,3 @@ Calendar.prototype.contentBody = function () {
         Calendar.prototype.wireEvents = function () {
-            ej2_base_1.EventHandler.add(this.hdrTitleEle, 'click', this.navTitle, this);
+            ej2_base_1.EventHandler.add(this.headerTitleElement, 'click', this.navTitle, this);
             if (this.getModuleName() === 'calendar') {
@@ -303,4 +307,4 @@ this.keyboardModule = new ej2_base_2.KeyboardEvents(this.element, {
             var view = this.getViewNumber(this.currentView());
-            var focusedDate = this.tbodyEle.querySelector('tr td.e-focused-date');
-            var selectedDate = this.tbodyEle.querySelector('tr td.e-selected');
+            var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+            var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
             var depthValue = this.getViewNumber(this.depth);
@@ -359,3 +363,3 @@ var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
                     this.currentDate = this.firstDay(this.currentDate);
-                    ej2_base_4.detach(this.tbodyEle);
+                    ej2_base_4.detach(this.tableBodyElement);
                     this.renderMonths(e);
@@ -366,3 +370,3 @@ e.preventDefault();
                     this.currentDate = this.lastDay(this.currentDate);
-                    ej2_base_4.detach(this.tbodyEle);
+                    ej2_base_4.detach(this.tableBodyElement);
                     this.renderMonths(e);
@@ -401,9 +405,9 @@ e.preventDefault();
         };
-        Calendar.prototype.KeyboardNavigate = function (num, currentView, e) {
+        Calendar.prototype.KeyboardNavigate = function (number, currentView, e) {
             var date = new Date('' + this.currentDate);
             switch (currentView) {
                 case 2:
-                    this.addYears(this.currentDate, num);
+                    this.addYears(this.currentDate, number);
                     if (this.isMinMaxRange(this.currentDate)) {
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.renderDecades(e);
@@ -416,5 +420,5 @@ }
                 case 1:
-                    this.addMonths(this.currentDate, num);
+                    this.addMonths(this.currentDate, number);
                     if (this.isMinMaxRange(this.currentDate)) {
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.renderYears(e);
@@ -427,5 +431,5 @@ }
                 case 0:
-                    this.addDay(this.currentDate, num);
+                    this.addDay(this.currentDate, number);
                     if (this.isMinMaxRange(this.currentDate)) {
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.renderMonths(e);
@@ -441,2 +445,4 @@ }
             var _this = this;
+            this.navigatePreviousHandler = this.navigatePrevious.bind(this);
+            this.navigateNextHandler = this.navigateNext.bind(this);
             this.changeHandler = function (e) {
@@ -502,2 +508,5 @@ _this.triggerChange(e);
                     }
+                    if (args.date.getMonth() === this.currentDate.getMonth() && args.date.getFullYear() === this.currentDate.getFullYear()) {
+                        this.disabledDays.push(new Date(+args.date));
+                    }
                 }
@@ -601,3 +610,3 @@ if (this.renderDaycellArg.isDisabled && !tdEle.classList.contains(SELECTED)) {
             var endHdrYr = this.globalize.formatDate(endYr, { type: 'date', skeleton: 'y' });
-            this.hdrTitleEle.textContent = startHdrYr + ' - ' + (endHdrYr);
+            this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);
             var start = new Date(localYr - (localYr % 10) - 1, 0, 1);
@@ -654,3 +663,3 @@ var startYear = start.getFullYear();
                 if (!ej2_base_5.isNullOrUndefined(this.element.querySelectorAll('.e-content table thead')[0])) {
-                    ej2_base_4.detach(this.theadEle);
+                    ej2_base_4.detach(this.tableHeadElement);
                 }
@@ -660,3 +669,3 @@ }
                 if (!ej2_base_5.isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content table thead')[0])) {
-                    ej2_base_4.detach(this.theadEle);
+                    ej2_base_4.detach(this.tableHeadElement);
                 }
@@ -668,6 +677,6 @@ }
             var trEle;
-            this.tbodyEle = ej2_base_4.createElement('tbody');
-            this.table.appendChild(this.tbodyEle);
-            ej2_base_4.removeClass([this.contentEle, this.headerEle], [MONTH, DECADE, YEAR]);
-            ej2_base_4.addClass([this.contentEle, this.headerEle], [classNm]);
+            this.tableBodyElement = ej2_base_4.createElement('tbody');
+            this.table.appendChild(this.tableBodyElement);
+            ej2_base_4.removeClass([this.contentElement, this.headerElement], [MONTH, DECADE, YEAR]);
+            ej2_base_4.addClass([this.contentElement, this.headerElement], [classNm]);
             var weekNumCell = 41;
@@ -705,3 +714,3 @@ var numberCell = 35;
                 rowIterator = rowIterator + 0;
-                this.tbodyEle.appendChild(trEle);
+                this.tableBodyElement.appendChild(trEle);
             }
@@ -744,3 +753,3 @@ this.table.querySelector('tbody').className = this.effect;
                     if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.currentDate = d;
@@ -757,3 +766,3 @@ this.effect = ZOOMIN;
                         this.effect = ZOOMIN;
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.renderMonths(e);
@@ -769,3 +778,3 @@ }
                         this.effect = ZOOMIN;
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.renderYears(e);
@@ -778,11 +787,11 @@ }
                 case 0:
-                    ej2_base_4.detach(this.tbodyEle);
+                    ej2_base_4.detach(this.tableBodyElement);
                     this.renderMonths(e);
                     break;
                 case 1:
-                    ej2_base_4.detach(this.tbodyEle);
+                    ej2_base_4.detach(this.tableBodyElement);
                     this.renderYears(e);
                     break;
                 case 2:
-                    ej2_base_4.detach(this.tbodyEle);
+                    ej2_base_4.detach(this.tableBodyElement);
                     this.renderDecades(e);
@@ -837,3 +846,3 @@ }
                         this.setProperties({ start: this.currentView() }, true);
-                        ej2_base_4.detach(this.tbodyEle);
+                        ej2_base_4.detach(this.tableBodyElement);
                         this.minMaxUpdate();
@@ -851,3 +860,3 @@ this.contentBody();
         Calendar.prototype.setvalue = function () {
-            this.tbodyEle.remove();
+            this.tableBodyElement.remove();
             this.setProperties({ start: this.currentView() }, true);
@@ -860,6 +869,6 @@ this.contentBody();
                 case 'days':
-                    this.hdrTitleEle.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'yMMMM' });
+                    this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'yMMMM' });
                     break;
                 case 'months':
-                    this.hdrTitleEle.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'y' });
+                    this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'date', skeleton: 'y' });
             }
@@ -869,4 +878,4 @@ };
             var id;
-            var focusedEle = this.tbodyEle.querySelector('tr td.e-focused-date');
-            var selectedEle = this.tbodyEle.querySelector('tr td.e-selected');
+            var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');
+            var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');
             var title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full' });
@@ -884,11 +893,11 @@ if (selectedEle || focusedEle) {
                 case 'month':
-                    this.prevIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);
+                    this.previousIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);
                     this.nextIconHandler(this.compareMonth(new Date('' + this.currentDate), this.max) > -1);
                     break;
                 case 'year':
-                    this.prevIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);
+                    this.previousIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);
                     this.nextIconHandler(this.compareYear(new Date('' + this.currentDate), this.max) > -1);
                     break;
                 case 'decade':
-                    this.prevIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);
+                    this.previousIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);
                     this.nextIconHandler(this.compareDecade(new Date('' + this.currentDate), this.max) > -1);
@@ -904,4 +913,4 @@ }
             }
-            ej2_base_1.EventHandler.remove(this.hdrTitleEle, 'click', this.navTitle);
-            this.prevIconHandler(true);
+            ej2_base_1.EventHandler.remove(this.headerTitleElement, 'click', this.navTitle);
+            this.previousIconHandler(true);
             this.nextIconHandler(true);
@@ -950,3 +959,3 @@ this.keyboardModule.destroy();
         };
-        Calendar.prototype.navPrev = function (e) {
+        Calendar.prototype.navigatePrevious = function (e) {
             this.previous();
@@ -974,3 +983,3 @@ this.triggerNavigate(e);
         };
-        Calendar.prototype.navNext = function (eve) {
+        Calendar.prototype.navigateNext = function (eve) {
             this.next();
@@ -994,6 +1003,6 @@ this.triggerNavigate(eve);
         Calendar.prototype.currentView = function () {
-            if (this.contentEle.classList.contains(YEAR)) {
+            if (this.contentElement.classList.contains(YEAR)) {
                 return 'year';
             }
-            else if (this.contentEle.classList.contains(DECADE)) {
+            else if (this.contentElement.classList.contains(DECADE)) {
                 return 'decade';
@@ -1037,3 +1046,3 @@ }
         };
-        Calendar.prototype.getIdValue = function (e, ele) {
+        Calendar.prototype.getIdValue = function (e, element) {
             var eve;
@@ -1044,3 +1053,3 @@ if (e) {
             else {
-                eve = ele;
+                eve = element;
             }
@@ -1062,8 +1071,12 @@ var dateString = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), { skeleton: 'full' });
             }
-            if (!ej2_base_5.isNullOrUndefined(this.tbodyEle.querySelector('.' + SELECTED))) {
-                ej2_base_4.removeClass([this.tbodyEle.querySelector('.' + SELECTED)], SELECTED);
+            var tableBodyElement = ej2_base_4.closest(ele, '.' + ROOT);
+            if (ej2_base_5.isNullOrUndefined(tableBodyElement)) {
+                tableBodyElement = this.tableBodyElement;
             }
-            if (!ej2_base_5.isNullOrUndefined(this.tbodyEle.querySelector('.' + FOCUSEDDATE))) {
-                ej2_base_4.removeClass([this.tbodyEle.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);
+            if (!ej2_base_5.isNullOrUndefined(tableBodyElement.querySelector('.' + SELECTED))) {
+                ej2_base_4.removeClass([tableBodyElement.querySelector('.' + SELECTED)], SELECTED);
             }
+            if (!ej2_base_5.isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDDATE))) {
+                ej2_base_4.removeClass([tableBodyElement.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);
+            }
             ej2_base_4.addClass([ele], SELECTED);
@@ -1078,15 +1091,14 @@ this.changedArgs = { value: this.value };
         };
-        Calendar.prototype.prevIconHandler = function (disabled) {
+        Calendar.prototype.previousIconHandler = function (disabled) {
             if (disabled) {
-                ej2_base_1.EventHandler.remove(this.prevIcon, 'click', this.navPrev);
-                ej2_base_4.addClass([this.prevIcon], '' + DISABLED);
-                ej2_base_4.addClass([this.prevIcon], '' + OVERLAY);
-                this.prevIcon.setAttribute('aria-disabled', 'true');
+                ej2_base_1.EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
+                ej2_base_4.addClass([this.previousIcon], '' + DISABLED);
+                ej2_base_4.addClass([this.previousIcon], '' + OVERLAY);
+                this.previousIcon.setAttribute('aria-disabled', 'true');
             }
             else {
-                ej2_base_1.EventHandler.remove(this.prevIcon, 'click', this.navPrev);
-                ej2_base_1.EventHandler.add(this.prevIcon, 'click', this.navPrev, this);
-                ej2_base_4.removeClass([this.prevIcon], '' + DISABLED);
-                ej2_base_4.removeClass([this.prevIcon], '' + OVERLAY);
-                this.prevIcon.setAttribute('aria-disabled', 'false');
+                ej2_base_1.EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
+                ej2_base_4.removeClass([this.previousIcon], '' + DISABLED);
+                ej2_base_4.removeClass([this.previousIcon], '' + OVERLAY);
+                this.previousIcon.setAttribute('aria-disabled', 'false');
             }
@@ -1121,3 +1133,3 @@ };
             if (disabled) {
-                ej2_base_1.EventHandler.remove(this.nextIcon, 'click', this.navNext);
+                ej2_base_1.EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
                 ej2_base_4.addClass([this.nextIcon], DISABLED);
@@ -1128,4 +1140,3 @@ ej2_base_4.addClass([this.nextIcon], OVERLAY);
             else {
-                ej2_base_1.EventHandler.remove(this.nextIcon, 'click', this.navNext);
-                ej2_base_1.EventHandler.add(this.nextIcon, 'click', this.navNext, this);
+                ej2_base_1.EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
                 ej2_base_4.removeClass([this.nextIcon], DISABLED);
@@ -1132,0 +1143,0 @@ ej2_base_4.removeClass([this.nextIcon], OVERLAY);

src/datepicker/datepicker.d.ts

@@ -141,2 +141,3 @@ /// <reference path="../calendar/calendar-model.d.ts" />
     private createCalendar();
+    private modelHdr();
     private changeTrigger();
@@ -143,0 +144,0 @@ protected navigatedEvent(): void;

src/datepicker/datepicker.js

@@ -212,4 +212,6 @@ var __extends = (this && this.__extends) || (function () {
                     else {
-                        this.addIconTabindex();
-                        this.inputWrapper.container.children[1].focus();
+                        if (+this.value !== +this.currentDate) {
+                            this.addIconTabindex();
+                            this.inputWrapper.container.children[1].focus();
+                        }
                     }
@@ -245,3 +247,3 @@ break;
             var target = e.target;
-            if (!(ej2_base_3.closest(target, '.e-calendar'))
+            if (!(ej2_base_3.closest(target, '.e-datepicker.e-popup-wrapper'))
                 && !(ej2_base_3.closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)) {
@@ -369,2 +371,3 @@ if (!ej2_base_2.Browser.isDevice) {
             if (ej2_base_2.Browser.isDevice) {
+                this.modelHdr();
                 this.modal.className = '' + ROOT + ' e-date-modal';
@@ -374,2 +377,17 @@ document.body.className += ' ' + OVERFLOW;
         };
+        DatePicker.prototype.modelHdr = function () {
+            var modelHeader = ej2_base_3.createElement('div', { className: 'e-model-header' });
+            var yearHeading = ej2_base_3.createElement('h5', { className: 'e-model-year' });
+            var h2 = ej2_base_3.createElement('div');
+            var daySpan = ej2_base_3.createElement('span', { className: 'e-model-day' });
+            var monthSpan = ej2_base_3.createElement('span', { className: 'e-model-month' });
+            yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'y', skeleton: 'date' });
+            daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'E', skeleton: 'date' }) + ', ';
+            monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'MMM d', skeleton: 'date' });
+            modelHeader.appendChild(yearHeading);
+            h2.appendChild(daySpan);
+            h2.appendChild(monthSpan);
+            modelHeader.appendChild(h2);
+            this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);
+        };
         DatePicker.prototype.changeTrigger = function () {
@@ -466,2 +484,3 @@ if (this.inputEle.value !== this.previousEleValue) {
             var prevent = true;
+            ej2_base_3.removeClass(this.inputWrapper.buttons, ACTIVE);
             ej2_base_3.removeClass([document.body], OVERFLOW);
@@ -468,0 +487,0 @@ ej2_base_4.merge(args, this.preventArgs);

src/index.d.ts

@@ -6,1 +6,2 @@ /**
 export * from './datepicker/index';
+export * from './timepicker/index';

src/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./calendar/index", "./datepicker/index"], function (require, exports, index_1, index_2) {
+define(["require", "exports", "./calendar/index", "./datepicker/index", "./timepicker/index"], function (require, exports, index_1, index_2, index_3) {
     "use strict";
@@ -9,2 +9,3 @@ function __export(m) {
     __export(index_2);
+    __export(index_3);
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9533549

increased by62.32%

Number of package files

92

increased by50.82%

Lines of code

91038

increased by35.47%

Number of lines in readme file

16

increased by14.29%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@syncfusion/ej2-lists@^1.0.19

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

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

• Updated@syncfusion/ej2-base@^1.0.19

• Updated@syncfusion/ej2-inputs@^1.0.19