ejDatePicker

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
            }
    }