@syncfusion/ej2-calendars - npm Package Compare versions

Comparing version 15.4.26 to 16.1.24

CHANGELOG.md

@@ -5,4 +5,76 @@ # Changelog
 
+### Common
+
+#### Breaking Changes
+
+- Changed the Angular component selector, component name prefix with `ejs` e.g: `ejs-calendar`.
+
+- Event arguments and it's parameter values are same.
+
+#### New Features
+
+- High contrast theme support.
+
+### Calendar, DatePicker and DateTimePicker
+
+#### Breaking Changes
+
+- Pascal casing change to `start` and `depth` property values (`Month`, `Year`, `Decade`).
+
 ### DateRangePicker
 
+#### New Features
+
+- DateRangePicker rendered based on the screen resolution.
+
+- DateTime support has been provided for DateRangePicker.
+
+- Input type `date` has been handled in DateRangePicker.
+
+### DatePicker
+
+#### Breaking Changes
+
+- Focus the input when select the value from the DatePicker popup.
+
+#### New Features
+
+- `Today` button support has been provided for DatePicker.
+
+- Input type `date` has been handled in DatePicker.
+
+### TimePicker
+
+#### New Features
+
+- Added `itemRender` support for the TimePicker which allows to customize each time values in a popup list.
+
+- Input type `time` has been handled in TimePicker.
+
+- Added `scrollTo` support for the TimePicker which is used to set the scroll position to the given time value when no value is selected in the popup list or the given value is not present in the popup list.
+
+### Calendar
+
+#### New Features
+
+- `Today` button support has been provided for Calendar.
+
+#### DateTimePicker
+
+DateTimePicker component for selecting or entering a date and time with options for disabling dates, restricting selection and showing custom events.
+
+- **Range Restriction** – Allows to select a date and time within a specified range.
+
+- **Format** – Formatting the value displayed in a textbox.
+
+- **Customization** – Allows to customize each day and time cell of the Calendar and time popup list.
+
+- **Strict Mode** -  Allows to enter the only valid date and time in a textbox.
+
+- **Accessibility** - Provided with built-in accessibility support which helps to access all the DateTimePicker component features through the keyboard, screen readers, or other assistive technology devices.
+
+## 15.4.26-preview (2018-01-23)
+
+### DateRangePicker
+
 #### Bug fix
@@ -130,3 +202,3 @@
 
-- **Accessibility** - Provided with built-in accessibility support which helps to access all the TimePicker component features through the keyboard, screen readers, or other assistive technology devices.
+- **Accessibility** - Provided with built-in accessibility support which helps to access all the DateRangePicker component features through the keyboard, screen readers, or other assistive technology devices.
 
@@ -133,0 +205,0 @@ ### TimePicker

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 15.4.25
+*  version : 15.4.26
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "15.4.26",
+  "version": "16.1.24",
   "description": "Essential JS 2 Calendar Components",
@@ -11,7 +11,7 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-popups": "^15.4.23",
-    "@syncfusion/ej2-inputs": "^15.4.24",
-    "@syncfusion/ej2-lists": "^15.4.26",
-    "@syncfusion/ej2-buttons": "^15.4.26",
+    "@syncfusion/ej2-base": "^16.1.24",
+    "@syncfusion/ej2-popups": "^16.1.24",
+    "@syncfusion/ej2-inputs": "^16.1.24",
+    "@syncfusion/ej2-lists": "^16.1.24",
+    "@syncfusion/ej2-buttons": "^16.1.24",
     "intl": "^1.2.5"
@@ -18,0 +18,0 @@ },

src/calendar/calendar-model.d.ts

@@ -56,6 +56,6 @@ import { Component, EventHandler, Property, Event, Internationalization, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, KeyboardEvents, KeyboardEventArgs, L10n } 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';
     /**
-     * Sets the today date to the model value. By default, today button is append with calendar.
-     * @default today
+     * Specifies whether the today button is displayed or not.
+     * @default true
      */
-    today?: string;
+    showTodayButton?: boolean;
 
@@ -62,0 +62,0 @@ /**

src/calendar/calendar.d.ts

@@ -8,3 +8,3 @@ import { Component, Internationalization, EmitType } from '@syncfusion/ej2-base';
  */
-export declare type CalendarView = 'month' | 'year' | 'decade';
+export declare type CalendarView = 'Month' | 'Year' | 'Decade';
 /**
@@ -91,6 +91,6 @@ * Represents the Calendar component that allows the user to select a date.
     /**
-     * Sets the today date to the model value. By default, today button is append with calendar.
-     * @default today
+     * Specifies whether the today button is displayed or not.
+     * @default true
      */
