ejmTimePicker

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>