JavaScript API

ejTimePicker

5 Feb 201924 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

$(element).ejTimePicker()

Example

<input type="text" id="timepicker" />
<script>
// Create TimePicker
$("#timepicker").ejTimePicker();
</script>

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

<input type="text" id="timepicker" />
<script>
// Set the CSS class during initialization.                     
        $("#timepicker").ejTimePicker({  cssClass : "gradient-lime" });
</script>

disableTimeRanges `object`

Specifies the list of time range to be disabled.

Default value

{}

Example

<input type="text" id="timepicker" />
<script>
// Set the disableTimeRanges value during initialization.                  
        $("#timepicker").ejTimePicker({  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" }] });
</script>

enableAnimation `boolean`

Specifies the animation behavior in TimePicker.

Default Value

true

Example

<input type="text" id="timepicker" />
<script>
// Set the enableAnimation value during initialization.                         
        $("#timepicker").ejTimePicker({  enableAnimation : false });
</script>

enabled `boolean`

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

Default Value

true

Example

<input type="text" id="timepicker" />
<script>
// Set the enabled value during initialization.                         
        $("#timepicker").ejTimePicker({  enabled : false });
</script>

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

<input type="text" id="timepicker" />
<script>
// Set the enablePersistence value during initialization.                       
        $("#timepicker").ejTimePicker({  enablePersistence : true });
</script>

enableRTL `boolean`

Displays the TimePicker as right to left alignment.

Default Value

false

Example

<input type="text" id="timepicker" />
<script>
// Set the enableRTL value during initialization.                       
        $("#timepicker").ejTimePicker({  enableRTL : true });
</script>

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

<input type="text" id="timepicker" />
<script>
//To set enableStrictMode API during initialization  
        $("#timepicker").ejTimePicker({  enableStrictMode: true });
        
</script>

height `string|number`

Defines the height of the TimePicker textbox.

Default Value

””

Example

<input type="text" id="timepicker" />
<script>
// Set the height value during initialization.                  
        $("#timepicker").ejTimePicker({  height : "35" });
</script>

hourInterval `number`

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

Default Value

1

Example

<input type="text" id="timepicker" />
<script>
// Set the hourInterval value during initialization.                    
        $("#timepicker").ejTimePicker({  hourInterval : 2 });
</script>

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

<input type="text" id="timepicker" />
<script>
// To Set HtmlAttributes value during initialization.                   
        $("#timepicker").ejTimePicker({htmlAttributes : {required:"required"});
</script>

interval `number`

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

Default Value

30

Example

<input type="text" id="timepicker" />
<script>
// Set the interval value during initialization.                        
        $("#timepicker").ejTimePicker({  interval : 60 });
</script>

locale `string`

Defines the localization info used by the TimePicker.

Default Value

“en-US”

Example

<input type="text" id="timepicker" />
<script>
// Set the locale value during initialization.                  
        $("#timepicker").ejTimePicker({  locale : "en-US" });
</script>

maxTime `string`

Sets the maximum time value to the TimePicker.

Default Value

“11:59:59 PM”

Example

<input type="text" id="timepicker" />
<script>
// Set the maxTime value during initialization.                         
        $("#timepicker").ejTimePicker({  maxTime : "5:00 PM" });
</script>

minTime `string`

Sets the minimum time value to the TimePicker.

Default Value

“12:00:00 AM”

Example

<input type="text" id="timepicker" />
<script>
// Set the minTime value during initialization.                         
        $("#timepicker").ejTimePicker({  minTime : "8:00 AM" });
</script>

minutesInterval `number`

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

Default Value

1

Example

<input type="text" id="timepicker" />
<script>
// Set the minute interval value during initialization.                         
        $("#timepicker").ejTimePicker({  minutesInterval : 5 });
</script>

popupHeight `string|number`

Defines the height of the TimePicker popup.

Default Value

“191px”

Example

<input type="text" id="timepicker" />
<script>
// Set the popupHeight value during initialization.                     
        $("#timepicker").ejTimePicker({  popupHeight : "250px" });
</script>

popupWidth `string|number`

Defines the width of the TimePicker popup.

Default Value

“auto”

Example

<input type="text" id="timepicker" />
<script>
// Set the popupWidth value during initialization.                      
        $("#timepicker").ejTimePicker({  popupWidth : "150px" });
</script>

readOnly `boolean`

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

Default Value

false

Example

<input type="text" id="timepicker" />
<script>
// Set the readOnly value during initialization.                        
        $("#timepicker").ejTimePicker({  readOnly : false });
</script>

secondsInterval `number`

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

Default Value

1

Example

<input type="text" id="timepicker" />
<script>
// Set the seconds interval value during initialization.                        
        $("#timepicker").ejTimePicker({ timeFormat : "h:mm:ss tt",secondsInterval : 5 });
</script>

showPopupButton `boolean`

shows or hides the drop down button in TimePicker.

Default Value

true

Example

<input type="text" id="timepicker" />
<script>
// Set the showPopupButton property during initialization.                      
        $("#timepicker").ejTimePicker({  showPopupButton : false });
</script>

showRoundedCorner `boolean`

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

Default Value

false

Example

<input type="text" id="timepicker" />
<script>
// Set the showRoundedCorner value during initialization.                       
        $("#timepicker").ejTimePicker({  showRoundedCorner : true });
</script>

timeFormat `string`

Defines the time format displayed in the TimePicker.

Default Value

“h:mm tt”

Example

<input type="text" id="timepicker" />
<script>
// Set the timeFormat during initialization.                    
        $("#timepicker").ejTimePicker({  timeFormat : "h:mm:ss tt" });
</script>

validationMessages `object`

Set the jQuery validation error message in TimePicker.

Default Value

null

Example

<input type="text" id="timepicker" name="time" />
<script>
//To set validationMessage API during initialization  
 $("#timepicker").ejTimePicker({  
  validationRules:{                     
           required:true
   },
        validationMessages: {
           required: "Required Time value"
        }
});
</script>

validationRules `object`

Set the jQuery validation rules in TimePicker.

Default Value

null

Example

<input type="text" id="timepicker" name="time" />
<script>
//To set validationRules API during initialization  
 $("#timepicker").ejTimePicker({  
  validationRules:{                     
          required:true
        }
});
</script>

value `string|Date`

Sets a specified time value on the TimePicker.

Default Value

null

Example

<input type="text" id="timepicker" />
<script>
// Set the time value during initialization.                    
        $("#timepicker").ejTimePicker({  value : "5:10 PM" });
</script>

watermarkText `string`

Specifies the water mark text to be displayed in input text.

Default Value

“select a time”

Example

<input type="text" id="timepicker" />
<script>
//To set watermarkText during initialization  
        $("#timepicker").ejTimePicker({  watermarkText: "Enter time" });
</script>

width `string|number`

Defines the width of the TimePicker textbox.

Default Value

””

Example

<input type="text" id="timepicker" />
<script>
// Set the width value during initialization.                   
        $("#timepicker").ejTimePicker({  width : "120" });
</script>

Methods

disable()

Allows you to disable the TimePicker.

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.disable(); // disable the timepicker
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// disable the time picker
$("#timepicker").ejTimePicker("disable");
</script>

enable()

Allows you to enable the TimePicker.

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.enable(); // enables the time picker
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// enables the time picker
$("#timepicker").ejTimePicker("enable");
</script>

getValue()

It returns the current time value.

Returns:

string

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.getValue(); // returns the time picker value
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// to get the time value
$("#timepicker").ejTimePicker("getValue");
</script>

hide()

This method will hide the TimePicker control popup.

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.hide(); // hide the time picker popup
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// to hide the time picker popup
$("#timepicker").ejTimePicker("hide");
</script>

setCurrentTime()

Updates the current system time in TimePicker.

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.setCurrentTime(); // updates the current system
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// updates the current system
$("#timepicker").ejTimePicker("setCurrentTime");
</script>

show()

This method will show the TimePicker control popup.

Example

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// Create TimePicker instance
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.show(); // show the time picker popup
</script>

<input type="text" id="timepicker" />
<script>
$("#timepicker").ejTimePicker();
// to show the time picker popup
$("#timepicker").ejTimePicker("show");
</script>

Events

beforeChange

Fires when the time value changed in the TimePicker.

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//change event for timepicker
$("#timepicker").ejTimePicker({
   beforeChange: function (args) {}
});  
</script>

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

<input type="text" id="timepicker" />
<script>
//beforeOpen event for timepicker
$("#timepicker").ejTimePicker({
   beforeOpen: function (args) {}
});   
</script>

change

Fires when the time value changed in the TimePicker.

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//change event for timepicker
$("#timepicker").ejTimePicker({
   change: function (args) {}
});  
</script>

close

Fires when the TimePicker popup closed.

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//close event for timepicker
$("#timepicker").ejTimePicker({
   close: function (args) {}
});   
</script>

create

Fires when create TimePicker successfully.

Name	Type	Description
model	object	returns the TimePicker model
type	string	returns the name of the event

Example

<input type="text" id="timepicker" />
<script>
//create event for TimePicker
$("#timepicker").ejTimePicker({
   create: function (args) {}
});   
</script>

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

<input type="text" id="timepicker" />
<script>
//destroy event for TimePicker
$("#timepicker").ejTimePicker({
   destroy: function (args) {}
});   
</script>

focusIn

Fires when the TimePicker control gets focus.

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//focusIn event for TimePicker
$("#timepicker").ejTimePicker({
   focusIn: function (args) {}
});      
</script>

focusOut

Fires when the TimePicker control get lost focus.

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//focusOut event for TimePicker
$("#timepicker").ejTimePicker({
   focusOut: function (args) {}
}); 
</script>

open

Fires when the TimePicker popup opened.

Name	Type	Description
model	object	returns the TimePicker model
type	string	returns the name of the event
value	string	returns the time value

Example

<input type="text" id="timepicker" />
<script>
//open event for TimePicker
$("#timepicker").ejTimePicker({
   open: function (args) {}
});   
</script>

select

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

Name	Type	Description
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

<input type="text" id="timepicker" />
<script>
//select event for TimePicker
$("#timepicker").ejTimePicker({
   select: function (args) {}
});   
</script>