enum DateTimeInputAnimationType {
     fade,
     slide,
     none
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [animationType]="'fade'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the allowNullDate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [allowNullDate]="false">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the allowKeyboardDelete property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [allowKeyboardDelete]="false">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the clearString property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [clearString]="'Clear'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the culture property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [culture]="'de-DE'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [closeDelay]="2000">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeCalendarAfterSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [closeCalendarAfterSelection]="false">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputDropDownHorizontalAlignment {
     left,
     right
}

Sets or gets the dropDownHorizontalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [dropDownHorizontalAlignment]="'right'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputDropDownVerticalAlignment {
     top,
     bottom
}

Sets or gets the dropDownVerticalAlignment property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [dropDownVerticalAlignment]="'top'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [disabled]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableBrowserBoundsDetection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [enableBrowserBoundsDetection]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableAbsoluteSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [enableAbsoluteSelection]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the firstDayOfWeek property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [firstDayOfWeek]="3">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputFormatString {
     d,
     f,
     n,
     c,
     p,
     d,
     dd,
     ddd,
     dddd,
     h,
     hh,
     H,
     HH,
     m,
     mm,
     M,
     MM,
     MMM,
     MMMM,
     s,
     ss,
     t,
     tt,
     y,
     yy,
     yyy,
     yyyy
}

Sets or gets the formatString property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [formatString]="'d'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [min]="min">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [max]="max">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the openDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [openDelay]="2000">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [placeHolder]="'Null Value'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [popupZIndex]="99999">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [rtl]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the readonly property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [readonly]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showFooter property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [showFooter]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputSelectionMode {
     none,
     default,
     range
}

Sets or gets the selectionMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [selectionMode]="'range'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showWeekNumbers property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [showWeekNumbers]="false">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showTimeButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [showTimeButton]="true">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showCalendarButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [showCalendarButton]="false">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [theme]="'energyblue'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [template]="'primary'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

enum DateTimeInputTextAlign {
     left,
     right,
     center
}

Sets or gets the textAlign property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [textAlign]="'right'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the todayString property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [todayString]="'Today'">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30" [value]="value">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    
}

This event is triggered on blur when the value is changed .

Code examples

Bind to the change event of jqxDateTimeInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput (onChange)="Change($event)"
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the popup calendar is closed.

Code examples

Bind to the close event of jqxDateTimeInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput (onClose)="Close($event)"
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the popup calendar is opened.

Code examples

Bind to the open event of jqxDateTimeInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput (onOpen)="Open($event)"
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the text is changed.

Code examples

Bind to the textchanged event of jqxDateTimeInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput (onTextchanged)="Textchanged($event)"
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    Textchanged(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxDateTimeInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput (onValueChanged)="ValueChanged($event)"
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent {
    ValueChanged(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.close();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.destroy();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.focus();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.getRange();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.getText();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.getDate();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.getMaxDate();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.getMinDate();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.open();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.setMinDate(new Date(2017, 9, 20));
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.setMaxDate(new Date(2017, 9, 20));
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myDateTimeInput.setDate(new Date(2017, 9, 20));
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDateTimeInput #myDateTimeInput 
             [width]="250" [height]="30">
        </jqxDateTimeInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDateTimeInput') myDateTimeInput: jqxDateTimeInputComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myDateTimeInput.val();
    }

    
}