ejDatePicker

8 Mar 201824 minutes to read

Input field that display the DatePicker calendar as popup to select and set the date value

Syntax

HTML

<input type="text" ej-datepicker id="datePicker"/>

Name	Type	Description
options	object	settings for Date Picker.

Example

HTML

<input type="text" ej-datepicker id="datePicker" />

TS

export class AppComponent { 
        constructor(){
        
        }
 }

Requires

• module:jQuery

• module:ej.globalize.js

• module:ej.core.js

• module:ej.datepicker.js

NOTE

jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

Members

allowEdit boolean

Used to allow or restrict the editing in DatePicker input field directly. By setting false to this API, You can only pick the date from DatePicker popup.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [allowEdit]="allowEdit" />

TS

export class AppComponent { 
        allowEdit:boolean;
        constructor(){
        this.allowEdit = true;
        }
 }

allowDrillDown boolean

allow or restrict the drill down to multiple levels of view (month/year/decade) in DatePicker calendar

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [allowDrillDown]="allowDrillDown" />

TS

export class AppComponent { 
        allowDrillDown:boolean;
        constructor(){
        this.allowDrillDown = true;
        }
 }

blackoutDates object

Disable the list of specified date value.

Default value

• {}

HTML

<input type="text" ej-datepicker id="datePicker" [blackoutDates]="blackoutDates" />

TS

export class AppComponent { 
        blackoutDates:Object;
        constructor(){
        this.blackoutDates = {blackoutDates: [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] };
        }
 }

buttonText string

Sets the specified text value to the today button in the DatePicker calendar.

Default Value

• “Today”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [buttonText]="buttonText" />

TS

export class AppComponent { 
        buttonText:string;
        constructor(){
        this.buttonText = "Now";
        }
 }

cssClass string

Sets the root CSS class for DatePicker theme, which is used customize.

Default Value

• ””

Example

HTML

<input type="text" ej-datepicker id="datePicker" [cssClass]="cssClass" />

TS

export class AppComponent { 
        cssClass:string;
        constructor(){
        this.cssClass = "gradient-lime";
        }
 }

dateFormat string

Formats the value of the DatePicker in to the specified date format. If this API is not specified, dateFormat will be set based on the current culture of DatePicker.

Default Value

• “MM/dd/yyyy”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [dateFormat]="dateFormat" />

TS

export class AppComponent { 
        dateFormat:string;
        constructor(){
        this.dateFormat = "dd/MM/yyyy";
        }
 }

dayHeaderFormat string | enum

Specifies the header format of days in DatePicker calendar. See below to get available Headers options

Name	Description
Long	sets the Min format of day name (like Sunday) in header format DatePicker
None	Removes day header in DatePicker
Short	sets the short format of day name (like Sun) in header in DatePicker
Min	sets the Min format of day name (like su) in header format DatePicker

Default Value

• ej.DatePicker.Header.Short

Example

HTML

<input type="text" ej-datepicker id="datePicker" [dayHeaderFormat]="dayHeaderFormat" />

TS

export class AppComponent { 
        dayHeaderFormat:string;
        constructor(){
        this.dayHeaderFormat = "short";
        }
 }

depthLevel string | enum

Specifies the navigation depth level in DatePicker calendar. This option is not applied when start level view option is lower than depth level view. See below to know available levels in DatePicker Calendar

Name	Description
Month	allow navigation upto month level in DatePicker
Year	allow navigation upto year level in DatePicker
Decade	allow navigation upto decade level in DatePicker
Century	allow navigation upto Century level in DatePicker

Default Value

• ””

Example

HTML

<input type="text" ej-datepicker id="datePicker" [depthLevel]="depthLevel" />

TS

export class AppComponent { 
        depthLevel:string;
        constructor(){
        this.depthLevel = "year";
        }
 }

displayInline boolean

Allows to embed the DatePicker calendar in the page. Also associates DatePicker with div element instead of input.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [displayInline]="displayInline" />

TS

export class AppComponent { 
        displayInline:boolean;
        constructor(){
        this.displayInline = true;
        }
 }

enableAnimation boolean

Enables or disables the animation effect with DatePicker calendar.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [enableAnimation]="enableAnimation" />

TS

