ejmTimePicker

5 Jun 202319 minutes to read

The Essential JavaScript Mobile TimePicker provides support to display the TimePicker element within your web page and allows you to pick the time.

Custom Design for HTML TimePicker control.

$(element).ejmTimePicker()

Example

HTML

<!-- Unobtrusive way of rendering -->
<input id="timepicker" data-role="ejmtimepicker" />

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

• module:ej.mobile.dialog

• module:ej.mobile.scrollpanel

• module:ej.mobile.scrollbar

Members

cssClass String

Sets the root class for TimePicker theme. This cssClass API helps to use custom skinning option for TimePicker control. By defining the root class using this API, we need to include this root class in CSS.

Default Value:

• ””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-cssclass="customclass" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" />
    <script>
        $(function () {	
            $("#timepicker").ejmTimePicker({ cssClass: "customclass" });
        });
    </script>

enabled Boolean

Specifies whether to enable or disable the control.

Default Value:

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-enabled=false />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />

    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ enabled: false });
        });
    </script>

enablePersistence Boolean

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-enablepersistence=true />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ enablePersistence: true });
        });
    </script>

hourFormat String

Specifies the hour format.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-hourformat="twentyfour" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />

    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ hourFormat: "twentyfour" });
        });
    </script>

locale String

Change the TimePicker format based on given culture.

Default Value:

• “en-US”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-locale="en-US" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />

    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ locale: "en-US" });
        });
    </script>

renderMode Enum

Specifies the rendering mode of the control. SeeRenderMode

Default Value:

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-rendermode="android" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ renderMode: "android" });
        });
    </script>

timeFormat String

Specifies the time format.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-hourformat="twelve" data-ej-timeformat="hh:mm tt" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ hourFormat: "twelve", timeFormat: "hh:mm tt" });
        });
    </script>

value String

Specifies the value.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-value="02:20 PM" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="timepicker" data-role="none" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker({ value: "02:20 PM" });
        });
    </script>

Methods

disable()

To disable the timepicker control.

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        // changes the TimePicker current state to disabled
        $(function () {
            $("#timepicker").ejmTimePicker("disable");
        });
    </script>

enable()

To enable the timepicker control.

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        $(function () {
            // change the TimePicker current state to enabled
            $("#timepicker").ejmTimePicker("enable");
        });
    </script>

getValue()

Get the current value.

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        // get the TimePicker current value
        $(function () {
            $("#timepicker").ejmTimePicker("getValue");
        });
    </script>

hide()

To hide the TimePicker control

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker("hide");
        });
    </script>

setCurrentTime()

Set the given time

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        // get the TimePicker current value
        $(function () {
            $("#timepicker").ejmTimePicker("setCurrentTime", "05:20");
        });
    </script>

show()

To show the TimePicker control

Example

HTML

<input id="timepicker" data-role="ejmtimepicker" />
    <script>
        $(function () {
            $("#timepicker").ejmTimePicker("show");
        });
    </script>

Events

change

Event triggers when the value is changed while interaction.

Name	Type	Description
argument	Object	Event parameters from 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 value string return the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-change="change" />
    <script>
        function change() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //change event for TimePicker
        $("#timepicker").ejmTimePicker({
            change: function (args) {
                //handle the event
            }
        });
    </script>

close

Event triggers when the control is closed after interaction.

Name	Type	Description
argument	Object	Event parameters from 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 value string Returns the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-close="close" />
    <script>
        function close() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //close event for TimePicker
        $("#timepicker").ejmTimePicker({
            close: function (args) {
                //handle the event
            }
        });
    </script>

focusIn

Event triggers when the input element is focused.

Name	Type	Description
argument	Object	Event parameters from 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 value string Returns the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-focusin="focusin" />
    <script>
        function focusin() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //focusIn event for TimePicker
        $("#timepicker").ejmTimePicker({
            focusIn: function (args) {
                //handle the event
            }
        });
    </script>

focusOut

Event triggers when the input element is focused out or blurred.

Name	Type	Description
argument	Object	Event parameters from 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 value string Return the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-focusout="focusout" />
    <script>
        function focusout() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //focusOut event for TimePicker
        $("#timepicker").ejmTimePicker({
            focusOut: function (args) {
                //handle the event
            }
        });
    </script>

load

Event triggers when the control is loaded.

Name	Type	Description
argument	Object	Event parameters from 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 value string return the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-load="load" />
    <script>
        function load() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //load event for TimePicker
        $("#timepicker").ejmTimePicker({
            load: function (args) {
                //handle the event
            }
        });
    </script>

open

Event triggers when the control is opened for selection.

Name	Type	Description
argument	Object	Event parameters from 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 value string Returns the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-open="open" />
    <script>
        function open() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //open event for TimePicker
        $("#timepicker").ejmTimePicker({
            open: function (args) {
                //handle the event
            }
        });
    </script>

select

Event triggers when time value is selected.

Name	Type	Description
argument	Object	Event parameters from 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 value string Returns the timepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="timepicker" data-role="ejmtimepicker" data-ej-select="select" />
    <script>
        function select() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="timepicker" data-role="none" />
    <script>
        //select event for TimePicker
        $("#timepicker").ejmTimePicker({
            select: function (args) {
                //handle the event
            }
        });
    </script>