ejTimePicker

8 Mar 201824 minutes to read

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.

Syntax

HTML

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

Example

HTML

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

TS

export class AppComponent {
    constructor() {

    }
}

Requires

• module:jQuery

• module:ej.globalize.js

• module:ej.core.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

cssClass string

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

Default Value

• ””

Example

HTML

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

TS

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

disableTimeRanges object

Specifies the list of time range to be disabled.

Default value

• {}

Example

HTML

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

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" }];
    }
}

enableAnimation boolean

Specifies the animation behavior in TimePicker.

Default Value

• true

Example

HTML

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

TS

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

enabled boolean

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

Default Value

• true

Example

HTML

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

TS

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

enablePersistence boolean

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.

Default Value

• false

Example

HTML

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

TS

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

enableRTL boolean

Displays the TimePicker as right to left alignment.

Default Value

• false

Example

HTML

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

TS

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

enableStrictMode boolean

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.

Default Value

• false

Example

HTML

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

TS

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

height string|number

Defines the height of the TimePicker textbox.

Default Value

• ””

Example

HTML

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

TS

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

hourInterval number

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

Default Value

• 1

Example

HTML

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

TS

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

htmlAttributes object

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

Default Value

• {}

Example

HTML

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

TS

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

interval number

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

Default Value

• 30

Example

HTML

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

TS

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

locale string

Defines the localization info used by the TimePicker.

Default Value

• “en-US”

Example

HTML

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

TS

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

maxTime string

Sets the maximum time value to the TimePicker.

Default Value

• “11:59:59 PM”

Example

HTML

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

TS

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

minTime string

Sets the minimum time value to the TimePicker.

Default Value

• “12:00:00 AM”

Example

HTML

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

TS

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

minutesInterval number

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

Default Value

• 1

Example

HTML

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

TS

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

popupHeight string|number

Defines the height of the TimePicker popup.

Default Value

• “191px”

Example

HTML

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

TS

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

popupWidth string|number

Defines the width of the TimePicker popup.

Default Value

• “auto”

Example

HTML

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

TS

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

readOnly boolean

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

Default Value

• false

Example

HTML

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

TS

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

secondsInterval number

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

Default Value

• 1

Example

HTML

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

TS

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

showPopupButton boolean

shows or hides the drop down button in TimePicker.

Default Value

• true

Example

HTML

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

TS

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

showRoundedCorner boolean

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

Default Value

• false

Example

HTML

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

TS

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

timeFormat string

Defines the time format displayed in the TimePicker.

Default Value

• “h:mm tt”

Example

HTML

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

TS

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

value string|Date

Sets a specified time value on the TimePicker.

Default Value

• null

Example

HTML

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

TS

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

width string|number

Defines the width of the TimePicker textbox.

Default Value

• ””

Example

HTML

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

TS

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

Methods

disable()

Allows you to disable the TimePicker.

Example

HTML

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

TS

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

enable()

Allows you to enable the TimePicker.

Example

HTML

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

TS

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

getValue()

It returns the current time value.

Returns:

string

Example

HTML

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

TS

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

hide()

This method will hide the TimePicker control popup.

Example

HTML

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

TS

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

setCurrentTime()

Updates the current system time in TimePicker.

Example

HTML

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

TS

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

show()

This method will show the TimePicker control popup.

Example

HTML

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

TS

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

Events

HTML

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

TS

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

beforeChange

Fires when the time value changed in the TimePicker.

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
prevTime	string	returns the previously selected time value
value	string	returns the modified time value

Example

HTML

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

TS

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

beforeOpen

Fires when the TimePicker popup before opened.

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
prevTime	string	returns the previously selected time value
value	string	returns the time value

Example

HTML

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

TS

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

ejchange

Fires when the time value changed in the TimePicker.

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
isInteraction	boolean	returns true when the value changed by user interaction otherwise returns false
prevTime	string	returns the previously selected time value
value	string	returns the modified time value

Example

HTML

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

TS

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

close

Fires when the TimePicker popup closed.

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
prevTime	string	returns the previously selected time value
value	string	returns the time value

Example

HTML

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

TS

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

create

Fires when create TimePicker successfully.

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

Example

HTML

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

TS

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

destroy

Fires when the TimePicker is destroyed successfully.

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

Example

HTML

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

TS

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

focusIn

Fires when the TimePicker control gets focus.

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
prevTime	string	returns the previously selected time value
value	string	returns the current time value

Example

HTML

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

TS

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

focusOut

Fires when the TimePicker control get lost focus.

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
prevTime	string	returns the previously selected time value
value	string	returns the current time value

Example

HTML

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

TS

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

open

Fires when the TimePicker popup opened.

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 time value

Example

HTML

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

TS

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

select

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

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
prevTime	string	returns the previously selected time value
value	string	returns the selected time value

Example

HTML

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

TS

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