export class AppComponent { 
        enableAnimation:boolean;
        constructor(){
        this.enableAnimation = false;
        }
 }

enabled boolean

Enable or disable the DatePicker control.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [enabled]="enabled" />

TS

export class AppComponent { 
        enabled:boolean;
        constructor(){
        this.enabled = false;
        }
 }

enablePersistence boolean

Sustain the entire widget model of DatePicker even after form post or browser refresh

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [enablePersistence]="enablePersistence" />

TS

export class AppComponent { 
        enablePersistence:boolean;
        constructor(){
        this.enablePersistence = true;
        }
 }

enableRTL boolean

Displays DatePicker calendar along with DatePicker input field in Right to Left direction.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [enableRTL]="enableRTL" />

TS

export class AppComponent { 
        enableRTL:boolean;
        constructor(){
        this.enableRTL = true;
        }
 }

enableStrictMode boolean

Allows to enter valid or invalid date in input textbox and indicate as error if it is invalid value, when this API value is set to true. For false value, invalid date is not allowed to input field and corrected to valid date automatically, even if invalid date is given.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [enableStrictMode]="enableStrictMode" />

TS

export class AppComponent { 
        enableStrictMode:boolean;
        constructor(){
        this.enableStrictMode = true;
        }
 }

fields object

Used the required fields for special Dates in DatePicker in order to customize the special dates in a calendar.

Default Value

• null

Example

HTML

<input type="text" ej-datepicker id="datePicker" [specialDates]="specialDates" [fields]="fields" />

TS

export class AppComponent { 
        specialDates:Object;
        fields:Object;
        constructor(){
        this.fields = {date:"date",tooltip:"tooltip",iconClass:"iconClass"};
        this.specialDates = [
           { date: new Date(year, month, 8), tooltip: "In Australia", iconClass: "flags sprite-Australia" },
           { date: new Date(year, month, 21), tooltip: "In France", iconClass: "flags sprite-France" },
           { date: new Date(year, month, 17), tooltip: "In USA", iconClass: "flags sprite-USA" },
           { date: new Date(year, month + 1, 15), tooltip: "In Germany", iconClass: "flags sprite-Germany" },
           { date: new Date(year, month - 1, 22), tooltip: "In India", iconClass: "flags sprite-India" },
];

        }
 }

fields.date string

Specifies the specials dates

fields.iconClass string

Specifies the icon class to special dates.

fields.tooltip string

Specifies the tooltip to special dates.

fields.cssClass string

Specifies the CSS class to customize the date.

headerFormat string

Specifies the header format to be displayed in the DatePicker calendar.

Default Value

• “MMMM yyyy”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [headerFormat]="headerFormat" />

TS

export class AppComponent { 
        headerFormat:string;
        constructor(){
        this.headerFormat = "MMMM yy";
        }
 }

height string

Specifies the height of the DatePicker input text.

Default Value

• “28px”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [height]="height" />

TS

export class AppComponent { 
        height:number;
        constructor(){
        this.height = 35;
        }
 }

highlightSection string | enum

HighlightSection is used to highlight currently selected date’s month/week/workdays. See below to get available HighlightSection options

Name	Description
Month	Highlight the month of the currently selected date in DatePicker popup calendar
Week	Highlight the week of the currently selected date in DatePicker popup calendar
WorkDays	Highlight the workdays in a currently selected date's week in DatePicker popup calendar
None	Nothing will be highlighted, remove highlights from DatePicker popup calendar if already exists

Default Value

• “none”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [highlightSection]="highlightSection" />

TS

export class AppComponent { 
        highlightSection:string;
        constructor(){
        this.highlightSection = "week";
        }
 }

highlightWeekend boolean

Weekend dates will be highlighted when this property is set to true.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [highlightWeekend]="highlightWeekend" />

TS

export class AppComponent { 
        highlightWeekend:boolean;
        constructor(){
        this.highlightWeekend = true;
        }
 }

htmlAttributes object

Specifies the HTML Attributes of the DatePicker.

Default Value

• {}

Example

HTML

<input type="text" ej-datepicker id="datePicker" [htmlAttributes]="htmlAttributes" />

TS

export class AppComponent { 
        htmlAttributes:Object;
        constructor(){
        this.htmlAttributes = {required:"required"};
        }
 }

locale string

Change the DatePicker calendar and date format based on given culture.

Default Value

• “en-US”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [locale]="locale" />

TS

export class AppComponent { 
        locale:string;
        constructor(){
        this.locale = "en-US";
        }
 }

maxDate string | date

Specifies the maximum date in the calendar that the user can select.

Default Value

• new Date(2099, 11, 31)

Example

HTML

<input type="text" ej-datepicker id="datePicker" [maxDate]="maxDate" />

TS

export class AppComponent { 
        maxDate:string;
        constructor(){
        this.maxDate = "5/30/2015";
        }
 }

minDate string | date

Specifies the minimum date in the calendar that the user can select.

Default Value

• new Date(1900, 00, 01)

Example

HTML

<input type="text" ej-datepicker id="datePicker" [minDate]="minDate" />

TS

export class AppComponent { 
        minDate:string;
        constructor(){
        this.minDate = "5/1/2013";
        }
 }

readOnly boolean

Allows to toggles the read only state of the DatePicker. When the widget is readOnly, it doesn’t allow your input.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [readOnly]="readOnly" />

TS

export class AppComponent { 
        readOnly:boolean;
        constructor(){
        this.readOnly = true;
        }
 }

showDisabledRange boolean

It allow to show/hide the disabled date ranges

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showDisabledRange]="showDisabledRange" />

TS

export class AppComponent { 
        showDisabledRange:boolean;
        constructor(){
        this.showDisabledRange = false;
        }
 }

showFooter boolean

It allows to display footer in DatePicker calendar.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showFooter]="showFooter" />

TS

export class AppComponent { 
        showFooter:boolean;
        constructor(){
        this.showFooter = false;
        }
 }

showOtherMonths boolean

It allows to display/hides the other months days from the current month calendar in a DatePicker.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showOtherMonths]="showOtherMonths" />

TS

export class AppComponent { 
        showOtherMonths:boolean;
        constructor(){
        this.showOtherMonths = false;
        }
 }

showPopupButton boolean

Shows/hides the date icon button at right side of textbox, which is used to open or close the DatePicker calendar popup.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showPopupButton]="showPopupButton" />

TS

export class AppComponent { 
        showPopupButton:boolean;
        constructor(){
        this.showPopupButton = false;
        }
 }

showRoundedCorner boolean

DatePicker input is displayed with rounded corner when this property is set to true.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showRoundedCorner]="showRoundedCorner" />

TS

export class AppComponent { 
        showRoundedCorner:boolean;
        constructor(){
        this.showRoundedCorner = true;
        }
 }

showTooltip boolean

Used to show the tooltip when hovering on the days in the DatePicker calendar.

Default Value

• true

Example

HTML

<input type="text" ej-datepicker id="datePicker" [showTooltip]="showTooltip" />

TS

export class AppComponent { 
        showTooltip:boolean;
        constructor(){
        this.showTooltip = true;
        }
 }

specialDates object

Specifies the special dates in DatePicker.

Default Value

• null

Example

HTML

<input type="text" ej-datepicker id="datePicker" [specialDates]="specialDates" />

TS

export class AppComponent { 
        specialDates:Object;
        constructor(){
        this.specialDates = [
           { date: new Date(year, month, 8), tooltip: "In Australia", iconClass: "flags sprite-Australia" },
           { date: new Date(year, month, 21), tooltip: "In France", iconClass: "flags sprite-France" },
           { date: new Date(year, month, 17), tooltip: "In USA", iconClass: "flags sprite-USA" },
           { date: new Date(year, month + 1, 15), tooltip: "In Germany", iconClass: "flags sprite-Germany" },
           { date: new Date(year, month - 1, 22), tooltip: "In India", iconClass: "flags sprite-India" },
];

        }
 }

startDay number

Specifies the start day of the week in DatePicker calendar.

Default Value

• 0

Example

HTML

<input type="text" ej-datepicker id="datePicker" [startDay]="startDay" />

TS

export class AppComponent { 
        startDay:number;
        constructor(){
        this.startDay = 2;
        }
 }

startLevel string | enum

Specifies the start level view in DatePicker calendar. See below available Levels

