Properties

NameTypeDefault
animationType enum:DateTimeInputAnimationType 'slide'
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 {
    
}
allowNullDate Boolean true

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 {
    
}
allowKeyboardDelete Boolean true

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 {
    
}
clearString String 'Clear'

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 {
    
}
culture String default

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 {
    
}
closeDelay Number 400

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 {
    
}
closeCalendarAfterSelection Boolean true

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 {
    
}
dropDownHorizontalAlignment enum:DateTimeInputDropDownHorizontalAlignment 'left'
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 {
    
}
dropDownVerticalAlignment enum:DateTimeInputDropDownVerticalAlignment 'bottom'
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 {
    
}
disabled Boolean false

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 {
    
}
enableBrowserBoundsDetection Boolean false

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 {
    
}
enableAbsoluteSelection Boolean false

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 {
    
}
firstDayOfWeek Number 0

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 {
    
}
formatString enum:DateTimeInputFormatString dd/MM/yyyy
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 {
    
}
height Size null

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 {
    
}
min Date Date(1900, 1, 1)

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 {
    
}
max Date Date(2100, 1, 1)

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 {
    
}
openDelay Number 350

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 {
    
}
placeHolder String ""

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 {
    
}
popupZIndex Number 20000

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 {
    
}
rtl Boolean false

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 {
    
}
readonly Boolean false

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 {
    
}
showFooter Boolean false

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 {
    
}
selectionMode enum:DateTimeInputSelectionMode 'default'
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 {
    
}
showWeekNumbers Boolean true

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 {
    
}
showTimeButton Boolean false

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 {
    
}
showCalendarButton Boolean true

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 {
    
}
theme String ''

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 {
    
}
template enum:DateTimeInputTemplate 'default'
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 {
    
}
textAlign enum:DateTimeInputTextAlign left
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 {
    
}
todayString String 'Today'

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 {
    
}
value Date Today's Date

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 {
    
}
width Size null

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

Events

change Event

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
    }

    
}
close Event

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
    }

    
}
open Event

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
    }

    
}
textchanged Event

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
    }

    
}
valueChanged Event

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
    }

    
}

Methods

NameReturn TypeArguments
close Void None 
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();
    }

    
}
destroy Void None 
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();
    }

    
}
focus Void None 
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();
    }

    
}
getRange Any date: Any 
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();
    }

    
}
getText String None 
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();
    }

    
}
getDate Any None 
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();
    }

    
}
getMaxDate Any None 
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();
    }

    
}
getMinDate Any None 
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();
    }

    
}
open Void None 
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();
    }

    
}
setRange Void date: Any,
date2: Any 
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));
    }

    
}
setMinDate Void date: Any 
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));
    }

    
}
setMaxDate Void date: Any 
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));
    }

    
}
setDate Void date: Any 
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));
    }

    
}
val Any value: Any,
value2: Any 
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();
    }

    
}