-    today: string;
+    showTodayButton: boolean;
     /**
@@ -142,2 +142,3 @@ * Triggers when Calendar is created.
     private contentBody();
+    private updateFooter();
     private contentFooter();
@@ -195,3 +196,3 @@ protected wireEvents(): void;
     private getViewNumber(stringVal);
-    private navTitle(e);
+    private navTitle(e?);
     private previous();
@@ -255,3 +256,3 @@ protected navigatePrevious(e: MouseEvent | KeyboardEvent): void;
     /** Defines the event of the Calendar. */
-    event?: KeyboardEvent | MouseEvent;
+    event?: KeyboardEvent | MouseEvent | Event;
 }
@@ -258,0 +259,0 @@ export interface NavigatedEventArgs extends BaseEventArgs {

src/datepicker/datepicker-model.d.ts

@@ -45,3 +45,3 @@ import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, EmitType, Event, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';import { createElement, remove, detach, addClass, removeClass, closest, classList, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, setValue, getUniqueID, merge } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';import { Calendar, ChangedEventArgs, CalendarView } from '../calendar/calendar';
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -48,0 +48,0 @@ showClearButton?: boolean;

src/datepicker/datepicker.d.ts

 /// <reference path="../calendar/calendar-model.d.ts" />
-import { EmitType, L10n } from '@syncfusion/ej2-base';
+import { KeyboardEventArgs, EmitType, L10n } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
-import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
+import { InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
 import { Calendar, ChangedEventArgs, CalendarView } from '../calendar/calendar';
@@ -22,6 +22,6 @@ import { DatePickerModel } from './datepicker-model';
     private popupObj;
-    private inputWrapper;
+    protected inputWrapper: InputObject;
     private modal;
-    private inputElement;
-    private popupWrapper;
+    protected inputElement: HTMLInputElement;
+    protected popupWrapper: HTMLElement;
     protected changedArgs: ChangedEventArgs;
@@ -33,2 +33,3 @@ protected previousDate: Date;
     private ngTag;
+    protected dateTimeFormat: string;
     private inputEleCopy;
@@ -38,4 +39,3 @@ protected l10n: L10n;
     private isDateIconClicked;
-    private isTriggerPrevented;
-    private focusedElement;
+    private index;
     protected keyConfigs: {
@@ -77,3 +77,3 @@ [key: string]: string;
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -143,9 +143,8 @@ showClearButton: boolean;
     private createInput();
-    private updateInput();
+    protected updateInput(): void;
     protected bindEvents(): void;
     private bindClearEvent();
-    protected resetHandler(e: MouseEvent): void;
+    protected resetHandler(e?: MouseEvent): void;
     private clear(event);
-    private dateIconHandler();
-    private iconBlurHandler();
+    private dateIconHandler(e?);
     private CalendarKeyActionHandle(e);
@@ -155,14 +154,12 @@ private inputFocusHandler();
     private documentHandler(e);
-    private removeIconTabindex();
-    private addIconTabindex();
-    private inputKeyActionHandle(e);
-    private strictModeUpdate();
+    protected inputKeyActionHandle(e: KeyboardEventArgs): void;
+    protected strictModeUpdate(): void;
     private createCalendar();
-    private modelHdr();
+    private modelHeader();
     private changeTrigger();
     protected navigatedEvent(): void;
     protected changeEvent(e?: Event): void;
-    private selectCalendar(e?);
-    private isCalendar();
-    private setWidth(width);
+    protected selectCalendar(e?: Event): void;
+    protected isCalendar(): boolean;
+    protected setWidth(width: number | string): void;
     /**
@@ -187,3 +184,3 @@ * Shows the Calendar.
      */
-    focusOut(triggerEvent?: boolean): void;
+    focusOut(): void;
     /**
@@ -219,3 +216,3 @@ * Gets the current view of the DatePicker.
     private setAriaAttributes();
-    private errorClass();
+    protected errorClass(): void;
     /**
@@ -230,3 +227,3 @@ * Called internally if any of the property value changed.
     /** Defines the DatePicker popup element. */
-    popupElement: Popup;
+    popup: Popup;
 }
@@ -233,0 +230,0 @@ export interface PreventableEventArgs {

src/datepicker/datepicker.js

@@ -44,3 +44,2 @@ var __extends = (this && this.__extends) || (function () {
             _this.isDateIconClicked = false;
-            _this.isTriggerPrevented = false;
             _this.keyConfigs = {
@@ -90,6 +89,8 @@ altUpArrow: 'alt+uparrow',
             };
-            var l10nLocale = { placeholder: null };
-            this.globalize = new ej2_base_1.Internationalization(this.locale);
-            this.l10n = new ej2_base_2.L10n('datepicker', l10nLocale, this.locale);
-            this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
+            if (this.getModuleName() === 'datepicker') {
+                var l10nLocale = { placeholder: null };
+                this.globalize = new ej2_base_1.Internationalization(this.locale);
+                this.l10n = new ej2_base_2.L10n('datepicker', l10nLocale, this.locale);
+                this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
+            }
             this.inputWrapper = ej2_inputs_1.Input.createInput({
@@ -130,3 +131,12 @@ element: this.inputElement,
                     this.value = this.checkDateValue(new Date('' + this.value));
-                    var dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+                    var dateOptions = void 0;
+                    if (this.getModuleName() === 'datetimepicker') {
+                        dateOptions = {
+                            format: !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,
+                            type: 'dateTime', skeleton: 'yMd'
+                        };
+                    }
+                    else {
+                        dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+                    }
                     var dateString = this.globalize.formatDate(this.value, dateOptions);
@@ -141,5 +151,12 @@ this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);
                 var dateValue = this.value;
-                var dateString = this.globalize.formatDate(this.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
+                var dateString = void 0;
+                var tempFormat = !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;
+                if (this.getModuleName() === 'datetimepicker') {
+                    dateString = this.globalize.formatDate(this.value, { format: tempFormat, type: 'dateTime', skeleton: 'yMd' });
+                }
+                else {
+                    dateString = this.globalize.formatDate(this.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
+                }
                 if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {
-                    ej2_inputs_1.Input.setValue(dateString, this.inputElement, this.floatLabelType, false);
+                    ej2_inputs_1.Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);
                 }
@@ -149,3 +166,3 @@ else {
                     if (!this.strictMode && value) {
-                        ej2_inputs_1.Input.setValue(dateString, this.inputElement, this.floatLabelType, false);
+                        ej2_inputs_1.Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);
                         this.setProperties({ value: null }, true);
@@ -156,3 +173,3 @@ }
             if (ej2_base_4.isNullOrUndefined(this.value) && this.strictMode) {
-                ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, false);
+                ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
             }
@@ -165,17 +182,11 @@ this.changedArgs = { value: this.value };
             if (this.enabled) {
-                ej2_base_1.EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dateIconHandler, this);
+                ej2_base_1.EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler, this);
                 ej2_base_1.EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);
                 ej2_base_1.EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
                 this.bindClearEvent();
-                if (!ej2_base_2.Browser.isAndroid) {
-                    ej2_base_1.EventHandler.add(this.inputWrapper.buttons[0], 'blur', this.iconBlurHandler, this);
-                }
             }
             else {
-                ej2_base_1.EventHandler.remove(this.inputWrapper.buttons[0], 'click', this.dateIconHandler);
+                ej2_base_1.EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);
                 ej2_base_1.EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
                 ej2_base_1.EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
-                if (!ej2_base_2.Browser.isAndroid) {
-                    ej2_base_1.EventHandler.remove(this.inputWrapper.buttons[0], 'blur', this.iconBlurHandler);
-                }
             }
@@ -190,3 +201,3 @@ this.keyboardModules = new ej2_base_2.KeyboardEvents(this.inputElement, {
             if (this.showClearButton) {
-                ej2_base_1.EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);
+                ej2_base_1.EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
             }
@@ -200,23 +211,25 @@ };
             this.setProperties({ value: null }, true);
-            ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, false);
+            ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
             this.changeEvent(event);
         };