Name	Description
Month	Start the view level from month view in DatePicker calendar
Year	Start the view level from year view in DatePicker calendar
Decade	Start the view level from decade view in DatePicker calendar
Century	Start the view level from century view in DatePicker calendar

Default Value

• ej.DatePicker.Level.Month

Example

HTML

<input type="text" ej-datepicker id="datePicker" [startLevel]="startLevel" />

TS

export class AppComponent { 
        startLevel:string;
        constructor(){
        this.startLevel = "year";
        }
 }

stepMonths number

Specifies the number of months to be navigate for one click of next and previous button in a DatePicker Calendar.

Default Value

• 1

Example

HTML

<input type="text" ej-datepicker id="datePicker" [stepMonths]="stepMonths" />

TS

export class AppComponent { 
        stepMonths:number;
        constructor(){
        this.stepMonths = 2;
        }
 }

tooltipFormat string

Provides option to customize the tooltip format.

Default Value

• “ddd MMM dd yyyy”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [tooltipFormat]="tooltipFormat" />

TS

export class AppComponent { 
        tooltipFormat:string;
        constructor(){
        this.tooltipFormat = "dd/MM/yyyy";
        }
 }

validationMessage object

Sets the jQuery validation support to DatePicker Date value. See validation

Default Value

• null

Example

HTML

<input type="text" ej-datepicker id="datePicker" [validationRules]="validationRules" [validationMessage]="validationMessage"/>

TS

export class AppComponent { 
        validationRules:Object;
        validationMessage:Object;
        constructor(){
        this.validationMessage = {required: "Required Date value"};
        this.validationRules = {required:true};
        }
 }

validationRules object

Sets the jQuery validation custom rules to the DatePicker. see validation

Default Value

• null

Example

HTML

<input type="text" ej-datepicker id="datePicker" [validationRules]="validationRules"/>

TS

export class AppComponent { 
        validationRules:Object;
        constructor(){
        this.validationRules = {required:true};
        }
 }

value string | date

sets or returns the current value of DatePicker

Default Value

• null

Example

HTML

<input type="text" ej-datepicker id="datePicker" [value]="value"/>

TS

export class AppComponent { 
        value:string;
        constructor(){
        this.value = "5/5/2014";
        }
 }

watermarkText string

Specifies the water mark text to be displayed in input text.

Default Value

• “Select date”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [watermarkText]="watermarkText"/>

TS

export class AppComponent { 
        watermarkText:string;
        constructor(){
        this.watermarkText = "Enter date";
        }
 }

weekNumber boolean

Allows to embed a new column with the calendar in the popup, which will display the week number of every week in a calendar year.

Default Value

• false

Example

HTML

<input type="text" ej-datepicker id="datePicker" [weekNumber]="weekNumber"/>

TS

export class AppComponent { 
        weekNumber:boolean;
        constructor(){
        this.weekNumber = true;
        }
 }

width string

Specifies the width of the DatePicker input text.

Default Value

• “160px”

Example

HTML

<input type="text" ej-datepicker id="datePicker" [width]="width"/>

TS

export class AppComponent { 
        width:number;
        constructor(){
        this.width = 200;
        }
 }

Methods

disable()

Disables the DatePicker control.

Example

HTML

<input type="text" ej-datepicker id="datePicker"/>

TS

$("#datePicker").ejDatePicker();
// Create DatePicker instance
var dateObj = $("#datePicker").data("ejDatePicker");
dateObj.disable(); // disables the DatePicker

enable()

Enable the DatePicker control, if it is in disabled state.

Example

HTML

<input type="text" ej-datepicker id="datePicker"/>

TS

$("#datePicker").ejDatePicker();
// Create DatePicker instance
var dateObj = $("#datePicker").data("ejDatePicker");
dateObj.enable(); // enables the DatePicker

getValue()

Returns the current date value in the DatePicker control.

Returns:

string

Example

HTML

<input type="text" ej-datepicker id="datePicker"/>

TS

$("#datepicker").ejDatePicker();
// Create DatePicker instance
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.getValue(); // returns the date value

hide()

Close the DatePicker popup, if it is in opened state.

Example

HTML

<input type="text" ej-datepicker id="datePicker"/>

TS

