ejDateTimePicker

8 Mar 201824 minutes to read

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

export class AppComponent { 
        headerFormat:string;
        constructor(){
        this.headerFormat = "MM - yyyy";
        }
 }

height `string | number`

Defines the height of the DateTimePicker textbox.

Default Value

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [height]="height"/>

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"/>

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

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [interval]="interval"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [startDay]="startDay"/>

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"/>

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

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [stepMonths]="stepMonths"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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"/>

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

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [timePopupWidth]="timePopupWidth"/>

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"/>

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"/>

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"/>

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"/>

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

width `string | number`

Defines the width of the DateTimePicker textbox.

Default Value

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker" [width]="width"/>

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

Methods

disable()

Disables the DateTimePicker control.

Example

HTML

<input type="text" ej-datetimepicker id="dateTimePicker"/>

$("#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"/>

$("#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"/>

$("#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"/>

$("#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"/>

$("#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"/>

$("#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)"/>

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)"/>

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)"/>

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)"/>

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)"/>

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)"/>

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)"/>

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)"/>

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)"/>

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

ejDateTimePicker

Syntax

Example

Requires

Members

allowEdit boolean

Default Value

Example

buttonText object

Default Value

Example

buttonText.done string

Example

buttonText.timeNow string

Example

buttonText.timeTitle string

Example

buttonText.today string

Example

cssClass string

Default Value

Example

dateTimeFormat string

Default Value

Example

dayHeaderFormat string | enum

Default Value

Example

depthLevel enum

Default Value

Example

enableAnimation boolean

Default Value

Example

enabled boolean

Default Value

Example

enablePersistence boolean

Default Value

Example

enableRTL boolean

Default Value

Example

enableStrictMode boolean

Default Value

Example

headerFormat string

Default Value

Example

height string | number

Default Value

Example

htmlAttributes object

Default Value

Example

interval number

Default Value

Example

locale string

Default Value

Example

maxDateTime string | date

Default Value

Example

minDateTime string | date

Default Value

Example

popupPosition string | enum

Default value

Example

readOnly boolean

Default Value

Example

showOtherMonths boolean

Default Value

Example

showPopupButton boolean

Default Value

Example

showRoundedCorner boolean

allowEdit `boolean`

buttonText `object`

buttonText.done `string`

buttonText.timeNow `string`

buttonText.timeTitle `string`

buttonText.today `string`

cssClass `string`

dateTimeFormat `string`

dayHeaderFormat `string | enum`

depthLevel `enum`

enableAnimation `boolean`

enabled `boolean`

enablePersistence `boolean`

enableRTL `boolean`

enableStrictMode `boolean`

headerFormat `string`

height `string | number`

htmlAttributes `object`

interval `number`

locale `string`

maxDateTime `string | date`

minDateTime `string | date`

popupPosition `string | enum`

readOnly `boolean`

showOtherMonths `boolean`

showPopupButton `boolean`

showRoundedCorner `boolean`

startDay `number`

startLevel `string | enum`

stepMonths `number`

timeDisplayFormat `string`

timeDrillDown `object`

timeDrillDown.enabled `boolean`

timeDrillDown.interval `number`

timeDrillDown.showMeridian `boolean`

timeDrillDown.autoClose `boolean`

timePopupWidth `string | number`

validationMessage `object`

validationRules `object`

value `string | date`

watermarkText `string`

width `string | number`