Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-calendars

Package Overview
Dependencies
5
Maintainers
2
Versions
234
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 16.1.42 to 16.1.45

14

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog

### DateRangePicker
#### New Features
- `DrillDown` support has been provided for DateRangePicker component that allows to quick navigate back and forth from month and year views to select a range easier.
- `Value` property support has been provided for DateRangePicker component to set a date range.
## 16.1.42 (2018-05-15)
### DateTimePicker

@@ -10,3 +20,3 @@

- `ngOnDestroy` related issues has been fixed.
- `ngOnDestroy` related issues with destroying DateTimePicker component has been fixed.

@@ -19,3 +29,3 @@ ## 16.1.38 (2018-05-02)

- Now, Date parser returns `null` value while parsing invalid date string.
- Now, Date parser will return the `null` value while parsing invalid date string.

@@ -22,0 +32,0 @@ ## 16.1.35 (2018-04-17)

2

dist/global/index.d.ts
/*!
* filename: index.d.ts
* version : 16.1.42
* version : 16.1.45
* Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.

@@ -5,0 +5,0 @@ * Use of this code is subject to the terms of our license.

4

package.json
{
"name": "@syncfusion/ej2-calendars",
"version": "16.1.42",
"version": "16.1.45",
"description": "Essential JS 2 Calendar Components",

@@ -13,3 +13,3 @@ "author": "Syncfusion Inc.",

"@syncfusion/ej2-popups": "~16.1.42",
"@syncfusion/ej2-inputs": "~16.1.40",
"@syncfusion/ej2-inputs": "~16.1.45",
"@syncfusion/ej2-lists": "~16.1.42",

@@ -16,0 +16,0 @@ "@syncfusion/ej2-buttons": "~16.1.37"

98

src/calendar/calendar-model.d.ts

@@ -1,17 +0,12 @@

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';
import {CalendarView,ChangedEventArgs,NavigatedEventArgs,RenderDayCellEventArgs} from "./calendar";
import { Component, EventHandler, Internationalization, } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, KeyboardEvents, L10n } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';import { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';import { createElement, removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';import { getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';import { Property, Event, EmitType, isNullOrUndefined } from '@syncfusion/ej2-base';
import {CalendarView,NavigatedEventArgs,RenderDayCellEventArgs,ChangedEventArgs} from "./calendar";
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class Calendar
* Interface for a class CalendarBase
* @private
*/
export interface CalendarModel extends ComponentModel{
export interface CalendarBaseModel extends ComponentModel{
/**
* Gets or sets the selected date of the Calendar.
* @default null
*/
value?: Date;
/**
* Gets or sets the minimum date that can be selected in the Calendar.

@@ -30,2 +25,4 @@ * @default new Date(1900, 00, 01)

* Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
* > For more details about firstDayOfWeek refer to
* [`First day of week`](./how-to.html#change-the-first-day-of-the-week) documentation.
* @default 0

@@ -38,3 +35,26 @@ */

* With the help of this property, initial view can be changed to year or decade view.
* Refer the documentation
* {@link https://ej2.syncfusion.com/documentation/calendar/calendar-views.html?lang=typescript here}
* to know more about this property with demo.
* @default Month
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* Name<br/></td><td colSpan=1 rowSpan=1>
* Description<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Month<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from month view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Year<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from year view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Decade<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from decade view.<br/></td></tr>
* </table>
*
*/

@@ -46,3 +66,26 @@ start?: CalendarView;

* Depth view should be smaller than the start view to restrict its view navigation.
* @default month
* Refer the documentation
* {@link https://ej2.syncfusion.com/documentation/calendar/calendar-views.html?lang=typescript here}
* to know more about this property with demo.
* @default Month
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* Name<br/></td><td colSpan=1 rowSpan=1>
* Description<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Month<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to month view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Year<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to year view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Decade<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to decade view.<br/></td></tr>
* </table>
*
*/

@@ -54,2 +97,4 @@ depth?: CalendarView;

* The week number is displayed in every week row.
* > For more details about weekNumber refer to
* [`Calendar with week number`](./how-to.html#render-the-calendar-with-week-numbers)documentation.
* @default false

@@ -66,8 +111,2 @@ */

/**
     * Specifies whether the Component is persist or not. Here value property will be persisting after browser refresh.
     * @default false
     */
enablePersistence?: boolean;
/**
* Triggers when Calendar is created.

@@ -85,8 +124,2 @@ * @event

/**
* Triggers when the Calendar value is changed.
* @event
*/
change?: EmitType<ChangedEventArgs>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.

@@ -103,2 +136,21 @@ * @event

}
/**
* Interface for a class Calendar
*/
export interface CalendarModel extends CalendarBaseModel{
/**
* Gets or sets the selected date of the Calendar.
* @default null
*/
value?: Date;
/**
* Triggers when the Calendar value is changed.
* @event
*/
change?: EmitType<ChangedEventArgs>;
}

327

src/calendar/calendar.d.ts

@@ -1,5 +0,6 @@

import { Component, Internationalization, EmitType } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { BaseEventArgs } from '@syncfusion/ej2-base';
import { CalendarModel } from './calendar-model';
import { Component, Internationalization } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
import { KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { CalendarModel, CalendarBaseModel } from './calendar-model';
/**

@@ -10,14 +11,6 @@ * Specifies the view of the calendar.

/**
* Represents the Calendar component that allows the user to select a date.
* ```html
* <div id="calendar"/>
* ```
* ```typescript
* <script>
* var calendarObj = new Calendar({ value: new Date() });
* calendarObj.appendTo("#calendar");
* </script>
* ```
*
* @private
*/
export declare class Calendar extends Component<HTMLElement> implements INotifyPropertyChanged {
export declare class CalendarBase extends Component<HTMLElement> implements INotifyPropertyChanged {
protected headerElement: HTMLElement;

@@ -36,12 +29,10 @@ protected contentElement: HTMLElement;

protected currentDate: Date;
protected changedArgs: ChangedEventArgs;
protected navigatedArgs: NavigatedEventArgs;
private renderDaycellArg;
private effect;
protected renderDayCellArgs: RenderDayCellEventArgs;
protected effect: string;
protected previousDate: Date;
protected changeHandler: Function;
protected navigateHandler: Function;
protected navigatePreviousHandler: Function;
protected navigateNextHandler: Function;
private l10;
protected l10: L10n;
protected todayDisabled: boolean;

@@ -54,7 +45,2 @@ protected todayDate: Date;

/**
* Gets or sets the selected date of the Calendar.
* @default null
*/
value: Date;
/**
* Gets or sets the minimum date that can be selected in the Calendar.

@@ -71,2 +57,4 @@ * @default new Date(1900, 00, 01)

* Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
* > For more details about firstDayOfWeek refer to
* [`First day of week`](./how-to.html#change-the-first-day-of-the-week) documentation.
* @default 0

@@ -78,3 +66,26 @@ */

* With the help of this property, initial view can be changed to year or decade view.
* Refer the documentation
* {@link https://ej2.syncfusion.com/documentation/calendar/calendar-views.html?lang=typescript here}
* to know more about this property with demo.
* @default Month
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* Name<br/></td><td colSpan=1 rowSpan=1>
* Description<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Month<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from month view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Year<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from year view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Decade<br/></td><td colSpan=1 rowSpan=1>
* Start the view level from decade view.<br/></td></tr>
* </table>
*
*/

@@ -85,3 +96,26 @@ start: CalendarView;

* Depth view should be smaller than the start view to restrict its view navigation.
* @default month
* Refer the documentation
* {@link https://ej2.syncfusion.com/documentation/calendar/calendar-views.html?lang=typescript here}
* to know more about this property with demo.
* @default Month
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* Name<br/></td><td colSpan=1 rowSpan=1>
* Description<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Month<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to month view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Year<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to year view.<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Decade<br/></td><td colSpan=1 rowSpan=1>
* Allow navigation up to decade view.<br/></td></tr>
* </table>
*
*/

@@ -92,2 +126,4 @@ depth: CalendarView;

* The week number is displayed in every week row.
* > For more details about weekNumber refer to
* [`Calendar with week number`](./how-to.html#render-the-calendar-with-week-numbers)documentation.
* @default false

@@ -102,7 +138,2 @@ */

/**
* Specifies whether the Component is persist or not. Here value property will be persisting after browser refresh.
* @default false
*/
enablePersistence: boolean;
/**
* Triggers when Calendar is created.

@@ -118,7 +149,2 @@ * @event

/**
* Triggers when the Calendar value is changed.
* @event
*/
change: EmitType<ChangedEventArgs>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.

@@ -139,3 +165,3 @@ * @event

*/
constructor(options?: CalendarModel, element?: string | HTMLElement);
constructor(options?: CalendarBaseModel, element?: string | HTMLElement);
/**

@@ -147,15 +173,14 @@ * To Initialize the control rendering.

protected render(): void;
protected processDate(): void;
private validateDate();
private minMaxUpdate();
protected header(): void;
protected content(): void;
private getCultureValues();
private contentHdr();
private contentBody();
private updateFooter();
private contentFooter();
protected validateDate(value?: Date): void;
protected minMaxUpdate(value?: Date): void;
protected createHeader(): void;
protected createContent(): void;
protected getCultureValues(): string[];
protected createContentHeader(): void;
protected createContentBody(): void;
protected updateFooter(): void;
protected createContentFooter(): void;
protected wireEvents(): void;
protected todayButtonClick(): void;
protected keyActionHandle(e: KeyboardEventArgs): void;
protected todayButtonClick(value?: Date): void;
protected keyActionHandle(e: KeyboardEventArgs, value?: Date): void;
protected KeyboardNavigate(number: number, currentView: number, e: KeyboardEvent, max: Date, min: Date): void;

@@ -166,18 +191,19 @@ /**

*/
protected preRender(): void;
private minMaxDate(localDate);
protected renderMonths(e?: Event): void;
private renderDays(currentDate, e?);
private renderYears(e?);
private renderDecades(e?);
private dayCell(localDate);
protected preRender(value?: Date): void;
protected minMaxDate(localDate: Date): Date;
protected renderMonths(e?: Event, value?: Date): void;
protected renderDays(currentDate: Date, e?: Event, value?: Date): HTMLElement[];
protected renderYears(e?: Event, value?: Date): void;
protected renderDecades(e?: Event, value?: Date): void;
protected dayCell(localDate: Date): HTMLElement;
protected firstDay(date: Date): Date;
protected lastDay(date: Date): Date;
protected checkDateValue(value: Date): Date;
private findlastDay(date);
private removeTheadEle();
private renderTemplate(elements, numCells, classNm, e?);
private clickHandler(e);
private contentClick(e, view, ele);
private switchView(view, e?);
protected findLastDay(date: Date): Date;
protected removeTableHeadElement(): void;
protected renderTemplate(elements: HTMLElement[], count: number, classNm: string, e?: Event, value?: Date): void;
protected clickHandler(e: MouseEvent, value: Date): void;
protected clickEventEmitter(e: MouseEvent): void;
protected contentClick(e?: MouseEvent, view?: number, element?: Element, value?: Date): void;
protected switchView(view: number, e?: Event): void;
/**

@@ -198,7 +224,7 @@ * To get component name

*/
onPropertyChanged(newProp: CalendarModel, oldProp: CalendarModel): void;
private setvalue();
private titleUpdate(date, view);
onPropertyChanged(newProp: CalendarBaseModel, oldProp: CalendarBaseModel): void;
protected setValueUpdate(): void;
protected titleUpdate(date: Date, view: string): void;
protected setActiveDescendant(): string;
private iconHandler();
protected iconHandler(): void;
/**

@@ -209,8 +235,8 @@ * Destroys the widget.

destroy(): void;
private title(e?);
private getViewNumber(stringVal);
private navTitle(e?);
private previous();
protected title(e?: Event): void;
protected getViewNumber(stringVal: string): number;
protected navigateTitle(e?: Event): void;
protected previous(): void;
protected navigatePrevious(e: MouseEvent | KeyboardEvent): void;
private next();
protected next(): void;
protected navigateNext(eve: MouseEvent | KeyboardEvent): void;

@@ -229,30 +255,131 @@ /**

currentView(): string;
private getDateVal(date);
private getCultureObjects(ld, c);
private getWeek(d);
private setStartDate(date, time);
protected getDateVal(date: Date, value: Date): boolean;
protected getCultureObjects(ld: Object, c: string): Object;
protected getWeek(d: Date): number;
protected setStartDate(date: Date, time: number): void;
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();
protected selectDate(e: MouseEvent | KeyboardEventArgs, date: Date, node: Element, value: Date): void;
protected setAriaActiveDescendant(): void;
protected previousIconHandler(disabled: boolean): void;
protected renderDayCellEvent(args: RenderDayCellEventArgs): void;
protected navigatedEvent(eve: MouseEvent | KeyboardEvent): void;
private triggerNavigate(event);
protected changeEvent(e: Event): void;
private triggerChange(e);
protected triggerNavigate(event: MouseEvent | KeyboardEvent): void;
protected nextIconHandler(disabled: boolean): void;
private compare(startDate, endDate, modifier);
protected compare(startDate: Date, endDate: Date, modifier: number): number;
protected isMinMaxRange(date: Date): boolean;
private compareYear(start, end);
private compareDecade(start, end);
private shiftArray(array, i);
protected compareYear(start: Date, end: Date): number;
protected compareDecade(start: Date, end: Date): number;
protected shiftArray(array: string[], i: number): string[];
protected addDay(date: Date, i: number, e: KeyboardEvent, max: Date, min: Date): void;
private findNextTD(date, column, max, min);
private getMaxDays(d);
private setDateDecade(date, year);
private setDateYear(date, value);
private compareMonth(start, end);
protected findNextTD(date: Date, column: number, max: Date, min: Date): boolean;
protected getMaxDays(d: Date): number;
protected setDateDecade(date: Date, year: number): void;
protected setDateYear(date: Date, value: Date): void;
protected compareMonth(start: Date, end: Date): number;
}
/**
* Represents the Calendar component that allows the user to select a date.
* ```html
* <div id="calendar"/>
* ```
* ```typescript
* <script>
* var calendarObj = new Calendar({ value: new Date() });
* calendarObj.appendTo("#calendar");
* </script>
* ```
*/
export declare class Calendar extends CalendarBase {
protected changedArgs: ChangedEventArgs;
protected changeHandler: Function;
/**
* Gets or sets the selected date of the Calendar.
* @default null
*/
value: Date;
/**
* Triggers when the Calendar value is changed.
* @event
*/
change: EmitType<ChangedEventArgs>;
/**
* Initialized new instance of Calendar Class.
* Constructor for creating the widget
* @param {CalendarModel} options?
* @param {string|HTMLElement} element?
*/
constructor(options?: CalendarModel, element?: string | HTMLElement);
/**
* To Initialize the control rendering.
* @returns void
* @private
*/
protected render(): void;
protected validateDate(): void;
protected minMaxUpdate(): void;
protected todayButtonClick(): void;
protected keyActionHandle(e: KeyboardEventArgs): void;
/**
* Initialize the event handler
* @private
*/
protected preRender(): void;
createContent(): void;
protected minMaxDate(localDate: Date): Date;
protected renderMonths(e?: Event): void;
protected renderDays(currentDate: Date, e?: Event): HTMLElement[];
protected renderYears(e?: Event): void;
protected renderDecades(e?: Event): void;
protected renderTemplate(elements: HTMLElement[], count: number, classNm: string, e?: Event): void;
protected clickHandler(e: MouseEvent): void;
protected switchView(view: number, e?: Event): void;
/**
* To get component name
* @private
*/
protected getModuleName(): string;
/**
* Gets the properties to be maintained upon browser refresh.
* @returns string
*/
getPersistData(): string;
/**
* Called internally if any of the property value changed.
* returns void
* @private
*/
onPropertyChanged(newProp: CalendarModel, oldProp: CalendarModel): void;
/**
* Destroys the widget.
* @returns void
*/
destroy(): void;
/**
* This method is used to navigate to the month/year/decade view of the Calendar.
* @param {string} view - Specifies the view of the Calendar.
* @param {Date} date - Specifies the focused date in a view.
* @returns void
*/
navigateTo(view: CalendarView, date: Date): void;
/**
* Gets the current view of the Calendar.
* @returns string
*/
currentView(): string;
protected selectDate(e: MouseEvent | KeyboardEventArgs, date: Date, element: Element): void;
protected changeEvent(e: Event): void;
protected triggerChange(e: MouseEvent | KeyboardEvent): void;
}
export interface NavigatedEventArgs extends BaseEventArgs {
/** Defines the current view of the Calendar. */
view?: string;
/** Defines the focused date in a view. */
date?: Date;
/**
* Specifies the original event arguments.
*/
event?: KeyboardEvent | MouseEvent | Event;
}
export interface RenderDayCellEventArgs extends BaseEventArgs {

@@ -271,12 +398,16 @@ /** Specifies whether to disable the current date or not. */

value?: Date;
/** Defines the event of the Calendar. */
/**
* Specifies the original event arguments.
*/
e?: KeyboardEvent | MouseEvent | Event;
/**
* Specifies the original event arguments.
*/
event?: KeyboardEvent | MouseEvent | Event;
/** Defines the element. */
element?: HTMLElement | HTMLInputElement;
/**
* If the event is triggered by interaction, it returns true. Otherwise, it returns false.
*/
isInteracted?: boolean;
}
export interface NavigatedEventArgs extends BaseEventArgs {
/** Defines the current view of the Calendar. */
view?: string;
/** Defines the focused date in a view. */
date?: Date;
/** Defines the event of the Calendar. */
event?: KeyboardEvent | MouseEvent;
}

32

src/datepicker/datepicker-model.d.ts

@@ -1,2 +0,2 @@

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, 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';
import { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, EmitType, Event, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';import { createElement, detach, addClass, removeClass, closest, classList, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, InputObject, IInput, FloatLabelType, BlurEventArgs, FocusEventArgs } from '@syncfusion/ej2-inputs';import { ChangedEventArgs, CalendarView, Calendar } from '../calendar/calendar';
import {PopupObjectArgs,PreventableEventArgs} from "./datepicker";

@@ -26,2 +26,4 @@ import {CalendarModel} from "../calendar/calendar-model";

* will resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`](https://ej2.syncfusion.com/documentation/datepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -33,3 +35,5 @@ */

* Specifies the format of the value that to be displayed in component. By default, the format is
* based on the culture.
* based on the culture.
* > For more details refer to
* [`Format`](https://ej2.syncfusion.com/demos/#/material/datepicker/date-format.html) sample.
* @default null

@@ -41,2 +45,4 @@ */

* Specifies the component to be disabled or not.
* > For more details refer to
* [`Disabled State`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#disabled-state) documentation.
* @default true

@@ -47,3 +53,3 @@ */

/**
* Specifies whether to show or hide the clear Icon
* Specifies whether to show or hide the clear Icon.
* @default true

@@ -66,3 +72,5 @@ */

/**
* Specifies the component in readonly state.
* Specifies the component in readonly state.
* > For more details refer to
* [`Readonly`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#set-the-readonly) documentation.
* @default false

@@ -80,3 +88,9 @@ */

* Specifies the placeholder text to be floated.
* @default Never
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -99,11 +113,15 @@ floatLabelType?: FloatLabelType;

* Triggers when the control loses the focus.
* > For more details refer to
* [`Blur`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#blur-the-datepicker) documentation.
* @event
*/
blur?: EmitType<Object>;
blur?: EmitType<BlurEventArgs>;
/**
* Triggers when the control gets focus.
* > For more details refer to
* [`Focus`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#focus-the-datepicker) documentation.
* @event
*/
focus?: EmitType<Object>;
focus?: EmitType<FocusEventArgs>;

@@ -110,0 +128,0 @@ /**

62

src/datepicker/datepicker.d.ts
/// <reference path="../calendar/calendar-model.d.ts" />
import { KeyboardEventArgs, EmitType, L10n } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { InputObject, IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
import { Calendar, ChangedEventArgs, CalendarView } from '../calendar/calendar';
import { InputObject, IInput, FloatLabelType, BlurEventArgs, FocusEventArgs } from '@syncfusion/ej2-inputs';
import { ChangedEventArgs, CalendarView, Calendar } from '../calendar/calendar';
import { DatePickerModel } from './datepicker-model';

@@ -21,3 +21,3 @@ /**

export declare class DatePicker extends Calendar implements IInput {
private popupObj;
protected popupObj: Popup;
protected inputWrapper: InputObject;

@@ -31,3 +31,3 @@ private modal;

private calendarKeyboardModules;
private previousEleValue;
protected previousElementValue: string;
protected ngTag: string;

@@ -37,3 +37,3 @@ protected dateTimeFormat: string;

protected l10n: L10n;
private preventArgs;
protected preventArgs: PopupObjectArgs;
private isDateIconClicked;

@@ -61,2 +61,4 @@ private index;

* will resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`](https://ej2.syncfusion.com/documentation/datepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -68,2 +70,4 @@ */

* based on the culture.
* > For more details refer to
* [`Format`](https://ej2.syncfusion.com/demos/#/material/datepicker/date-format.html) sample.
* @default null

@@ -74,2 +78,4 @@ */

* Specifies the component to be disabled or not.
* > For more details refer to
* [`Disabled State`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#disabled-state) documentation.
* @default true

@@ -79,3 +85,3 @@ */

/**
* Specifies whether to show or hide the clear Icon
* Specifies whether to show or hide the clear Icon.
* @default true

@@ -96,2 +102,4 @@ */

* Specifies the component in readonly state.
* > For more details refer to
* [`Readonly`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#set-the-readonly) documentation.
* @default false

@@ -107,3 +115,9 @@ */

* Specifies the placeholder text to be floated.
* @default Never
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -123,10 +137,14 @@ floatLabelType: FloatLabelType;

* Triggers when the control loses the focus.
* > For more details refer to
* [`Blur`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#blur-the-datepicker) documentation.
* @event
*/
blur: EmitType<Object>;
blur: EmitType<BlurEventArgs>;
/**
* Triggers when the control gets focus.
* > For more details refer to
* [`Focus`](https://ej2.syncfusion.com/documentation/datepicker/how-to.html?lang=typescript#focus-the-datepicker) documentation.
* @event
*/
focus: EmitType<Object>;
focus: EmitType<FocusEventArgs>;
/**

@@ -155,3 +173,5 @@ * Triggers when the component is created.

protected updateInput(): void;
protected minMaxUpdates(): void;
protected bindEvents(): void;
private inputChangeHandler(e);
private bindClearEvent();

@@ -163,3 +183,3 @@ protected resetHandler(e?: MouseEvent): void;

private inputFocusHandler();
private inputBlurHandler();
private inputBlurHandler(e);
private documentHandler(e);

@@ -170,6 +190,6 @@ protected inputKeyActionHandle(e: KeyboardEventArgs): void;

private modelHeader();
protected changeTrigger(): void;
protected changeTrigger(e?: MouseEvent | KeyboardEvent): void;
protected navigatedEvent(): void;
protected changeEvent(e?: Event): void;
protected selectCalendar(e?: Event): void;
protected changeEvent(e?: MouseEvent | KeyboardEvent | Event): void;
protected selectCalendar(e?: MouseEvent | KeyboardEvent | Event): void;
protected isCalendar(): boolean;

@@ -181,3 +201,3 @@ protected setWidth(width: number | string): void;

*/
show(): void;
show(type?: null, e?: MouseEvent | KeyboardEvent | KeyboardEventArgs): void;
/**

@@ -187,3 +207,3 @@ * Hide the Calendar.

*/
hide(): void;
hide(e?: MouseEvent | KeyboardEvent | Event): void;
/**

@@ -239,4 +259,14 @@ * Sets the focus to widget for interaction.

export interface PopupObjectArgs {
/** Prevents the default action */
preventDefault?: Function;
/** Defines the DatePicker popup element. */
popup: Popup;
popup?: Popup;
/**
* Illustrates whether the current action needs to be prevented or not.
*/
cancel?: boolean;
/**
* Specifies the original event arguments.
*/
e?: MouseEvent | KeyboardEvent | Event;
}

@@ -243,0 +273,0 @@ export interface PreventableEventArgs {

303

src/datepicker/datepicker.js

@@ -42,3 +42,3 @@ var __extends = (this && this.__extends) || (function () {

var _this = _super.call(this, options, element) || this;
_this.previousEleValue = '';
_this.previousElementValue = '';
_this.isDateIconClicked = false;

@@ -81,3 +81,4 @@ _this.keyConfigs = {

this.updateInput();
this.previousEleValue = this.inputElement.value;
this.previousElementValue = this.inputElement.value;
this.previousDate = new Date(+this.value);
};

@@ -152,3 +153,5 @@ DatePicker.prototype.createInput = function () {

if (this.strictMode) {
_super.prototype.processDate.call(this);
_super.prototype.validateDate.call(this);
this.minMaxUpdates();
_super.prototype.minMaxUpdate.call(this);
}

@@ -182,2 +185,14 @@ if (!ej2_base_4.isNullOrUndefined(this.value)) {

;
DatePicker.prototype.minMaxUpdates = function () {
if (!ej2_base_4.isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max && this.strictMode) {
this.setProperties({ value: this.min }, true);
this.changedArgs = { value: this.value };
}
else {
if (!ej2_base_4.isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max && this.strictMode) {
this.setProperties({ value: this.max }, true);
this.changedArgs = { value: this.value };
}
}
};
DatePicker.prototype.bindEvents = function () {

@@ -188,3 +203,6 @@ if (this.enabled) {

ej2_base_1.EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);
this.bindClearEvent();
ej2_base_1.EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);
if (this.showClearButton) {
ej2_base_1.EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);
}
}

@@ -195,2 +213,6 @@ else {

ej2_base_1.EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);
ej2_base_1.EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);
if (this.showClearButton) {
ej2_base_1.EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);
}
}

@@ -203,4 +225,7 @@ this.keyboardModules = new ej2_base_2.KeyboardEvents(this.inputElement, {

};
DatePicker.prototype.inputChangeHandler = function (e) {
e.stopPropagation();
};
DatePicker.prototype.bindClearEvent = function () {
if (this.showClearButton) {
if (this.showClearButton && this.inputWrapper.clearButton) {
ej2_base_1.EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);

@@ -216,2 +241,3 @@ }

ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
this.updateInput();
this.changeEvent(event);

@@ -223,7 +249,7 @@ };

if (this.isCalendar()) {
this.hide();
this.hide(e);
}
else {
this.isDateIconClicked = true;
this.show();
this.show(null, e);
if (!ej2_base_2.Browser.isDevice) {

@@ -244,3 +270,3 @@ if (this.getModuleName() === 'datetimepicker') {

if (this.isCalendar()) {
this.hide();
this.hide(e);
}

@@ -253,3 +279,3 @@ else {

if (!this.isCalendar()) {
this.show();
this.show(null, e);
}

@@ -266,19 +292,26 @@ else {

case 'tab':
this.hide();
this.hide(e);
}
};
DatePicker.prototype.inputFocusHandler = function () {
var focusArguments = {
model: this
};
this.isDateIconClicked = false;
this.trigger('focus');
this.trigger('focus', focusArguments);
};
DatePicker.prototype.inputBlurHandler = function () {
DatePicker.prototype.inputBlurHandler = function (e) {
this.strictModeUpdate();
this.updateInput();
this.changeTrigger();
this.changeTrigger(e);
this.errorClass();
if (this.isCalendar() && document.activeElement === this.inputElement) {
this.hide();
this.hide(e);
}
this.inputElement.blur();
this.trigger('blur');
if (this.getModuleName() === 'datepicker') {
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
}
if (this.isCalendar()) {

@@ -300,3 +333,3 @@ this.calendarKeyboardModules = new ej2_base_2.KeyboardEvents(this.calendarElement.children[1].firstElementChild, {

&& (!target.classList.contains('e-day'))) {
this.hide();
this.hide(e);
}

@@ -307,3 +340,3 @@ };

case 'altUpArrow':
this.hide();
this.hide(e);
this.inputElement.focus();

@@ -315,7 +348,7 @@ break;

if (this.getModuleName() === 'datepicker') {
this.show();
this.show(null, e);
}
break;
case 'escape':
this.hide();
this.hide(e);
break;

@@ -325,6 +358,6 @@ case 'enter':

this.updateInput();
this.changeTrigger();
this.changeTrigger(e);
this.errorClass();
if (!this.isCalendar() && document.activeElement === this.inputElement) {
this.hide();
this.hide(e);
}

@@ -335,5 +368,5 @@ break;

this.updateInput();
this.changeTrigger();
this.changeTrigger(e);
this.errorClass();
this.hide();
this.hide(e);
break;

@@ -374,3 +407,3 @@ default:

ej2_inputs_1.Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputElement, this.floatLabelType, this.showClearButton);
if (this.inputElement.value !== this.previousEleValue) {
if (this.inputElement.value !== this.previousElementValue) {
this.setProperties({ value: date }, true);

@@ -380,3 +413,3 @@ }

else if (!this.strictMode) {
if (this.inputElement.value !== this.previousEleValue) {
if (this.inputElement.value !== this.previousElementValue) {
this.setProperties({ value: date }, true);

@@ -445,3 +478,5 @@ }

}
_this.popupObj.destroy();
if (_this.popupObj) {
_this.popupObj.destroy();
}
ej2_base_3.detach(_this.popupWrapper);

@@ -470,8 +505,11 @@ _this.popupObj = _this.popupWrapper = null;

};
DatePicker.prototype.changeTrigger = function () {
if (this.inputElement.value !== this.previousEleValue) {
DatePicker.prototype.changeTrigger = function (e) {
if (this.inputElement.value !== this.previousElementValue) {
if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {
this.changedArgs.value = this.value;
this.changedArgs.event = this.changedArgs.e = e || null;
this.changedArgs.element = this.element;
this.changedArgs.isInteracted = !ej2_base_4.isNullOrUndefined(e);
this.trigger('change', this.changedArgs);
this.previousEleValue = this.inputElement.value;
this.previousElementValue = this.inputElement.value;
this.previousDate = new Date('' + this.value);

@@ -486,5 +524,10 @@ }

this.selectCalendar(e);
this.changedArgs.event = e;
this.changedArgs.e = this.changedArgs.event = e;
this.changedArgs.element = this.element;
this.changedArgs.isInteracted = !ej2_base_4.isNullOrUndefined(e);
this.trigger('change', this.changedArgs);
this.previousDate = this.value;
this.previousDate = this.value && new Date(+this.value);
this.hide(e);
this.previousElementValue = this.inputElement.value;
this.errorClass();
};

@@ -511,5 +554,2 @@ DatePicker.prototype.selectCalendar = function (e) {

}
this.hide();
this.previousEleValue = this.inputElement.value;
this.errorClass();
};

@@ -527,3 +567,3 @@ DatePicker.prototype.isCalendar = function () {

else if (typeof width === 'string') {
this.inputWrapper.container.style.width = (this.width);
this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (this.width) : (ej2_base_2.formatUnit(this.width));
}

@@ -534,87 +574,104 @@ else {

};
DatePicker.prototype.show = function () {
var prevent = true;
var outOfRange;
if (!ej2_base_4.isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {
outOfRange = new Date('' + this.value);
this.setProperties({ 'value': null }, true);
DatePicker.prototype.show = function (type, e) {
if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {
return;
}
else {
outOfRange = this.value || null;
}
if (!this.isCalendar()) {
_super.prototype.render.call(this);
this.setProperties({ 'value': outOfRange || null }, true);
this.previousDate = outOfRange;
this.createCalendar();
}
this.preventArgs = {
preventDefault: function () {
prevent = false;
var prevent_1 = true;
var outOfRange = void 0;
if (!ej2_base_4.isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {
outOfRange = new Date('' + this.value);
this.setProperties({ 'value': null }, true);
}
};
var args = {
popup: this.popupObj
};
ej2_base_4.merge(args, this.preventArgs);
this.trigger('open', args);
if (prevent) {
ej2_base_3.addClass(this.inputWrapper.buttons, ACTIVE);
document.body.appendChild(this.popupObj.element);
this.popupObj.refreshPosition(this.inputElement);
var openAnimation = {
name: 'FadeIn',
duration: ej2_base_2.Browser.isDevice ? 0 : OPENDURATION,
else {
outOfRange = this.value || null;
}
if (!this.isCalendar()) {
_super.prototype.render.call(this);
this.setProperties({ 'value': outOfRange || null }, true);
this.previousDate = outOfRange;
this.createCalendar();
}
this.preventArgs = {
preventDefault: function () {
prevent_1 = false;
},
popup: this.popupObj,
e: e || null,
cancel: false
};
this.popupObj.show(new ej2_base_2.Animation(openAnimation));
this.setAriaAttributes();
this.trigger('open', this.preventArgs);
if (prevent_1 && !this.preventArgs.cancel) {
ej2_base_3.addClass(this.inputWrapper.buttons, ACTIVE);
document.body.appendChild(this.popupObj.element);
this.popupObj.refreshPosition(this.inputElement);
var openAnimation = {
name: 'FadeIn',
duration: ej2_base_2.Browser.isDevice ? 0 : OPENDURATION,
};
this.popupObj.show(new ej2_base_2.Animation(openAnimation));
this.setAriaAttributes();
}
else {
ej2_base_3.detach(this.popupWrapper);
this.popupObj.destroy();
this.popupWrapper = this.popupObj = null;
}
ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
}
else {
ej2_base_3.detach(this.popupWrapper);
this.popupObj.destroy();
this.popupWrapper = this.popupObj = null;
}
ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
};
DatePicker.prototype.hide = function () {
var args = {
popup: this.popupObj
};
this.preventArgs = {
preventDefault: function () {
prevent = false;
}
};
var prevent = true;
ej2_base_3.removeClass(this.inputWrapper.buttons, ACTIVE);
ej2_base_3.removeClass([document.body], OVERFLOW);
ej2_base_4.merge(args, this.preventArgs);
this.trigger('close', args);
if (this.isCalendar() && prevent) {
var closeAnimation = {
name: 'FadeOut',
duration: CLOSEDURATION,
DatePicker.prototype.hide = function (e) {
if (!ej2_base_4.isNullOrUndefined(this.popupWrapper)) {
var prevent_2 = true;
this.preventArgs = {
preventDefault: function () {
prevent_2 = false;
},
popup: this.popupObj,
e: e || null,
cancel: false
};
this.popupObj.hide();
this.keyboardModule.destroy();
ej2_base_3.removeClass(this.inputWrapper.buttons, ACTIVE);
ej2_base_3.removeClass([document.body], OVERFLOW);
if (this.isCalendar()) {
this.trigger('close', this.preventArgs);
}
if (this.isCalendar() && (prevent_2 && !this.preventArgs.cancel)) {
var closeAnimation = {
name: 'FadeOut',
duration: CLOSEDURATION,
};
this.popupObj.hide();
this.keyboardModule.destroy();
ej2_base_3.removeClass(this.inputWrapper.buttons, ACTIVE);
}
this.setAriaAttributes();
this.previousElementValue = this.inputElement.value;
if (ej2_base_2.Browser.isDevice && this.modal) {
this.modal.style.display = 'none';
this.modal.outerHTML = '';
this.modal = null;
}
ej2_base_1.EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);
}
this.setAriaAttributes();
this.previousEleValue = this.inputElement.value;
if (ej2_base_2.Browser.isDevice && this.modal) {
this.modal.style.display = 'none';
this.modal.outerHTML = '';
this.modal = null;
}
ej2_base_1.EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);
};
DatePicker.prototype.focusIn = function (triggerEvent) {
this.inputElement.focus();
ej2_base_3.addClass([this.inputWrapper.container], [INPUTFOCUS]);
this.trigger('focus');
if (document.activeElement !== this.inputElement && this.enabled) {
this.inputElement.focus();
ej2_base_3.addClass([this.inputWrapper.container], [INPUTFOCUS]);
var focusArguments = {
model: this
};
this.trigger('focus', focusArguments);
}
};
DatePicker.prototype.focusOut = function () {
this.inputElement.blur();
ej2_base_3.removeClass([this.inputWrapper.container], [INPUTFOCUS]);
this.trigger('blur');
if (document.activeElement === this.inputElement) {
this.inputElement.blur();
ej2_base_3.removeClass([this.inputWrapper.container], [INPUTFOCUS]);
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
}
};

@@ -661,4 +718,2 @@ DatePicker.prototype.currentView = function () {

this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);
}
if (this.inputElement) {
ej2_base_3.removeClass([this.inputElement], [INPUTROOT]);

@@ -735,5 +790,2 @@ }

this.setProperties({ enabled: !enabled }, true);
if (!enabled) {
this.inputElement.setAttribute('aria-disabled', 'true');
}
break;

@@ -788,2 +840,3 @@ case 'readonly':

var previousValCopy = this.previousDate;
this.minMaxUpdates();
_super.prototype.render.call(this);

@@ -794,3 +847,5 @@ this.previousDate = previousValCopy;

if (!this.strictMode) {
this.setProperties({ 'value': valueCopy }, true);
if (typeof this.value === 'string' || ((typeof this.value === 'object') && (+this.value) !== (+valueCopy))) {
this.setProperties({ value: valueCopy }, true);
}
}

@@ -800,3 +855,2 @@ if (!ej2_base_4.isNullOrUndefined(this.calendarElement.querySelectorAll(dateIdString)[0])) {

if (!this.strictMode) {
this.setProperties({ 'value': null }, true);
this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));

@@ -833,4 +887,8 @@ }

DatePicker.prototype.errorClass = function () {
var dateIdString = '*[id^="/id"]'.replace('/id', '' + (+this.value));
var isDisabledDate = this.calendarElement &&
this.calendarElement.querySelectorAll(dateIdString)[0] &&
this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled');
if ((!ej2_base_4.isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max))
|| (!this.strictMode && this.inputElement.value !== '' && ej2_base_4.isNullOrUndefined(this.value))) {
|| (!this.strictMode && this.inputElement.value !== '' && ej2_base_4.isNullOrUndefined(this.value) || isDisabledDate)) {
ej2_base_3.addClass([this.inputWrapper.container], ERROR);

@@ -850,5 +908,5 @@ }

newProp.value = this.globalize.parseDate(newProp.value, options);
this.setProperties({ value: newProp.value }, true);
}
this.setProperties({ value: newProp.value }, true);
this.previousEleValue = this.inputElement.value;
this.previousElementValue = this.inputElement.value;
if (ej2_base_4.isNullOrUndefined(this.value)) {

@@ -859,3 +917,3 @@ ej2_inputs_1.Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);

this.updateInput();
this.changeTrigger();
this.changeTrigger(null);
break;

@@ -910,2 +968,7 @@ case 'format':

break;
case 'floatLabelType':
this.floatLabelType = newProp.floatLabelType;
ej2_inputs_1.Input.removeFloating(this.inputWrapper);
ej2_inputs_1.Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
break;
default:

@@ -917,3 +980,3 @@ if (this.calendarElement) {

}
this.hide();
this.hide(null);
}

@@ -920,0 +983,0 @@ };

189

src/daterangepicker/daterangepicker-model.d.ts

@@ -1,3 +0,4 @@

import { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } 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, 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, FloatLabelType } from '@syncfusion/ej2-inputs';import { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
import {CalendarModel} from "../calendar/calendar-model";
import { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, Event, EmitType, Browser, L10n, 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, merge, extend } from '@syncfusion/ej2-base';import { CalendarView, CalendarBase, NavigatedEventArgs, RenderDayCellEventArgs } from '../calendar/calendar';import { Popup } from '@syncfusion/ej2-popups';import { Button } from '@syncfusion/ej2-buttons';import { Input, InputObject, FloatLabelType, FocusEventArgs, BlurEventArgs } from '@syncfusion/ej2-inputs';import { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
import {RangeEventArgs} from "./daterangepicker";
import {CalendarBaseModel} from "../calendar/calendar-model";

@@ -29,5 +30,88 @@ /**

*/
export interface DateRangePickerModel extends CalendarModel{
export interface DateRangePickerModel extends CalendarBaseModel{
/**
* Gets or sets the start and end date of the Calendar.
* @default null
*/
value?: Date[];
/**
     * Specifies whether the Component is persist or not. Here value property will be persisting after browser refresh.
     * @default false
     */
enablePersistence?: boolean;
/**
* Enable or disable rendering component in right to left direction.
* @default false
*/
enableRtl?: boolean;
/**
* Gets or sets the minimum date that can be selected in the Calendar.
* @default new Date(1900, 00, 01)
*/
min?: Date;
/**
* Gets or sets the maximum date that can be selected in the Calendar.
* @default new Date(2099, 11, 31)
*/
max?: Date;
/**
* Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
* @default 'en-US'
*/
locale?: string;
/**
* Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
* > For more details about firstDayOfWeek refer to
* [`First day of week`](./how-to.html#change-the-first-day-of-the-week) documentation.
* @default 0
*/
firstDayOfWeek?: number;
/**
* Determines whether the week number of the Calendar is to be displayed or not.
* The week number is displayed in every week row.
* > For more details about weekNumber refer to
* [`Calendar with week number`](./how-to.html#render-the-calendar-with-week-numbers)documentation.
* @default false
*/
weekNumber?: boolean;
/**
* Triggers when Calendar is created.
* @event
*/
created?: EmitType<Object>;
/**
     * Triggers when Calendar is destroyed.
     * @event
     */
destroyed?: EmitType<Object>;
/**
* Triggers when the Calendar value is changed.
* @event
*/
change?: EmitType<RangeEventArgs>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.
* @event
*/
navigated?: EmitType<NavigatedEventArgs>;
/**
* Triggers when each day cell of the Calendar is rendered.
* @event
*/
renderDayCell?: EmitType<RenderDayCellEventArgs>;
/**
* Gets or sets the start date of the date range selection.

@@ -46,2 +130,4 @@ * @default null

* Set the predefined ranges which let the user pick required range easily in a component.
* > For more details refer to
* [`Preset Ranges`] (./customization.html#preset-ranges) documentation.
* @default null

@@ -64,8 +150,2 @@ */

/**
     * Specifies whether the Component is persist or not. Here, start and endDate property will be persisting after browser refresh.
     * @default false
     */
enablePersistence?: boolean;
/**
* Specifies whether to show or hide the clear Icon

@@ -77,2 +157,25 @@ * @default true

/**
     * Specifies whether the today button is displayed or not.
     * @default true
* @hidden
     */
showTodayButton?: boolean;
/**
* Specifies the initial view of the Calendar when it is opened.
* With the help of this property, initial view can be changed to year or decade view.
* @default Month
* @hidden
*/
start?: CalendarView;
/**
* Sets the maximum level of view (month, year, decade) in the Calendar.
* Depth view should be smaller than the start view to restrict its view navigation.
* @default Month
* @hidden
*/
depth?: CalendarView;
/**
* Sets the root CSS class to the DateRangePicker which allows you to customize the appearance.

@@ -91,2 +194,4 @@ * @default ''

* Specifies the minimum span that can be allowed in date range selection.
* > For more details refer to
* [`Range Span`] (./range-restriction.html#range-span) documentation.
* @default null

@@ -98,2 +203,4 @@ */

* Specifies the maximum span that can be allowed in a date range selection.
* > For more details refer to
* [`Range Span`] (./range-restriction.html#range-span) documentation.
* @default null

@@ -105,2 +212,4 @@ */

* Specifies the component to act as strict which allows entering only a valid date range in a DateRangePicker.
* > For more details refer to
* [`Strict Mode`](./range-restriction.html#strict-mode)documentation.
* @default false

@@ -112,2 +221,4 @@ */

* Sets or gets the required date format to the start and end date string.
* > For more details refer to
* [`Format`](https://ej2.syncfusion.com/demos/#/material/daterangepicker/format.html)sample.
* @default null

@@ -131,3 +242,9 @@ */

* Specifies the placeholder text to be floated.
* @default Never
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -143,37 +260,2 @@ floatLabelType?: FloatLabelType;

/**
* Specifies the initial view of the Calendar when it is opened.
* With the help of this property, initial view can be changed to year or decade view.
* @default Month
* @hidden
*/
start?: CalendarView;
/**
* Sets the maximum level of view (month, year, decade) in the Calendar.
* Depth view should be smaller than the start view to restrict its view navigation.
* @default Month
* @hidden
*/
depth?: CalendarView;
/**
* Gets or sets the selected date of the Calendar
* @default null
* @hidden
*/
value?: Date;
/**
* Triggers when the DateRangePicker is created
* @event
*/
created?: EmitType<Object>;
/**
     * Triggers when the DateRangePicker is destroyed.
     * @event
     */
destroyed?: EmitType<Object>;
/**
* Triggers when the DateRangePicker is opened.

@@ -191,15 +273,2 @@ * @event

/**
* Triggers when the date range value is changed in DateRangePicker.
* @event
*/
change?: EmitType<Object>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.
* @event
* @hidden
*/
navigated?: EmitType<NavigatedEventArgs>;
/**
     * Triggers on selecting the start and end date.

@@ -214,3 +283,3 @@ * @event

     */
focus?: EmitType<Object>;
focus?: EmitType<FocusEventArgs>;

@@ -221,4 +290,4 @@ /**

     */
blur?: EmitType<Object>;
blur?: EmitType<BlurEventArgs>;
}

233

src/daterangepicker/daterangepicker.d.ts
/// <reference path="../calendar/calendar-model.d.ts" />
import { KeyboardEvents, BaseEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';
import { CalendarView, Calendar, NavigatedEventArgs } from '../calendar/calendar';
import { KeyboardEvents, BaseEventArgs, KeyboardEventArgs, EmitType, ChildProperty } from '@syncfusion/ej2-base';
import { CalendarView, CalendarBase, NavigatedEventArgs, RenderDayCellEventArgs } from '../calendar/calendar';
import { Popup } from '@syncfusion/ej2-popups';
import { FloatLabelType } from '@syncfusion/ej2-inputs';
import { FloatLabelType, FocusEventArgs, BlurEventArgs } from '@syncfusion/ej2-inputs';
import { PresetsModel, DateRangePickerModel } from './daterangepicker-model';

@@ -22,12 +22,24 @@ export declare class Presets extends ChildProperty<Presets> {

export interface RangeEventArgs extends BaseEventArgs {
/** Defines the value */
value?: Date[];
/** Defines the value string in the input element */
value: string;
text?: string;
/** Defines the start date */
startDate: Date;
startDate?: Date;
/** Defines the end date */
endDate: Date;
endDate?: Date;
/** Defines the day span between the range */
daySpan: number;
daySpan?: number;
/** Specifies the element. */
element?: HTMLElement | HTMLInputElement;
/**
* Specifies the original event arguments.
*/
e?: Event;
/**
* If the event is triggered by interaction, it returns true. Otherwise, it returns false.
*/
isInteracted?: boolean;
}
export interface RangePopupEventArgs extends BaseEventArgs {
export interface RangePopupEventArgs {
/** Defines the range string in the input element */

@@ -37,4 +49,14 @@ date: string;

model: DateRangePickerModel;
/** Defines the popup element */
popup: Popup;
/** Prevents the default action */
preventDefault?: Function;
/**
* Illustrates whether the current action needs to be prevented or not.
*/
cancel?: boolean;
/** Defines the DatePicker popup object. */
popup?: Popup;
/**
* Specifies the original event arguments.
*/
e?: MouseEvent | KeyboardEvent | Event;
}

@@ -54,3 +76,3 @@ /**

*/
export declare class DateRangePicker extends Calendar {
export declare class DateRangePicker extends CalendarBase {
private popupObj;

@@ -63,5 +85,9 @@ private inputWrapper;

private leftCalCurrentDate;
private initStartDate;
private initEndDate;
private rightCalCurrentDate;
private leftCalPrevIcon;
private leftCalNextIcon;
private leftTitle;
private rightTitle;
private rightCalPrevIcon;

@@ -88,3 +114,2 @@ private rightCalNextIcon;

private targetElement;
private isTab;
private disabledDayCnt;

@@ -111,3 +136,75 @@ private angularTag;

private defaultConstant;
private preventBlur;
private preventFocus;
/**
* Gets or sets the start and end date of the Calendar.
* @default null
*/
value: Date[];
/**
* Specifies whether the Component is persist or not. Here value property will be persisting after browser refresh.
* @default false
*/
enablePersistence: boolean;
/**
* Enable or disable rendering component in right to left direction.
* @default false
*/
enableRtl: boolean;
/**
* Gets or sets the minimum date that can be selected in the Calendar.
* @default new Date(1900, 00, 01)
*/
min: Date;
/**
* Gets or sets the maximum date that can be selected in the Calendar.
* @default new Date(2099, 11, 31)
*/
max: Date;
/**
* Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
* @default 'en-US'
*/
locale: string;
/**
* Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
* > For more details about firstDayOfWeek refer to
* [`First day of week`](./how-to.html#change-the-first-day-of-the-week) documentation.
* @default 0
*/
firstDayOfWeek: number;
/**
* Determines whether the week number of the Calendar is to be displayed or not.
* The week number is displayed in every week row.
* > For more details about weekNumber refer to
* [`Calendar with week number`](./how-to.html#render-the-calendar-with-week-numbers)documentation.
* @default false
*/
weekNumber: boolean;
/**
* Triggers when Calendar is created.
* @event
*/
created: EmitType<Object>;
/**
* Triggers when Calendar is destroyed.
* @event
*/
destroyed: EmitType<Object>;
/**
* Triggers when the Calendar value is changed.
* @event
*/
change: EmitType<RangeEventArgs>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.
* @event
*/
navigated: EmitType<NavigatedEventArgs>;
/**
* Triggers when each day cell of the Calendar is rendered.
* @event
*/
renderDayCell: EmitType<RenderDayCellEventArgs>;
/**
* Gets or sets the start date of the date range selection.

@@ -124,2 +221,4 @@ * @default null

* Set the predefined ranges which let the user pick required range easily in a component.
* > For more details refer to
* [`Preset Ranges`] (./customization.html#preset-ranges) documentation.
* @default null

@@ -139,7 +238,2 @@ */

/**
* Specifies whether the Component is persist or not. Here, start and endDate property will be persisting after browser refresh.
* @default false
*/
enablePersistence: boolean;
/**
* Specifies whether to show or hide the clear Icon

@@ -150,2 +244,22 @@ * @default true

/**
* Specifies whether the today button is displayed or not.
* @default true
* @hidden
*/
showTodayButton: boolean;
/**
* Specifies the initial view of the Calendar when it is opened.
* With the help of this property, initial view can be changed to year or decade view.
* @default Month
* @hidden
*/
start: CalendarView;
/**
* Sets the maximum level of view (month, year, decade) in the Calendar.
* Depth view should be smaller than the start view to restrict its view navigation.
* @default Month
* @hidden
*/
depth: CalendarView;
/**
* Sets the root CSS class to the DateRangePicker which allows you to customize the appearance.

@@ -162,2 +276,4 @@ * @default ''

* Specifies the minimum span that can be allowed in date range selection.
* > For more details refer to
* [`Range Span`] (./range-restriction.html#range-span) documentation.
* @default null

@@ -168,2 +284,4 @@ */

* Specifies the maximum span that can be allowed in a date range selection.
* > For more details refer to
* [`Range Span`] (./range-restriction.html#range-span) documentation.
* @default null

@@ -174,2 +292,4 @@ */

* Specifies the component to act as strict which allows entering only a valid date range in a DateRangePicker.
* > For more details refer to
* [`Strict Mode`](./range-restriction.html#strict-mode)documentation.
* @default false

@@ -180,2 +300,4 @@ */

* Sets or gets the required date format to the start and end date string.
* > For more details refer to
* [`Format`](https://ej2.syncfusion.com/demos/#/material/daterangepicker/format.html)sample.
* @default null

@@ -196,3 +318,9 @@ */

* Specifies the placeholder text to be floated.
* @default Never
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -206,32 +334,2 @@ floatLabelType: FloatLabelType;

/**
* Specifies the initial view of the Calendar when it is opened.
* With the help of this property, initial view can be changed to year or decade view.
* @default Month
* @hidden
*/
start: CalendarView;
/**
* Sets the maximum level of view (month, year, decade) in the Calendar.
* Depth view should be smaller than the start view to restrict its view navigation.
* @default Month
* @hidden
*/
depth: CalendarView;
/**
* Gets or sets the selected date of the Calendar
* @default null
* @hidden
*/
value: Date;
/**
* Triggers when the DateRangePicker is created
* @event
*/
created: EmitType<Object>;
/**
* Triggers when the DateRangePicker is destroyed.
* @event
*/
destroyed: EmitType<Object>;
/**
* Triggers when the DateRangePicker is opened.

@@ -247,13 +345,2 @@ * @event

/**
* Triggers when the date range value is changed in DateRangePicker.
* @event
*/
change: EmitType<Object>;
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.
* @event
* @hidden
*/
navigated: EmitType<NavigatedEventArgs>;
/**
* Triggers on selecting the start and end date.

@@ -267,3 +354,3 @@ * @event

*/
focus: EmitType<Object>;
focus: EmitType<FocusEventArgs>;
/**

@@ -273,3 +360,3 @@ * Triggers when the control loses the focus.

*/
blur: EmitType<Object>;
blur: EmitType<BlurEventArgs>;
/**

@@ -291,2 +378,3 @@ * Constructor for creating the widget

protected preRender(): void;
private updateValue();
private initProperty();

@@ -296,2 +384,3 @@ private initialize();

protected bindEvents(): void;
private inputChangeHandler(e);
private bindClearEvent();

@@ -315,3 +404,3 @@ protected resetHandler(e: MouseEvent): void;

private inputFocusHandler();
private inputBlurHandler();
private inputBlurHandler(e);
private clearRange();

@@ -329,3 +418,3 @@ private errorClass();

private checkMinMaxDays();
private rangeArgs();
private rangeArgs(e);
private otherMonthSelect(ele, isStartDate, sameDate?);

@@ -347,6 +436,5 @@ private selectRange(event, element);

private isPopupOpen();
private createHeader();
protected createRangeHeader(): HTMLElement;
private disableInput();
private validateMinMax();
private validateDates();
private validateRangeStrict();

@@ -357,5 +445,16 @@ private validateRange();

private isSameMonth(start, end);
private startMonthCurrentDate();
private selectNextMonth();
private selectStartMonth();
private createCalendar();
private leftNavTitle(e);
private rightNavTitle(e);
protected clickEventEmitter(e: MouseEvent): void;
/**
* Gets the current view of the Calendar.
* @returns string
* @hidden
*/
currentView(): string;
protected navigatedEvent(e: MouseEvent): void;
private createControl();

@@ -370,2 +469,3 @@ private cancelFunction(eve?);

private removeListSelection();
private setValue();
private applyPresetRange(values);

@@ -378,2 +478,3 @@ private renderCustomPopup();

private renderPopup();
protected popupCloseHandler(e: KeyboardEventArgs): void;
private calendarFocus();

@@ -398,3 +499,3 @@ private presetHeight();

private disabledDates();
private changeTrigger();
private changeTrigger(e?);
/**

@@ -401,0 +502,0 @@ * This method is used to navigate to the month/year/decade view of the Calendar.

4

src/datetimepicker/datetimepicker-model.d.ts

@@ -1,2 +0,2 @@

import { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser, RippleOptions } from '@syncfusion/ej2-base';import { Animation, EmitType, Event, AnimationModel, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';import { createElement, remove, addClass, L10n, removeClass, closest, classList, append, attributes } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input } from '@syncfusion/ej2-inputs';import { DatePicker } from '../datepicker/datepicker';import { TimePickerBase } from '../timepicker/timepicker';import { cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
import { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser, RippleOptions } from '@syncfusion/ej2-base';import { Animation, EmitType, Event, AnimationModel, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';import { createElement, remove, addClass, L10n, removeClass, closest, classList, append, attributes } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { Input, BlurEventArgs } from '@syncfusion/ej2-inputs';import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';import { TimePickerBase } from '../timepicker/timepicker';import { cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
import {DatePickerModel} from "../datepicker/datepicker-model";

@@ -48,2 +48,4 @@

* or else it will resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`] (https://ej2.syncfusion.com/documentation/datetimepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -50,0 +52,0 @@ */

24

src/datetimepicker/datetimepicker.d.ts

@@ -5,3 +5,3 @@ /// <reference path="../datepicker/datepicker-model.d.ts" />

import { KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { DatePicker } from '../datepicker/datepicker';
import { DatePicker, PopupObjectArgs } from '../datepicker/datepicker';
import { DateTimePickerModel } from './datetimepicker-model';

@@ -35,2 +35,3 @@ /**

private isNavigate;
protected isPreventBlur: boolean;
private timeValue;

@@ -48,2 +49,3 @@ protected l10n: L10n;

};
protected preventArgs: PopupObjectArgs;
/**

@@ -82,2 +84,4 @@ * Specifies the format of the time value that to be displayed in time popup list.

* or else it will resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`] (https://ej2.syncfusion.com/documentation/datetimepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -120,2 +124,3 @@ */

constructor(options?: DateTimePickerModel, element?: string | HTMLInputElement);
private focusHandler();
/**

@@ -131,2 +136,3 @@ * Sets the focus to widget for interaction.

focusOut(): void;
protected blurHandler(): void;
/**

@@ -162,7 +168,7 @@ * To destroy the widget.

private dateHandler(e?);
show(type?: string): void;
toggle(): void;
show(type?: string, e?: MouseEvent | KeyboardEvent): void;
toggle(e?: KeyboardEventArgs): void;
private listCreation();
private popupCreation(type);
private openPopup();
private popupCreation(type, e?);
private openPopup(e);
private documentClickHandler(event);

@@ -180,4 +186,4 @@ private isTimePopupOpen();

protected getPopupHeight(): number;
protected changeEvent(): void;
private updateValue();
protected changeEvent(e: Event): void;
private updateValue(e);
private setTimeScrollPosition();

@@ -199,4 +205,4 @@ private setInputValue(type);

private endTime(date);
hide(): void;
private closePopup();
hide(e?: KeyboardEvent | MouseEvent | Event): void;
private closePopup(e?);
protected preRender(): void;

@@ -203,0 +209,0 @@ protected getProperty(date: DateTimePickerModel, val: string): void;

257

src/datetimepicker/datetimepicker.js

@@ -58,14 +58,24 @@ var __extends = (this && this.__extends) || (function () {

}
DateTimePicker.prototype.focusIn = function () {
this.inputElement.focus();
DateTimePicker.prototype.focusHandler = function () {
ej2_base_3.addClass([this.inputWrapper.container], INPUTFOCUS);
};
DateTimePicker.prototype.focusIn = function () {
_super.prototype.focusIn.call(this);
};
DateTimePicker.prototype.focusOut = function () {
if (this.isTimePopupOpen()) {
if (document.activeElement === this.inputElement) {
this.inputElement.blur();
ej2_base_3.removeClass([this.inputWrapper.container], [INPUTFOCUS]);
}
};
DateTimePicker.prototype.blurHandler = function () {
if (this.isTimePopupOpen() && this.isPreventBlur) {
this.inputElement.focus();
return;
}
this.inputElement.blur();
ej2_base_3.removeClass([this.inputWrapper.container], INPUTFOCUS);
this.closePopup();
var blurArguments = {
model: this
};
this.trigger('blur', blurArguments);
};

@@ -116,2 +126,3 @@ DateTimePicker.prototype.destroy = function () {

this.previousDateTime = null;
this.isPreventBlur = false;
this.cloneElement = this.element.cloneNode(true);

@@ -232,4 +243,4 @@ this.dateTimeFormat = this.cldrDateTimeFormat();

ej2_base_1.EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler, this);
ej2_base_1.EventHandler.add(this.inputElement, 'blur', this.focusOut, this);
ej2_base_1.EventHandler.add(this.inputElement, 'focus', this.focusIn, this);
ej2_base_1.EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);
ej2_base_1.EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);
this.keyboardHandler = new ej2_base_4.KeyboardEvents(this.inputElement, {

@@ -245,4 +256,4 @@ eventName: 'keydown',

if (this.inputElement) {
ej2_base_1.EventHandler.remove(this.inputElement, 'blur', this.focusOut);
ej2_base_1.EventHandler.remove(this.inputElement, 'focus', this.focusIn);
ej2_base_1.EventHandler.remove(this.inputElement, 'blur', this.blurHandler);
ej2_base_1.EventHandler.remove(this.inputElement, 'focus', this.focusHandler);
}

@@ -306,5 +317,7 @@ if (this.keyboardHandler) {

if (this.enabled && !this.readonly) {
_super.prototype.hide.call(this);
if (this.isDatePopupOpen()) {
_super.prototype.hide.call(this, e);
}
if (this.isTimePopupOpen()) {
this.closePopup();
this.closePopup(e);
}

@@ -315,3 +328,3 @@ else {

}
this.popupCreation('time');
this.popupCreation('time', e);
}

@@ -326,36 +339,42 @@ }

if (this.enabled && !this.readonly) {
this.closePopup();
if (this.isTimePopupOpen()) {
this.closePopup(e);
}
if (!ej2_base_4.isNullOrUndefined(this.popupWrapper)) {
this.popupCreation('date');
this.popupCreation('date', e);
}
}
};
DateTimePicker.prototype.show = function (type) {
if (type === 'time') {
if (this.isDatePopupOpen()) {
this.hide();
}
this.popupCreation('time');
DateTimePicker.prototype.show = function (type, e) {
if ((this.enabled && this.readonly) || !this.enabled) {
return;
}
else {
if (this.isTimePopupOpen()) {
this.hide();
if (type === 'time' && !this.dateTimeWrapper) {
if (this.isDatePopupOpen()) {
this.hide(e);
}
this.popupCreation('time', e);
}
_super.prototype.show.call(this);
this.popupCreation('date');
else if (!this.popupObj) {
if (this.isTimePopupOpen()) {
this.hide(e);
}
_super.prototype.show.call(this);
this.popupCreation('date', e);
}
}
this.trigger('open');
};
DateTimePicker.prototype.toggle = function () {
DateTimePicker.prototype.toggle = function (e) {
if (this.isDatePopupOpen()) {
_super.prototype.hide.call(this);
this.popupCreation('time');
_super.prototype.hide.call(this, e);
this.show('time', null);
}
else if (this.isTimePopupOpen()) {
this.hide();
_super.prototype.show.call(this);
this.popupCreation('date');
this.hide(e);
_super.prototype.show.call(this, null, e);
this.popupCreation('date', null);
}
else {
this.show();
this.show(null, e);
}

@@ -381,40 +400,53 @@ };

};
DateTimePicker.prototype.popupCreation = function (type) {
DateTimePicker.prototype.popupCreation = function (type, e) {
if (type === 'date') {
ej2_base_3.addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);
ej2_base_3.attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });
this.trigger('open', this.popupWrapper);
if (!this.readonly && this.popupWrapper) {
ej2_base_3.addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);
ej2_base_3.attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });
}
}
else {
this.dateTimeWrapper = ej2_base_3.createElement('div', {
className: ROOT + ' ' + POPUP,
attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }
});
if (!ej2_base_4.isNullOrUndefined(this.cssClass)) {
this.dateTimeWrapper.classList.add(this.cssClass);
if (!this.readonly) {
this.dateTimeWrapper = ej2_base_3.createElement('div', {
className: ROOT + ' ' + POPUP,
attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }
});
if (!ej2_base_4.isNullOrUndefined(this.cssClass)) {
this.dateTimeWrapper.classList.add(this.cssClass);
}
if (!ej2_base_4.isNullOrUndefined(this.step) && this.step > 0) {
this.listCreation();
ej2_base_3.append([this.listWrapper], this.dateTimeWrapper);
}
document.body.appendChild(this.dateTimeWrapper);
this.addTimeSelection();
this.renderPopup();
this.setTimeScrollPosition();
this.openPopup(e);
this.popupObject.refreshPosition(this.inputElement);
}
if (!ej2_base_4.isNullOrUndefined(this.step) && this.step > 0) {
this.listCreation();
ej2_base_3.append([this.listWrapper], this.dateTimeWrapper);
}
document.body.appendChild(this.dateTimeWrapper);
this.addTimeSelection();
this.renderPopup();
this.setTimeScrollPosition();
this.openPopup();
this.popupObject.refreshPosition(this.inputElement);
}
};
DateTimePicker.prototype.openPopup = function () {
this.trigger('open');
var openAnimation = {
name: 'FadeIn',
duration: ANIMATIONDURATION,
DateTimePicker.prototype.openPopup = function (e) {
this.preventArgs = {
cancel: false,
popup: this.popupObject,
e: e || null
};
this.popupObject.show(new ej2_base_2.Animation(openAnimation));
ej2_base_3.addClass([this.inputWrapper.container], [ICONANIMATION]);
ej2_base_3.attributes(this.inputElement, { 'aria-expanded': 'true' });
ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);
this.trigger('open', this.preventArgs);
if (!this.preventArgs.cancel && !this.readonly) {
var openAnimation = {
name: 'FadeIn',
duration: ANIMATIONDURATION,
};
this.popupObject.show(new ej2_base_2.Animation(openAnimation));
ej2_base_3.addClass([this.inputWrapper.container], [ICONANIMATION]);
ej2_base_3.attributes(this.inputElement, { 'aria-expanded': 'true' });
ej2_base_1.EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);
}
};
DateTimePicker.prototype.documentClickHandler = function (event) {
if (!ej2_base_1.Browser.isDevice) {
event.preventDefault();
}
var target = event.target;

@@ -424,5 +456,11 @@ if (!(ej2_base_3.closest(target, '#' + (this.popupObject && this.popupObject.element.id))) && target !== this.inputElement

if (this.isTimePopupOpen()) {
this.hide();
this.hide(event);
}
}
else if (target !== this.inputElement) {
if (!ej2_base_1.Browser.isDevice) {
this.isPreventBlur = (ej2_base_1.Browser.isIE || ej2_base_1.Browser.info.name === 'edge') && (document.activeElement === this.inputElement);
event.preventDefault();
}
}
};

@@ -470,3 +508,3 @@ DateTimePicker.prototype.isTimePopupOpen = function () {

_this.dateTimeWrapper.innerHTML = '';
_this.listWrapper = _this.dateTimeWrapper = null;
_this.listWrapper = _this.dateTimeWrapper = undefined;
if (_this.inputEvent) {

@@ -534,5 +572,5 @@ _this.inputEvent.destroy();

};
DateTimePicker.prototype.changeEvent = function () {
DateTimePicker.prototype.changeEvent = function (e) {
if (+this.previousDateTime !== +this.value) {
_super.prototype.changeEvent.call(this);
_super.prototype.changeEvent.call(this, e);
if (!ej2_base_1.Browser.isDevice) {

@@ -545,6 +583,10 @@ this.inputElement.focus();

};
DateTimePicker.prototype.updateValue = function () {
DateTimePicker.prototype.updateValue = function (e) {
this.setInputValue('time');
if (+this.previousDateTime !== +this.value) {
this.changedArgs.value = this.value;
this.changedArgs = {
value: this.value, e: e || null,
isInteracted: !ej2_base_4.isNullOrUndefined(e),
element: this.element
};
this.addTimeSelection();

@@ -573,7 +615,9 @@ this.trigger('change', this.changedArgs);

if (type === 'date') {
this.inputElement.value = this.getFormattedValue(this.getFullDateTime());
this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());
this.setProperties({ value: this.getFullDateTime() }, true);
}
else {
this.inputElement.value = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));
var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));
ej2_inputs_1.Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);
this.previousElementValue = this.inputElement.value;
this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);

@@ -611,3 +655,3 @@ }

this.timeValue = li.getAttribute('data-value');
this.hide();
this.hide(event);
}

@@ -625,3 +669,3 @@ this.setSelection(li, event);

this.selectedElement.setAttribute('aria-selected', 'true');
this.updateValue();
this.updateValue(event);
}

@@ -754,19 +798,30 @@ };

};
DateTimePicker.prototype.hide = function () {
if (this.isDatePopupOpen()) {
_super.prototype.hide.call(this);
}
else if (this.isTimePopupOpen()) {
this.closePopup();
ej2_base_3.removeClass([document.body], OVERFLOW);
if (ej2_base_1.Browser.isDevice && this.timeModal) {
this.timeModal.style.display = 'none';
this.timeModal.outerHTML = '';
this.timeModal = null;
DateTimePicker.prototype.hide = function (e) {
if (this.popupObj || this.dateTimeWrapper) {
this.preventArgs = {
cancel: false,
popup: this.popupObj || this.popupObject,
e: e || null
};
if (ej2_base_4.isNullOrUndefined(this.popupObj)) {
this.trigger('close', this.preventArgs);
}
this.setTimeActiveDescendant();
if (!this.preventArgs.cancel) {
if (this.isDatePopupOpen()) {
_super.prototype.hide.call(this, e);
}
else if (this.isTimePopupOpen()) {
this.closePopup(e);
ej2_base_3.removeClass([document.body], OVERFLOW);
if (ej2_base_1.Browser.isDevice && this.timeModal) {
this.timeModal.style.display = 'none';
this.timeModal.outerHTML = '';
this.timeModal = null;
}
this.setTimeActiveDescendant();
}
}
}
this.trigger('close');
};
DateTimePicker.prototype.closePopup = function () {
DateTimePicker.prototype.closePopup = function (e) {
if (this.isTimePopupOpen() && this.popupObject) {

@@ -999,8 +1054,13 @@ var animModel = {

this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);
this.updateValue();
this.setInputValue('time');
if (+this.previousDateTime !== +this.value) {
this.changedArgs.value = this.value;
this.addTimeSelection();
this.previousDateTime = this.value;
}
}
else {
this.updateValue();
this.updateValue(event);
}
this.hide();
this.hide(event);
ej2_base_3.addClass([this.inputWrapper.container], INPUTFOCUS);

@@ -1010,3 +1070,3 @@ this.isNavigate = false;

case 'escape':
this.hide();
this.hide(event);
break;

@@ -1024,3 +1084,3 @@ default:

this.updateInput();
this.toggle();
this.toggle(event);
break;

@@ -1033,6 +1093,8 @@ }

switch (prop) {
case 'zIndex':
this.setProperties({ zIndex: newProp.zIndex }, true);
break;
case 'value':
var options = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };
if (typeof newProp.value === 'string') {
this.setProperties({ value: this.globalize.parseDate(newProp.value, options) }, true);
newProp.value = this.globalize.parseDate(newProp.value, options);
}
newProp.value = this.validateValue(newProp.value);

@@ -1044,3 +1106,3 @@ ej2_inputs_1.Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);

this.updateInput();
this.changeTrigger();
this.changeTrigger(null);
break;

@@ -1090,2 +1152,7 @@ case 'min':

break;
case 'floatLabelType':
this.floatLabelType = newProp.floatLabelType;
ej2_inputs_1.Input.removeFloating(this.inputWrapper);
ej2_inputs_1.Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);
break;
default:

@@ -1095,3 +1162,3 @@ _super.prototype.onPropertyChanged.call(this, newProp, oldProp);

}
this.hide();
this.hide(null);
}

@@ -1098,0 +1165,0 @@ };

27

src/timepicker/timepicker-model.d.ts

@@ -1,2 +0,2 @@

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 { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, Animation, AnimationModel, Browser, BaseEventArgs } from '@syncfusion/ej2-base';import { EmitType, cldrData, L10n, Component, getDefaultDateObject, rippleEffect, RippleOptions, Event } 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, FocusEventArgs, BlurEventArgs } from '@syncfusion/ej2-inputs';import { ListBase, cssClass as ListBaseClasses, ListBaseOptions } from '@syncfusion/ej2-lists';
import {ChangeEventArgs,PopupEventArgs,ItemEventArgs} from "./timepicker";

@@ -26,2 +26,4 @@ import {ComponentModel} from '@syncfusion/ej2-base';

* resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`] (https://ej2.syncfusion.com/documentation/timepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -34,2 +36,4 @@ */

* based on the culture.
* > For more details refer to
* [`Format`] (./getting-started.html#setting-the-time-format) documentation.
* @default null

@@ -53,2 +57,9 @@ */

* Specifies the placeholder text to be floated.
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -83,2 +94,4 @@ floatLabelType?: FloatLabelType;

* Specifies the time interval between the two adjacent time values in the popup list .
* > For more details refer to
* [`Format`] (./getting-started.html#setting-the-time-format)documentation.
* @default 30

@@ -90,3 +103,5 @@ */

* 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.
* the given value is not present in the popup list.
* > For more details refer to
* [`Time Duration`] (https://ej2.syncfusion.com/demos/#/material/timepicker/list-formatting.html) sample.
* @default null

@@ -104,2 +119,4 @@ */

* Gets or sets the minimum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`] (https://ej2.syncfusion.com/documentation/timepicker/time-range.html?lang=typescript) documentation.
* @default 00:00

@@ -111,2 +128,4 @@ */

* Gets or sets the maximum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`] (https://ej2.syncfusion.com/documentation/timepicker/time-range.html?lang=typescript) documentation.
* @default 00:00

@@ -162,3 +181,3 @@ */

*/
blur?: EmitType<Object>;
blur?: EmitType<BlurEventArgs>;

@@ -169,4 +188,4 @@ /**

*/
focus?: EmitType<Object>;
focus?: EmitType<FocusEventArgs>;
}

64

src/timepicker/timepicker.d.ts

@@ -5,13 +5,15 @@ import { Internationalization } from '@syncfusion/ej2-base';

import { Popup } from '@syncfusion/ej2-popups';
import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
import { IInput, FloatLabelType, FocusEventArgs, BlurEventArgs } from '@syncfusion/ej2-inputs';
import { TimePickerModel } from './timepicker-model';
export interface ChangeEventArgs {
/** Defines the boolean that returns true when the value is changed by user interaction, otherwise returns false. */
isInteracted: boolean;
isInteracted?: boolean;
/** Defines the selected time value of the TimePicker. */
value: Date;
value?: Date;
/** Defines the selected time value as string. */
text: string;
text?: string;
/** Defines the type of the event. */
e: KeyboardEventArgs | FocusEvent | MouseEvent;
e?: KeyboardEventArgs | FocusEvent | MouseEvent | Event;
/** Defines the element */
element: HTMLInputElement | HTMLElement;
}

@@ -45,4 +47,14 @@ /**

export interface PopupEventArgs {
/** Defines the TimePicker popup element. */
popup: Popup;
/** Specifies the name of the event */
name?: string;
/**
* Illustrates whether the current action needs to be prevented or not.
*/
cancel?: boolean;
/** Defines the TimePicker popup object. */
popup?: Popup;
/**
* Specifies the original event arguments.
*/
e?: MouseEvent | KeyboardEvent | FocusEvent | Event;
}

@@ -114,2 +126,4 @@ export declare namespace TimePickerBase {

* resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`] (https://ej2.syncfusion.com/documentation/timepicker/strict-mode.html?lang=typescript) documentation.
* @default false

@@ -121,2 +135,4 @@ */

* based on the culture.
* > For more details refer to
* [`Format`] (./getting-started.html#setting-the-time-format) documentation.
* @default null

@@ -137,2 +153,9 @@ */

* Specifies the placeholder text to be floated.
* Possible values are:
* * Never: The label will never float in the input when the placeholder is available.
* * Always: The floating label will always float above the input.
* * Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Never
* @aspType string
*/

@@ -162,2 +185,4 @@ floatLabelType: FloatLabelType;

* Specifies the time interval between the two adjacent time values in the popup list .
* > For more details refer to
* [`Format`] (./getting-started.html#setting-the-time-format)documentation.
* @default 30

@@ -169,2 +194,4 @@ */

* the given value is not present in the popup list.
* > For more details refer to
* [`Time Duration`] (https://ej2.syncfusion.com/demos/#/material/timepicker/list-formatting.html) sample.
* @default null

@@ -180,2 +207,4 @@ */

* Gets or sets the minimum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`] (https://ej2.syncfusion.com/documentation/timepicker/time-range.html?lang=typescript) documentation.
* @default 00:00

@@ -186,2 +215,4 @@ */

* Gets or sets the maximum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`] (https://ej2.syncfusion.com/documentation/timepicker/time-range.html?lang=typescript) documentation.
* @default 00:00

@@ -229,3 +260,3 @@ */

*/
blur: EmitType<Object>;
blur: EmitType<BlurEventArgs>;
/**

@@ -235,3 +266,3 @@ * Triggers when the control gets focused.

*/
focus: EmitType<Object>;
focus: EmitType<FocusEventArgs>;
/**

@@ -283,4 +314,5 @@ * Constructor for creating the widget

private setValue(value);
private compareFormatChange(value);
private updatePlaceHolder();
private popupHandler();
private popupHandler(e);
private mouseDownHandler();

@@ -291,3 +323,3 @@ private mouseUpHandler(event);

private onMouseClick(event);
private closePopup(delay?);
private closePopup(delay?, e?);
private checkValueChange(event, isNavigation);

@@ -305,2 +337,3 @@ private onMouseOver(event);

protected bindEvents(): void;
private inputChangeHandler(e);
protected unBindEvents(): void;

@@ -313,5 +346,4 @@ private bindClearEvent();

protected setCurrentDate(value: Date): Date;
protected getSeparator(): string;
protected getTextFormat(): number;
protected updateValue(value: string | Date, event: KeyboardEventArgs | FocusEvent): void;
protected updateValue(value: string | Date, event: KeyboardEventArgs | FocusEvent | MouseEvent): void;
protected previousState(date: Date): string;

@@ -332,3 +364,3 @@ protected resetState(): void;

protected valueProcess(event: KeyboardEventArgs | FocusEvent | MouseEvent, value: Date): void;
protected changeEvent(event: KeyboardEventArgs | FocusEvent | MouseEvent): void;
protected changeEvent(e: KeyboardEventArgs | FocusEvent | MouseEvent): void;
protected updateInput(isUpdate: boolean, date: Date): void;

@@ -349,2 +381,3 @@ protected setActiveDescendant(): void;

protected getProperty(date: TimePickerModel, val: string): void;
protected inputBlurHandler(e: MouseEvent): void;
/**

@@ -356,2 +389,3 @@ * Focuses out the TimePicker textbox element.

private isPopupOpen();
private inputFocusHandler();
/**

@@ -371,3 +405,3 @@ * Focused the TimePicker textbox element.

*/
show(): void;
show(event?: KeyboardEvent | MouseEvent | Event): void;
/**

@@ -374,0 +408,0 @@ * Gets the properties to be maintained upon browser refresh.

dist/ej2-calendars.umd.min.js

Sorry, the diff of this file is too big to display

dist/ej2-calendars.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-calendars.es2015.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-calendars.es2015.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-calendars.es5.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-calendars.es5.js.map

Sorry, the diff of this file is not supported yet

dist/global/ej2-calendars.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-calendars.min.js.map

Sorry, the diff of this file is not supported yet

src/calendar/calendar.js

Sorry, the diff of this file is too big to display

src/daterangepicker/daterangepicker.js

Sorry, the diff of this file is too big to display

src/timepicker/timepicker.js

Sorry, the diff of this file is too big to display

styles/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/calendar/_bootstrap-definition.scss

Sorry, the diff of this file is not supported yet

styles/calendar/_fabric-definition.scss

Sorry, the diff of this file is not supported yet

styles/calendar/_highcontrast-definition.scss

Sorry, the diff of this file is not supported yet

styles/calendar/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/calendar/_theme.scss

Sorry, the diff of this file is not supported yet

styles/calendar/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/calendar/material.css

Sorry, the diff of this file is not supported yet

styles/datepicker/_bootstrap-definition.scss

Sorry, the diff of this file is not supported yet

styles/datepicker/_fabric-definition.scss

Sorry, the diff of this file is not supported yet

styles/datepicker/_highcontrast-definition.scss

Sorry, the diff of this file is not supported yet

styles/datepicker/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/datepicker/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/datepicker/fabric.css

Sorry, the diff of this file is not supported yet

styles/datepicker/highcontrast.css

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_bootstrap-definition.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_fabric-definition.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_highcontrast-definition.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_layout.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/_theme.scss

Sorry, the diff of this file is not supported yet

styles/daterangepicker/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/daterangepicker/fabric.css

Sorry, the diff of this file is not supported yet

styles/daterangepicker/highcontrast.css

Sorry, the diff of this file is not supported yet

styles/daterangepicker/material.css

Sorry, the diff of this file is not supported yet

styles/datetimepicker/_fabric-definition.scss

Sorry, the diff of this file is not supported yet

styles/datetimepicker/_highcontrast-definition.scss

Sorry, the diff of this file is not supported yet

styles/datetimepicker/_layout.scss

Sorry, the diff of this file is not supported yet

styles/datetimepicker/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/datetimepicker/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/datetimepicker/fabric.css

Sorry, the diff of this file is not supported yet

styles/datetimepicker/highcontrast.css

Sorry, the diff of this file is not supported yet

styles/datetimepicker/material.css

Sorry, the diff of this file is not supported yet

styles/fabric.css

Sorry, the diff of this file is not supported yet

styles/highcontrast.css

Sorry, the diff of this file is not supported yet

styles/material.css

Sorry, the diff of this file is not supported yet

styles/timepicker/_bootstrap-definition.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/_definition.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/_fabric-definition.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/_highcontrast-definition.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/_layout.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/timepicker/bootstrap.css

Sorry, the diff of this file is not supported yet

styles/timepicker/fabric.css

Sorry, the diff of this file is not supported yet

styles/timepicker/highcontrast.css

Sorry, the diff of this file is not supported yet

styles/timepicker/material.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc