The TimePicker control for JavaScript allows users to select a time value. The available times can be restricted to a range by setting minimum and maximum time values. The TimePicker sets the time as a mask to prevent users from entering invalid values.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() {

}

}

{% endhighlight %}

• module:jQuery

• module:ej.globalize.js

• module:ej.core.js

• module:ej.timepicker.js

• module:ej.scroller.js

N> 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:cssclass}

Sets the root CSS class for the TimePicker theme, which is used to customize.

• ""

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [cssClass]="cssClass"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { cssClass:string; constructor() { cssClass ="gradient-lime"; } }

{% endhighlight %}

{:#members:disabletimeranges}

Specifies the list of time range to be disabled.

• {}

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [disableTimeRanges]="disableTimeRanges"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { :any; constructor() { disableTimeRanges = [{ startTime: "3:00 AM", endTime: "6:00 AM" }, { startTime: "1:00 PM", endTime: "3:00 PM" }, { startTime: "8:00 PM", endTime: "10:00 PM" }]; } }

{% endhighlight %}

{:#members:enableanimation}

Specifies the animation behavior in TimePicker.

• true

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [enableAnimation]="enableAnimation"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { enableAnimation:boolean; constructor() { enableAnimation : true; } }

{% endhighlight %}

{:#members:enabled}

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

• true

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [enabled]="enabled"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { enabled:boolean; constructor() { enabled : false; } }

{% endhighlight %}

{:#members:enablepersistence}

Save current model value to browser cookies for maintaining states. When refreshing the TimePicker control page, the model value is applied from browser cookies or HTML 5 local storage.

• false

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [enablePersistence]="enablePersistence"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { enablePersistence:boolean; constructor() { enablePersistence : true; } }

{% endhighlight %}

{:#members:enablertl}

Displays the TimePicker as right to left alignment.

• false

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [enableRTL]="enableRTL"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { enableRTL:boolean; constructor() { enableRTL : true; } }

{% endhighlight %}

{:#members:enablestrictmode}

When the enableStrictMode is set as true it allows the value outside of the range and also indicate with red color border, otherwise it internally changed to the min or max range value based an input value.

• false

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [enableStrictMode]="enableStrictMode"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { enableStrictMode:boolean; constructor() { enableStrictMode : true; } }

{% endhighlight %}

{:#members:height}

Defines the height of the TimePicker textbox.

• ""

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [height]="height"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { height:string; constructor() { height : "35"; } }

{% endhighlight %}

{:#members:hourinterval}

Sets the step value for increment an hour value through arrow keys or mouse scroll.

• 1

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [hourInterval]="hourInterval"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { hourInterval:number; constructor() { hourInterval : 2; } }

{% endhighlight %}

{:#members:htmlattributes}

It allows to define the characteristics of the TimePicker control. It will helps to extend the capability of an HTML element.

• {}

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [htmlAttributes]="htmlAttributes"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { htmlAttributes:Object; constructor() { htmlAttributes : {required:"required"}; } }

{% endhighlight %}

{:#members:interval}

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

• 30

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [interval]="interval"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { interval:number; constructor() { interval : 60; } }

{% endhighlight %}

{:#members:locale}

Defines the localization info used by the TimePicker.

• "en-US"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [locale]="locale"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { locale:string; constructor() { locale : "en-US"; } }

{% endhighlight %}

{:#members:maxtime}

Sets the maximum time value to the TimePicker.

• "11:59:59 PM"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [maxTime]="maxTime"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { maxTime:string; constructor() { maxTime : "5:00 PM"; } }

{% endhighlight %}

{:#members:mintime}

Sets the minimum time value to the TimePicker.

• "12:00:00 AM"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [minTime]="minTime"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { minTime:string; constructor() { minTime : "8:00 AM"; } }

{% endhighlight %}

{:#members:minutesinterval}

Sets the step value for increment the minute value through arrow keys or mouse scroll.

• 1

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [minutesInterval]="minutesInterval"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { minutesInterval:number; constructor() { minutesInterval : 5; } }

{% endhighlight %}

{:#members:popupheight}

Defines the height of the TimePicker popup.

• "191px"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [popupHeight]="popupHeight"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { popupHeight:string; constructor() { popupHeight : "250px"; } }

{% endhighlight %}

{:#members:popupwidth}

Defines the width of the TimePicker popup.

• "auto"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [popupWidth]="popupWidth"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { popupWidth:string; constructor() { popupWidth : "150px"; } }

{% endhighlight %}

{:#members:readonly}

Toggles the readonly state of the TimePicker. When the widget is readOnly, it doesn’t allow your input.

• false

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [readOnly]="readOnly"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { readOnly:boolean; constructor() { readOnly : false; } }

{% endhighlight %}

{:#members:secondsinterval}

Sets the step value for increment the seconds value through arrow keys or mouse scroll.

• 1

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [timeFormat]="timeFormat" [secondsInterval]="secondsInterval"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { timeFormat:string; secondsInterval:number; constructor() { timeFormat : "h:mm:ss tt"; secondsInterval: 5; } }

{% endhighlight %}

{:#members:showpopupbutton}

shows or hides the drop down button in TimePicker.

• true

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [showPopupButton]="showPopupButton"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { showPopupButton:boolean; constructor() { showPopupButton: false; } }

{% endhighlight %}

{:#members:showroundedcorner}

TimePicker is displayed with rounded corner when this property is set to true.

• false

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [showRoundedCorner]="showRoundedCorner"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { showRoundedCorner:boolean; constructor() { showRoundedCorner: true; } }

{% endhighlight %}

{:#members:timeformat}

Defines the time format displayed in the TimePicker.

• "h:mm tt"

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [timeFormat]="timeFormat"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { timeFormat:string; constructor() { timeFormat: "h:mm:ss tt"; } }

{% endhighlight %}

{:#members:value}

Sets a specified time value on the TimePicker.

• null

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [value]="value"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value:string; constructor() { value: "5:10 PM"; } }

{% endhighlight %}

{:#members:width}

Defines the width of the TimePicker textbox.

• ""

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" [width]="width"/>

{% endhighlight %}

{% highlight ts %}

export class AppComponent { width:string; constructor() { width: "120"; } }

{% endhighlight %}

{:#methods:disable}

Allows you to disable the TimePicker.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.disable(); // disable the timePicker

{% endhighlight %}

{:#methods:enable}

Allows you to enable the TimePicker.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.enable(); // enables the time picker

{% endhighlight %}

{:#methods:getvalue}

It returns the current time value.

string

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.getValue(); // returns the time picker value

{% endhighlight %}

{:#methods:hide}

This method will hide the TimePicker control popup.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.hide(); // hide the time picker popup

{% endhighlight %}

{:#methods:setcurrenttime}

Updates the current system time in TimePicker.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.setCurrentTime(); // updates the current system

{% endhighlight %}

{:#methods:show}

This method will show the TimePicker control popup.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

$("#timePicker").ejTimePicker(); // Create TimePicker instance var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.show(); // show the time picker popup

{% endhighlight %}

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (show)="onShow($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:beforechange}

Fires when the time value changed in the TimePicker.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (beforeChange)="onBeforeChange($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:beforeopen}

Fires when the TimePicker popup before opened.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (beforeOpen)="onBeforeOpen($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:ejchange}

Fires when the time value changed in the TimePicker.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (ejchange)="onChange($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:close}

Fires when the TimePicker popup closed.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (close)="onClose($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:create}

Fires when create TimePicker successfully.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:destroy}

Fires when the TimePicker is destroyed successfully.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (destroy)="onDestroy($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:focusin}

Fires when the TimePicker control gets focus.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (focusIn)="onFocusIn($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:focusout}

Fires when the TimePicker control get lost focus.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (focusOut)="onFocusOut($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:open}

Fires when the TimePicker popup opened.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (open)="onOpen($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}

{:#events:select}

Fires when the value is selected from the TimePicker dropdown list.

{% highlight html %}

<input type="text" ej-timepicker id="timePicker" (select)="onSelect($event)"/>

{% endhighlight %}

{% highlight ts %}

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

{% endhighlight %}