ejDateTimePicker

The DateTimePicker control is used to input the date and time with a specific format. It combines the DatePicker and TimePicker controls so that users can select the date and time with their desired format.

Syntax

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
    Name Type Description
    options object settings for Date Picker.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • export class AppComponent { 
            constructor(){
            
            }
     }

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.globalize.js

    • module:ej.cultures.en-US.min.js

    • module:ej.datetimepicker.js

    • module:ej.datepicker.js

    • module:ej.timepicker.js

    • module:ej.scroller.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 DateTimePicker input field directly. By setting false to this API, You can only pick the date and time values from DateTimePicker popup.

    Default Value

    • true

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [allowEdit]="allowEdit"/>
  • ts
  • export class AppComponent { 
            allowEdit:boolean;
            constructor(){
            this.allowEdit = true;
            }
     }

    buttonText object

    Displays the custom text for the buttons inside the DateTimePicker popup. when the culture value changed, we can change the buttons text based on the culture.

    Default Value

    • { today: “Today”, timeNow: “Time Now”, done: “Done”, timeTitle: “Time” }

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            buttonText:Object;
            constructor(){
            this.buttonText = { done: "&#20570;&#36807;" };
            }
     }

    buttonText.done string

    Sets the text for the Done button inside the datetime popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            buttonText:Object;
            constructor(){
            this.buttonText = { done: "Done" };
            }
     }

    buttonText.timeNow string

    Sets the text for the Now button inside the datetime popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            buttonText:Object;
            constructor(){
            this.buttonText = { timeNow: "Current Time" };
            }
     }

    buttonText.timeTitle string

    Sets the header text for the Time dropdown.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            buttonText:Object;
            constructor(){
            this.buttonText = { timeTitle: "Time" };
            }
     }

    buttonText.today string

    Sets the text for the Today button inside the datetime popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [buttonText]="buttonText"/>
  • ts
  • export class AppComponent { 
            buttonText:Object;
            constructor(){
            this.buttonText = { today: "Today" };
            }
     }

    cssClass string

    Set the root class for DateTimePicker theme. This cssClass API helps to use custom skinning option for DateTimePicker control.

    Default Value

    • ””

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [cssClass]="cssClass"/>
  • ts
  • export class AppComponent { 
            cssClass:string;
            constructor(){
            this.cssClass = "gradient-lime";
            }
     }

    dateTimeFormat string

    Defines the datetime format displayed in the DateTimePicker. The value should be a combination of date format and time format.

    Default Value

    • “M/d/yyyy h:mm tt”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [dateTimeFormat]="dateTimeFormat"/>
  • ts
  • export class AppComponent { 
            dateTimeFormat:string;
            constructor(){
            this.dateTimeFormat = "d/M/yyyy tt h:mm";
            }
     }

    dayHeaderFormat string | enum

    Specifies the header format of the datepicker inside the DateTimePicker popup. See DatePicker.Header

    Default Value

    • ej.DatePicker.Header.Short

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [dayHeaderFormat]="dayHeaderFormat"/>
  • ts
  • export class AppComponent { 
            dayHeaderFormat:string;
            constructor(){
            this.dayHeaderFormat = "short";
            }
     }

    depthLevel enum

    Specifies the navigation depth level in DatePicker calendar inside DateTimePicker popup. This option is not applied when start level view option is lower than depth level view. See ej.DatePicker.Level

    Default Value

    • ””

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [depthLevel]="depthLevel"/>
  • ts
  • export class AppComponent { 
            depthLevel:string;
            constructor(){
            this.depthLevel = "decade";
            }
     }

    enableAnimation boolean

    Enable or disable the animation effect in DateTimePicker.

    Default Value

    • true

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [enableAnimation]="enableAnimation"/>
  • ts
  • export class AppComponent { 
            enableAnimation:string;
            constructor(){
            this.enableAnimation = false;
            }
     }

    enabled boolean

    When this property is set to false, it disables the DateTimePicker control.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [enabled]="enabled"/>
  • ts
  • export class AppComponent { 
            enabled:boolean;
            constructor(){
            this.enabled = true;
            }
     }

    enablePersistence boolean

    Enables or disables the state maintenance of DateTimePicker.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [enablePersistence]="enablePersistence"/>
  • ts
  • export class AppComponent { 
            enablePersistence:boolean;
            constructor(){
            this.enablePersistence = true;
            }
     }

    enableRTL boolean

    Sets the DateTimePicker direction as right to left alignment.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [enableRTL]="enableRTL"/>
  • ts
  • export class AppComponent { 
            enableRTL:boolean;
            constructor(){
            this.enableRTL = true;
            }
     }

    enableStrictMode boolean

    When enableStrictMode true it allows the value outside of the range also but it highlights the textbox with error class, otherwise it internally changed to the correct value.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [enableStrictMode]="enableStrictMode"/>
  • ts
  • export class AppComponent { 
            enableStrictMode:boolean;
            constructor(){
            this.enableStrictMode = true;
            }
     }

    headerFormat string

    Specifies the header format to be displayed in the DatePicker calendar inside the DateTimePicker popup.

    Default Value

    • “MMMM yyyy”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [headerFormat]="headerFormat"/>
  • ts
  • export class AppComponent { 
            headerFormat:string;
            constructor(){
            this.headerFormat = "MM - yyyy";
            }
     }

    height string | number

    Defines the height of the DateTimePicker textbox.

    Default Value

    • 30

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [height]="height"/>
  • ts
  • export class AppComponent { 
            height:number;
            constructor(){
            this.height = 40;
            }
     }

    htmlAttributes object

    Specifies the HTML Attributes of the ejDateTimePicker

    Default Value

    • {}

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [htmlAttributes]="htmlAttributes"/>
  • ts
  • export class AppComponent { 
            htmlAttributes:Object;
            constructor(){
            this.htmlAttributes = {required:"required"};
            }
     }

    interval number

    Sets the time interval between the two adjacent time values in the time popup.

    Default Value

    • 30

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [interval]="interval"/>
  • ts
  • export class AppComponent { 
            interval:number;
            constructor(){
            this.interval = 60;
            }
     }

    locale string

    Defines the localization culture for DateTimePicker.

    Default Value

    • “en-US”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [locale]="locale"/>
  • ts
  • export class AppComponent { 
            locale:string;
            constructor(){
            this.locale = "en-US";
            }
     }

    maxDateTime string | date

    Sets the maximum value to the DateTimePicker. Beyond the maximum value an error class is added to the wrapper element when we set true to enableStrictMode.

    Default Value

    • new Date(“12/31/2099 11:59:59 PM”)

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [maxDateTime]="maxDateTime"/>
  • ts
  • export class AppComponent { 
            maxDateTime:string;
            constructor(){
            this.maxDateTime = "12/10/2050 8:00:00 PM";
            }
     }

    minDateTime string | date

    Sets the minimum value to the DateTimePicker. Behind the minimum value an error class is added to the wrapper element.

    Default Value

    • new Date(“1/1/1900 12:00:00 AM”)

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [minDateTime]="maxDateTime"/>
  • ts
  • export class AppComponent { 
            minDateTime:string;
            constructor(){
            this.minDateTime = "5/5/2010 12:00:00 AM";
            }
     }

    popupPosition string | enum

    Specifies the popup position of DateTimePicker.See below to know available popup positions

    Name Description
    Bottom Opens the DateTimePicker popup below to the DateTimePicker input box
    Top Opens the DateTimePicker popup above to the DateTimePicker input box

    Default value

    • ej.PopupPosition.Bottom

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [popupPosition]="popupPosition"/>
  • ts
  • export class AppComponent { 
            popupPosition:string;
            constructor(){
            this.popupPosition = "bottom";
            }
     }

    readOnly boolean

    Indicates that the DateTimePicker value can only be read and can’t change.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [readOnly]="readOnly"/>
  • ts
  • export class AppComponent { 
            readOnly:boolean;
            constructor(){
            this.readOnly = true;
            }
     }

    showOtherMonths boolean

    It allows showing days in other months of DatePicker calendar inside the DateTimePicker popup.

    Default Value

    • true

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [showOtherMonths]="showOtherMonths"/>
  • ts
  • export class AppComponent { 
            showOtherMonths:boolean;
            constructor(){
            this.showOtherMonths = false;
            }
     }

    showPopupButton boolean

    Shows or hides the arrow button from the DateTimePicker textbox. When the button disabled, the DateTimePicker popup opens while focus in the textbox and hides while focus out from the textbox.

    Default Value

    • true

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [showPopupButton]="showPopupButton"/>
  • ts
  • export class AppComponent { 
            showPopupButton:boolean;
            constructor(){
            this.showPopupButton = false;
            }
     }

    showRoundedCorner boolean

    Changes the sharped edges into rounded corner for the DateTimePicker textbox and popup.

    Default Value

    • false

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [showRoundedCorner]="showRoundedCorner"/>
  • ts
  • export class AppComponent { 
            showRoundedCorner:boolean;
            constructor(){
            this.showRoundedCorner = true;
            }
     }

    startDay number

    Specifies the start day of the week in datepicker inside the DateTimePicker popup.

    Default Value

    • 1

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [startDay]="startDay"/>
  • ts
  • export class AppComponent { 
            showRoundedCorner:number;
            constructor(){
            this.startDay = 2;
            }
     }

    startLevel string | enum

    Specifies the start level view in datepicker inside the DateTimePicker popup. See DatePicker.Level

    Default Value

    • ej.DatePicker.Level.Month or “month”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [startLevel]="startLevel"/>
  • ts
  • export class AppComponent { 
            startLevel:string;
            constructor(){
            this.startLevel = "year";
            }
     }

    stepMonths number

    Specifies the number of months to navigate at one click of next and previous button in datepicker inside the DateTimePicker popup.

    Default Value

    • 1

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [stepMonths]="stepMonths"/>
  • ts
  • export class AppComponent { 
            stepMonths:number;
            constructor(){
            this.stepMonths = 2;
            }
     }

    timeDisplayFormat string

    Defines the time format displayed in the time dropdown inside the DateTimePicker popup.

    Default Value

    • “h:mm tt”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDisplayFormat]="timeDisplayFormat"/>
  • ts
  • export class AppComponent { 
            timeDisplayFormat:string;
            constructor(){
            this.timeDisplayFormat = "HH:mm";
            }
     }

    timeDrillDown object

    We can drill down up to time interval on selected date with meridian details.

    Default Value

    • { enabled: false, interval: 5, showMeridian: false, autoClose: true }

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDrillDown]="timeDrillDown"/>
  • ts
  • export class AppComponent { 
            timeDrillDown:boolean;
            constructor(){
            this.timeDrillDown = {enabled: true};
            }
     }

    timeDrillDown.enabled boolean

    This is the field to show/hide the timeDrillDown in DateTimePicker.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDrillDown]="timeDrillDown"/>
  • ts
  • export class AppComponent { 
            timeDrillDown:boolean;
            constructor(){
            this.timeDrillDown = {enabled: true};
            }
     }

    timeDrillDown.interval number

    Sets the interval time of minutes on selected date.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDrillDown]="timeDrillDown"/>
  • ts
  • export class AppComponent { 
            timeDrillDown:boolean;
            constructor(){
            this.timeDrillDown = { interval: 10 };
            }
     }

    timeDrillDown.showMeridian boolean

    Allows the user to show or hide the meridian with time in DateTimePicker.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDrillDown]="timeDrillDown"/>
  • ts
  • export class AppComponent { 
            timeDrillDown:boolean;
            constructor(){
            this.timeDrillDown = { showMeridian: true  };
            }
     }

    timeDrillDown.autoClose boolean

    After choosing the time, the popup will close automatically if we set it as true, otherwise we focus out the DateTimePicker or choose timeNow button for closing the popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timeDrillDown]="timeDrillDown"/>
  • ts
  • export class AppComponent { 
            timeDrillDown:boolean;
            constructor(){
            this.timeDrillDown = { autoClose: true };
            }
     }

    timePopupWidth string | number

    Defines the width of the time dropdown inside the DateTimePicker popup.

    Default Value

    • 100

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [timePopupWidth]="timePopupWidth"/>
  • ts
  • export class AppComponent { 
            timePopupWidth:number;
            constructor(){
            this.timePopupWidth = 150;
            }
     }

    validationMessage object

    Set the jQuery validation error message in DateTimePicker.

    Default Value

    • null

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [validationRules]="validationRules" [validationMessage]="validationMessage"/>
  • ts
  • export class AppComponent { 
            validationMessage:Object;
            validationRules:Object;
            constructor(){
            this.validationMessage = { required: "Required DateTime value" };
            this.validationRules = { required:true };
            }
     }

    validationRules object

    Set the jQuery validation rules in DateTimePicker.

    Default Value

    • null

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [validationRules]="validationRules"/>
  • ts
  • export class AppComponent { 
            validationRules:Object;
            constructor(){
            this.validationRules = { required:true };
            }
     }

    value string | date

    Sets the DateTime value to the control.

    Default Value

    • ””

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [value]="value"/>
  • ts
  • export class AppComponent { 
            value:string;
            constructor(){
            this.value = "6/2/2014 6:00 AM";
            }
     }

    watermarkText string

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

    Default Value

    • “Select date and time”

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [watermarkText]="watermarkText"/>
  • ts
  • export class AppComponent { 
            watermarkText:string;
            constructor(){
            this.watermarkText = "select value";
            }
     }

    width string | number

    Defines the width of the DateTimePicker textbox.

    Default Value

    • 143

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker" [width]="width"/>
  • ts
  • export class AppComponent { 
            width:number;
            constructor(){
            this.width = 210;
            }
     }

    Methods

    disable()

    Disables the DateTimePicker control.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.disable(); // disables the DateTimePicker

    enable()

    Enables the DateTimePicker control.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.enable(); // enables the DateTimePicker

    getValue()

    Returns the current datetime value in the DateTimePicker.

    ####Returns:

    string

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.getValue(); // returns the datetime value

    hide()

    Hides or closes the DateTimePicker popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.getValue(); // returns the datetime value

    setCurrentDateTime()

    Updates the current system date value and time value to the DateTimePicker.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.setCurrentDateTime(); // updates the current datetime value

    show()

    Shows or opens the DateTimePicker popup.

    Example

  • html
  • <input type="text" ej-datetimepicker id="dateTimePicker"/>
  • ts
  • $("#dateTimePicker").ejDateTimePicker();
    // Create DateTimePicker instance
    var datetimeObj = $("#dateTimePicker").data("ejDateTimePicker");
    datetimeObj.show(); // opens the datetime popup

    Events

    beforeClose

    Fires before the datetime popup closed in the DateTimePicker.

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

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (beforeClose)="onBeforeClose($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onBeforeClose(e:any){
             // your code here
            }
    }

    beforeOpen

    Fires before the datetime popup open in the DateTimePicker.

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

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (beforeOpen)="onBeforeOpen($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onBeforeOpen(e:any){
             // your code here
            }
    }

    ejchange

    Fires when the datetime value changed in the DateTimePicker textbox.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TimePicker model
    type string returns the name of the event
    isValidState boolean returns the current value is valid or not
    value string returns the modified datetime value
    prevDateTime string returns the previously selected date time value
    isInteraction boolean returns true if change event triggered by interaction, otherwise returns false

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (ejchange)="onChange($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onChange(e:any){
             // your code here
            }
    }

    close

    Fires when DateTimePicker popup closes.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TimePicker model
    type string returns the name of the event
    value string returns the modified datetime value
    prevDateTime string returns the previously selected date time value

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (close)="onClose($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onClose(e:any){
             // your code here
            }
    }

    create

    Fires after DateTimePicker control is created.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the DateTimePicker model
    type string returns the name of the event

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (create)="onCreate($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onCreate(e:any){
             // your code here
            }
    }

    destroy

    Fires when the DateTimePicker is destroyed successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the DateTimePicker model
    type string returns the name of the event

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (destroy)="onDestroy($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onDestroy(e:any){
             // your code here
            }
    }

    focusIn

    Fires when the focus-in happens in the DateTimePicker textbox.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TimePicker model
    type string returns the name of the event
    value string returns the datetime value, which is in text box

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (focusIn)="onFocusIn($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onFocusIn(e:any){
             // your code here
            }
    }

    focusOut

    Fires when the focus-out happens in the DateTimePicker textbox.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TimePicker model
    type string returns the name of the event
    value string returns the datetime value, which is in text box

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (focusOut)="onFocusOut($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onFocusOut(e:any){
             // your code here
            }
    }

    open

    Fires when DateTimePicker popup opens.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TimePicker model
    type string returns the name of the event
    value string returns the modified datetime value
    prevDateTime string returns the previously selected date time value

    Example

  • html
  • <input type="text" ej-datepicker id="dateTimePicker" (open)="onOpen($event)"/>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onOpen(e:any){
             // your code here
            }
    }