$("#datepicker").ejDatePicker();
// Create DatePicker instance
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.hide(); // hides the DatePicker popup

show()

Opens the DatePicker popup.

Example

HTML

<input type="text" ej-datepicker id="datePicker"/>

TS

$("#datepicker").ejDatePicker();
// Create DatePicker instance
var dateObj = $("#datepicker").data("ejDatePicker");
dateObj.show(); // shows the DatePicker popup

Events

beforeClose

Fires before closing the DatePicker popup.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
events	object	returns the event parameters from DatePicker.
element	Element	returns the DatePicker popup.

Example

HTML

<input type="text" ej-datepicker (beforeClose)="onBeforeClose($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onBeforeClose(e:any){
         // your code here
        }
}

beforeDateCreate

Fires when each date is created in the DatePicker popup calendar.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
date	object	returns the currently created date object.
element	Element	returns the current DOM object of the date from the Calendar.
value	string	returns the currently created date as string type.

Example

HTML

<input type="text" ej-datepicker (beforeDateCreate)="onBeforeDateCreate($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onBeforeDateCreate(e:any){
         // your code here
        }
}

beforeOpen

Fires before opening the DatePicker popup.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
events	object	returns the event parameters from DatePicker.
element	Element	returns the DatePicker popup.

Example

HTML

<input type="text" ej-datepicker (beforeOpen)="onBeforeOpen($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onBeforeOpen(e:any){
         // your code here
        }
}

ejchange

Fires when the DatePicker input value is changed.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
value	string	returns the DatePicker input value.
prevDate	string	returns the previously selected value.

Example

HTML

<input type="text" ej-datepicker (ejchange)="onChange($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onChange(e:any){
         // your code here
        }
}

close

Fires when DatePicker popup is closed.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
date	object	returns the current date object.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
value	string	returns the current date value.
prevDate	string	returns the previously selected value.

Example

HTML

<input type="text" ej-datepicker (close)="onClose($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onClose(e:any){
         // your code here
        }
}

create

Fires when the DatePicker is created successfully.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.

Example

HTML

<input type="text" ej-datepicker (create)="onCreate($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onCreate(e:any){
         // your code here
        }
}

destroy

Fires when the DatePicker is destroyed successfully.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.

Example

HTML

<input type="text" ej-datepicker (destroy)="onDestroy($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onDestroy(e:any){
         // your code here
        }
}

focusIn

Fires when DatePicker input gets focus.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
value	string	returns the currently selected date value.

Example

HTML

<input type="text" ej-datepicker (focusIn)="onFocusIn($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onFocusIn(e:any){
         // your code here
        }
}

focusOut

Fires when DatePicker input loses the focus.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
value	string	returns the currently selected date value.
prevDate	string	returns the previously selected date value.

Example

HTML

<input type="text" ej-datepicker (focusOut)="onFocusOut($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onFocusOut(e:any){
         // your code here
        }
}

navigate

Fires when calender view navigates to month/year/decade/century.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
date	object	returns the current date object.
model	object	returns the DatePicker model.
navigateFrom	string	returns the previous view state of calendar.
navigateTo	string	returns the current view state of calendar.
type	string	returns the name of the event
value	string	returns the current date value.

Example

HTML

<input type="text" ej-datepicker (navigate)="onNavigate($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onNavigate(e:any){
         // your code here
        }
}

open

Fires when DatePicker popup is opened.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
date	object	returns the current date object.
model	object	returns the DatePicker model.
type	string	returns the name of the event
value	string	returns the current date value.
prevDate	string	returns the previously selected value.

Example

HTML

<input type="text" ej-datepicker (open)="onOpen($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onOpen(e:any){
         // your code here
        }
}

select

Fires when a date is selected from the DatePicker popup.

Name	Type	Description
cancel	boolean	Set to true when the event has to be canceled, else false.
date	object	returns the selected date object.
model	object	returns the DatePicker model.
type	string	returns the name of the event.
value	string	returns the current date value.
prevDate	string	returns the previously selected value.
isSpecialDay	string	returns whether the currently selected date is special date or not.

Example

HTML

<input type="text" ej-datepicker (select)="onSelect($event)"/>

HTML

export class AppComponent{
        constructor(){        
        }
        onSelect(e:any){
         // your code here
        }
}