-        DatePicker.prototype.dateIconHandler = function () {
-            if (this.isCalendar()) {
-                this.hide();
-            }
-            else {
-                this.isDateIconClicked = true;
-                this.show();
-                if (!ej2_base_2.Browser.isDevice) {
-                    this.addIconTabindex();
+        DatePicker.prototype.dateIconHandler = function (e) {
+            e.preventDefault();
+            if (!this.readonly) {
+                if (this.isCalendar()) {
+                    this.hide();
                 }
-                ej2_base_3.addClass(this.inputWrapper.buttons, ACTIVE);
+                else {
+                    this.isDateIconClicked = true;
+                    this.show();
+                    if (!ej2_base_2.Browser.isDevice) {
+                        if (this.getModuleName() === 'datetimepicker') {
+                            this.inputElement.focus();
+                        }
+                        this.inputElement.focus();
+                        ej2_base_3.addClass([this.inputWrapper.container], [INPUTFOCUS]);
+                    }
+                    ej2_base_3.addClass(this.inputWrapper.buttons, ACTIVE);
+                }
             }
         };
-        DatePicker.prototype.iconBlurHandler = function () {
-            if (!ej2_base_4.isNullOrUndefined(this.inputWrapper.container.children[1])) {
-                this.removeIconTabindex();
-            }
-        };
         DatePicker.prototype.CalendarKeyActionHandle = function (e) {
@@ -229,4 +242,3 @@ switch (e.action) {
                     else {
-                        this.inputWrapper.container.children[1].blur();
-                        this.iconBlurHandler();
+                        this.inputWrapper.container.children[this.index].blur();
                     }
@@ -239,7 +251,9 @@ break;
                     else {
-                        if (+this.value !== +this.currentDate) {
-                            this.addIconTabindex();
-                            this.inputWrapper.container.children[1].focus();
+                        if (+this.value !== +this.currentDate && !this.isCalendar()) {
+                            this.inputWrapper.container.children[this.index].focus();
                         }
                     }
+                    if (this.getModuleName() === 'datetimepicker') {
+                        this.inputElement.focus();
+                    }
                     break;
@@ -251,5 +265,2 @@ case 'tab':
         DatePicker.prototype.inputFocusHandler = function () {
-            if (this.isTriggerPrevented) {
-                return;
-            }
             this.isDateIconClicked = false;
@@ -259,5 +270,2 @@ this.trigger('focus');
         DatePicker.prototype.inputBlurHandler = function () {
-            if (this.isTriggerPrevented) {
-                return;
-            }
             this.strictModeUpdate();
@@ -281,19 +289,12 @@ this.updateInput();
         DatePicker.prototype.documentHandler = function (e) {
+            if (!ej2_base_2.Browser.isDevice) {
+                e.preventDefault();
+            }
             var target = e.target;
             if (!(ej2_base_3.closest(target, '.e-datepicker.e-popup-wrapper'))
-                && !(ej2_base_3.closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)) {
-                if (!ej2_base_2.Browser.isDevice) {
-                    this.iconBlurHandler();
-                }
+                && !(ej2_base_3.closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)
+                && (!target.classList.contains('e-day'))) {
                 this.hide();
             }
         };
-        DatePicker.prototype.removeIconTabindex = function () {
-            this.inputWrapper.container.children[1].removeAttribute('tabindex');
-        };
-        DatePicker.prototype.addIconTabindex = function () {
-            ej2_base_3.attributes(this.inputWrapper.container.children[1], {
-                'tabindex': '0'
-            });
-        };
         DatePicker.prototype.inputKeyActionHandle = function (e) {
@@ -308,3 +309,5 @@ switch (e.action) {
                     this.updateInput();
-                    this.show();
+                    if (this.getModuleName() === 'datepicker') {
+                        this.show();
+                    }
                     break;
@@ -337,3 +340,9 @@ case 'escape':
         DatePicker.prototype.strictModeUpdate = function () {
-            var format = ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.format.replace('dd', 'd');
+            var format;
+            if (this.getModuleName() === 'datetimepicker') {
+                format = !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;
+            }
+            else {
+                format = ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.format.replace('dd', 'd');
+            }
             if (!ej2_base_4.isNullOrUndefined(format)) {
@@ -345,6 +354,15 @@ var len = format.split('M').length - 1;
             }
-            var dateOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
+            var dateOptions;
+            if (this.getModuleName() === 'datetimepicker') {
+                dateOptions = {
+                    format: !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,
+                    type: 'dateTime', skeleton: 'yMd'
+                };
+            }
+            else {
+                dateOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };
+            }
             var date = this.globalize.parseDate(this.inputElement.value, dateOptions);
             if (this.strictMode && date) {
-                ej2_inputs_1.Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputElement, this.floatLabelType, false);
+                ej2_inputs_1.Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputElement, this.floatLabelType, this.showClearButton);
                 if (this.inputElement.value !== this.previousEleValue) {
@@ -372,5 +390,8 @@ this.setProperties({ value: date }, true);
             this.popupWrapper = ej2_base_3.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });
+            if (!ej2_base_4.isNullOrUndefined(this.cssClass)) {
+                this.popupWrapper.classList.add(this.cssClass);
+            }
             document.body.appendChild(this.popupWrapper);
             if (ej2_base_2.Browser.isDevice) {
-                this.modelHdr();
+                this.modelHeader();
                 this.modal = ej2_base_3.createElement('div');
@@ -393,14 +414,16 @@ this.modal.className = '' + ROOT + ' e-date-modal';
                 open: function () {
-                    if (document.activeElement !== _this.inputElement && !ej2_base_2.Browser.isDevice) {
-                        _this.calendarElement.children[1].firstElementChild.focus();
-                        _this.calendarKeyboardModules = new ej2_base_2.KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {
-                            eventName: 'keydown',
-                            keyAction: _this.CalendarKeyActionHandle.bind(_this),
-                            keyConfigs: _this.calendarKeyConfigs
-                        });
-                        _this.calendarKeyboardModules = new ej2_base_2.KeyboardEvents(_this.inputWrapper.container.children[1], {
-                            eventName: 'keydown',
-                            keyAction: _this.CalendarKeyActionHandle.bind(_this),
-                            keyConfigs: _this.calendarKeyConfigs
-                        });
+                    if (_this.getModuleName() !== 'datetimepicker') {
+                        if (document.activeElement !== _this.inputElement && !ej2_base_2.Browser.isDevice) {
+                            _this.calendarElement.children[1].firstElementChild.focus();
+                            _this.calendarKeyboardModules = new ej2_base_2.KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {
+                                eventName: 'keydown',
+                                keyAction: _this.CalendarKeyActionHandle.bind(_this),
+                                keyConfigs: _this.calendarKeyConfigs
+                            });
+                            _this.calendarKeyboardModules = new ej2_base_2.KeyboardEvents(_this.inputWrapper.container.children[_this.index], {
+                                eventName: 'keydown',
+                                keyAction: _this.CalendarKeyActionHandle.bind(_this),
+                                keyConfigs: _this.calendarKeyConfigs
+                            });
+                        }
                     }
@@ -410,8 +433,4 @@ }, close: function () {
                         if (_this.isDateIconClicked) {
-                            _this.addIconTabindex();
-                            _this.inputWrapper.container.children[1].focus();
+                            _this.inputWrapper.container.children[_this.index].focus();
                         }
-                        else {
-                            _this.iconBlurHandler();
-                        }
                     }
@@ -427,5 +446,6 @@ if (_this.value) {
             });
+            this.popupObj.element.classList.add(this.cssClass);
             this.setAriaAttributes();
         };
-        DatePicker.prototype.modelHdr = function () {
+        DatePicker.prototype.modelHeader = function () {
             var modelHeader = ej2_base_3.createElement('div', { className: 'e-model-header' });
@@ -460,15 +480,25 @@ var yearHeading = ej2_base_3.createElement('h5', { className: 'e-model-year' });
             this.selectCalendar(e);
+            this.changedArgs.event = e;
             this.trigger('change', this.changedArgs);
             this.previousDate = this.value;
-            this.focusIn(false);
-            this.focusOut(false);
-            this.isTriggerPrevented = false;
         };
         DatePicker.prototype.selectCalendar = function (e) {
             var date;
+            var tempFormat;
+            if (this.getModuleName() === 'datetimepicker') {
+                tempFormat = !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;
+            }
+            else {
+                tempFormat = this.format;
+            }
             if (this.value) {
-                date = this.globalize.formatDate(this.changedArgs.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
+                if (this.getModuleName() === 'datetimepicker') {
+                    date = this.globalize.formatDate(this.changedArgs.value, { format: tempFormat, type: 'dateTime', skeleton: 'yMd' });
+                }
+                else {
+                    date = this.globalize.formatDate(this.changedArgs.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
+                }
             }
             if (!ej2_base_4.isNullOrUndefined(date)) {
-                ej2_inputs_1.Input.setValue(date, this.inputElement, this.floatLabelType, false);
+                ej2_inputs_1.Input.setValue(date, this.inputElement, this.floatLabelType, this.showClearButton);
             }
@@ -505,3 +535,3 @@ this.hide();
             var args = {
-                popupElement: this.popupObj
+                popup: this.popupObj
             };
@@ -530,3 +560,3 @@ ej2_base_4.merge(args, this.preventArgs);
             var args = {
-                popupElement: this.popupObj
+                popup: this.popupObj
             };
@@ -562,31 +592,10 @@ this.preventArgs = {
         DatePicker.prototype.focusIn = function (triggerEvent) {
-            this.focusedElement = document.activeElement;
-            if (!triggerEvent) {
-                this.isTriggerPrevented = true;
-            }
             this.inputElement.focus();
             ej2_base_3.addClass([this.inputWrapper.container], [INPUTFOCUS]);
-            if (triggerEvent) {
-                this.trigger('focus');
-            }
+            this.trigger('focus');
         };
-        DatePicker.prototype.focusOut = function (triggerEvent) {
-            var ele = document.activeElement;
+        DatePicker.prototype.focusOut = function () {
             this.inputElement.blur();
             ej2_base_3.removeClass([this.inputWrapper.container], [INPUTFOCUS]);
-            if (triggerEvent) {
-                this.trigger('blur');
-            }
-            else {
-                if (this.focusedElement) {
-                    this.focusedElement.focus();
-                }
-                if (!ej2_base_2.Browser.isDevice) {
-                    if (this.isDateIconClicked) {
-                        this.addIconTabindex();
-                        this.inputWrapper.container.children[1].focus();
-                    }
-                }
-                this.isTriggerPrevented = true;
-            }
+            this.trigger('blur');
         };
@@ -606,2 +615,4 @@ DatePicker.prototype.currentView = function () {
         DatePicker.prototype.destroy = function () {
+            _super.prototype.destroy.call(this);
+            this.keyboardModules.destroy();
             if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {
@@ -623,4 +634,4 @@ _super.prototype.destroy.call(this);
             ej2_base_1.EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);
-            this.inputWrapper.container.parentElement.appendChild(this.inputEleCopy);
-            ej2_base_3.removeClass([this.inputElement], [ROOT, RTL]);
+            this.inputWrapper.container.insertAdjacentElement('afterend', this.inputEleCopy);
+            ej2_base_3.removeClass([this.inputElement], [ROOT, RTL, INPUTROOT]);
             ej2_base_3.removeClass([this.inputWrapper.container], DATEWRAPPER);
@@ -632,7 +643,13 @@ ej2_base_3.detach(this.inputWrapper.container);
             this.inputElement = this.element;
+            this.index = this.showClearButton ? 2 : 1;
             var ej2Instance = ej2_base_4.getValue('ej2_instances', this.element);
             this.ngTag = null;
-            if (this.element.tagName === 'EJ-DATEPICKER') {
+            if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {
                 this.ngTag = this.element.tagName;
                 var inputElement = ej2_base_3.createElement('input');
+                var index = 0;
+                for (index; index < this.element.attributes.length; index++) {
+                    inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                    inputElement.innerHTML = this.element.innerHTML;
+                }
                 this.element.parentNode.appendChild(inputElement);
@@ -647,4 +664,10 @@ this.element.parentNode.removeChild(this.element);
             else {
-                this.inputElement.id = ej2_base_4.getUniqueID('ej2-datepicker');
-                ej2_base_3.attributes(this.element, { 'id': this.inputElement.id });
+                if (this.getModuleName() === 'datetimepicker') {
+                    this.inputElement.id = ej2_base_4.getUniqueID('ej2-datetimepicker');
+                    ej2_base_3.attributes(this.element, { 'id': this.inputElement.id });
+                }
+                else {
+                    this.inputElement.id = ej2_base_4.getUniqueID('ej2-datepicker');
+                    ej2_base_3.attributes(this.element, { 'id': this.inputElement.id });
+                }
             }
@@ -657,4 +680,13 @@ this.checkHtmlAttributes();
             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', 'type'];
+            var options;
+            if (this.getModuleName() === 'datetimepicker') {
+                options = {
+                    format: !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,
+                    type: 'dateTime', skeleton: 'yMd'
+                };
+            }
+            else {
+                options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };
+            }
             for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
@@ -735,4 +767,13 @@ var prop = attributes_1[_i];
             }
-            var inputVal = this.globalize.formatDate(valueCopy, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
-            ej2_inputs_1.Input.setValue(inputVal, this.inputElement, this.floatLabelType, false);
+            var inputVal;
+            if (this.getModuleName() === 'datetimepicker') {
+                inputVal = this.globalize.formatDate(valueCopy, {
+                    format: !ej2_base_4.isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,
+                    type: 'dateTime', skeleton: 'yMd'
+                });
+            }
+            else {
+                inputVal = this.globalize.formatDate(valueCopy, { format: this.format, type: 'dateTime', skeleton: 'yMd' });
+            }
+            ej2_inputs_1.Input.setValue(inputVal, this.inputElement, this.floatLabelType, this.showClearButton);
         };
@@ -773,3 +814,3 @@ DatePicker.prototype.setAriaAttributes = function () {
                         if (ej2_base_4.isNullOrUndefined(this.value)) {
-                            ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, false);
+                            ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
                             this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));
@@ -808,2 +849,5 @@ }
                         ej2_inputs_1.Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);
+                        if (this.popupWrapper) {
+                            ej2_base_3.addClass([this.popupWrapper], [newProp.cssClass]);
+                        }
                         break;
@@ -841,3 +885,3 @@ case 'strictMode':
         __decorate([
-            ej2_base_1.Property(false)
+            ej2_base_1.Property(true)
         ], DatePicker.prototype, "showClearButton", void 0);
@@ -844,0 +888,0 @@ __decorate([

src/daterangepicker/daterangepicker-model.d.ts

@@ -1,6 +0,27 @@
-import { Property, EventHandler, 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 {PresetsArgs} from "./daterangepicker";
+import { Property, EventHandler, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, Event, EmitType, L10n, Browser, ChildProperty } from '@syncfusion/ej2-base';import { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';import { isNullOrUndefined, isUndefined, 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 {CalendarModel} from "../calendar/calendar-model";
 
 /**
+ * Interface for a class Presets
+ */
+export interface PresetsModel {
+
+    /**
+     * Defines the label string of the preset range. 
+     */
+    label?: string;
+
+    /**
+     * Defines the start date of the preset range 
+     */
+    start?: Date;
+
+    /**
+     * Defines the end date of the preset range 
+     */
+    end?: Date;
+
+}
+
+/**
  * Interface for a class DateRangePicker
@@ -26,3 +47,3 @@ */
      */
-    presets?: PresetsArgs[];
+    presets?: PresetsModel[];
 
@@ -43,3 +64,3 @@ /**
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -163,3 +184,3 @@ showClearButton?: boolean;
     /**
-     * Triggers when the date range is selected successfully in DateRangePicker.
+     * Triggers on selecting the start and end date.
      * @event 
@@ -166,0 +187,0 @@ */

src/daterangepicker/daterangepicker.d.ts

 /// <reference path="../calendar/calendar-model.d.ts" />
-import { KeyboardEvents, BaseEventArgs, EmitType } from '@syncfusion/ej2-base';
+import { KeyboardEvents, BaseEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';
 import { CalendarView, Calendar, NavigatedEventArgs } from '../calendar/calendar';
-import { DateRangePickerModel } from './daterangepicker-model';
-export interface PresetsArgs extends BaseEventArgs {
-    /** Defines the label string of the preset range */
+import { Popup } from '@syncfusion/ej2-popups';
+import { PresetsModel, DateRangePickerModel } from './daterangepicker-model';
+export declare class Presets extends ChildProperty<Presets> {
+    /**
+     * Defines the label string of the preset range.
+     */
     label: string;
-    /** Defines the start date of the preset range */
+    /**
+     * Defines the start date of the preset range
+     */
     start: Date;
-    /** Defines the end date of the preset range */
+    /**
+     * Defines the end date of the preset range
+     */
     end: Date;
@@ -29,3 +36,3 @@ }
     /** Defines the popup element */
-    element: HTMLElement;
+    popup: Popup;
 }
@@ -95,2 +102,3 @@ /**
     private disabledDays;
+    private isMobile;
     private presetKeyConfig;
@@ -113,3 +121,3 @@ private keyInputConfigs;
      */
-    presets: PresetsArgs[];
+    presets: PresetsModel[];
     /**
@@ -127,3 +135,3 @@ * Specifies the width of the DateRangePicker component.
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -228,3 +236,3 @@ showClearButton: boolean;
     /**
-     * Triggers when the date range is selected successfully in DateRangePicker.
+     * Triggers on selecting the start and end date.
      * @event
@@ -389,3 +397,2 @@ */
     hide(): void;
-    private resetTime(date);
     private setLocale();
@@ -392,0 +399,0 @@ /**

src/index.d.ts

@@ -8,1 +8,2 @@ /**
 export * from './timepicker/index';
+export * from './datetimepicker/index';

src/index.js

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

src/timepicker/timepicker-model.d.ts

@@ -1,3 +0,3 @@
-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';
-import {ChangeEventArgs,PopupEventArgs} from "./timepicker";
+import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, AnimationModel, Browser, BaseEventArgs } 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, ListBaseOptions } from '@syncfusion/ej2-lists';
+import {ChangeEventArgs,PopupEventArgs,ItemEventArgs} from "./timepicker";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -68,3 +68,3 @@
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -80,2 +80,9 @@ showClearButton?: boolean;
     /**
+     * Specifies the scroll bar position if there is no value is selected in the popup list or
+     *  the given value is not present in the popup list. 
+     * @default null
+     */
+    scrollTo?: Date;
+
+    /**
      * Gets or sets the value of the component. The value is parsed based on the format. 
@@ -129,2 +136,8 @@ * @default null
     /**
+     * Triggers while rendering the each popup list item.
+     * @event
+     */
+    itemRender?: EmitType<ItemEventArgs>;
+
+    /**
      * Triggers when the popup is closed.
@@ -131,0 +144,0 @@ * @event

src/timepicker/timepicker.d.ts

 import { Internationalization } from '@syncfusion/ej2-base';
-import { KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { KeyboardEvents, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';
 import { EmitType, Component } from '@syncfusion/ej2-base';
@@ -17,2 +17,16 @@ import { Popup } from '@syncfusion/ej2-popups';
 }
+/**
+ * Interface for before list item render .
+ * @private
+ */
+export interface ItemEventArgs extends BaseEventArgs {
+    /** Defines the created LI element. */
+    element: HTMLElement;
+    /** Defines the displayed text value in a popup list. */
+    text: string;
+    /** Defines the Date object of displayed text in a popup list. */
+    value: Date;
+    /** Specifies whether to disable the current time value or not. */
+    isDisabled: Boolean;
+}
 export interface CursorPositionDetails {
@@ -32,6 +46,12 @@ /** Defines the text selection starting position. */
     /** Defines the TimePicker popup element. */
-    popupElement: Popup;
+    popup: Popup;
 }
+export declare namespace TimePickerBase {
+    function createListItems(min: Date, max: Date, globalize: Internationalization, timeFormat: string, step: number): {
+        collection: number[];
+        list: HTMLElement;
+    };
+}
 /**
- * TimePicker is an intuitive interface control which provides an options to select a time value
+ * TimePicker is an intuitive interface component which provides an options to select a time value
  * from popup list or to set a desired time value.
@@ -66,2 +86,3 @@ * ```
     private isNavigate;
+    private disableItemCollection;
     protected isPreventBlur: boolean;
@@ -129,3 +150,3 @@ private isTextSelected;
      * Specifies whether to show or hide the clear Icon
-     * @default false
+     * @default true
      */
@@ -139,2 +160,8 @@ showClearButton: boolean;
     /**
+     * Specifies the scroll bar position if there is no value is selected in the popup list or
+     *  the given value is not present in the popup list.
+     * @default null
+     */
+    scrollTo: Date;
+    /**
      * Gets or sets the value of the component. The value is parsed based on the format.
@@ -180,2 +207,7 @@ * @default null
     /**
+     * Triggers while rendering the each popup list item.
+     * @event
+     */
+    itemRender: EmitType<ItemEventArgs>;
+    /**
      * Triggers when the popup is closed.
@@ -205,2 +237,3 @@ * @event
     protected render(): void;
+    private validateDisable();
     private initialize();
@@ -230,2 +263,4 @@ private checkDateValue(value);
     private setScrollPosition();
+    private findScrollTop(element);
+    private setScrollTo();
     private getText();
@@ -252,3 +287,5 @@ private getValue(value);
     private scrollHandler();
+    private setMinMax(minVal, maxVal);
     protected validateMinMax(dateVal: Date | string, minVal: Date, maxVal: Date): Date | string;
+    private valueIsDisable(value);
     protected validateState(val: string | Date): boolean;
@@ -274,2 +311,3 @@ protected strictOperation(minimum: Date, maximum: Date, dateVal: Date | string, val: Date): Date | string;
     protected elementValue(value: Date): void;
+    private validLiElement(index, backward?);
     protected keyHandler(event: KeyboardEventArgs): void;
@@ -276,0 +314,0 @@ protected setPopupPosition(): number;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16847879

increased by59.64%

Number of package files

143

increased by36.19%

Lines of code

200808

increased by80.92%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

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

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

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

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

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

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

• + Added@syncfusion/ej2-splitbuttons@16.4.53(transitive)

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@^16.1.24

• Updated@syncfusion/ej2-buttons@^16.1.24

• Updated@syncfusion/ej2-inputs@^16.1.24

• Updated@syncfusion/ej2-lists@^16.1.24

• Updated@syncfusion/ej2-popups@^16.1.24