Timepicker

since 8.0

CE
PE
EE

Employment/Purpose

A selection box for holding a time (a java.util.Date Object) , but only Hour, Minute, and Second are used.

Example

<timepicker/>

Integrate Moment.js

since 8.5 The JavaScript widgets including org.zkoss.zul.Datebox,org.zkoss.zul.Timebox,org.zkoss.zkmax.zul.Timepicker rely on moment.js and moment-timezone.js to handle time zone information more accurately.

To check the included moment.js version, enter zk.mm.version in the browser developer console tab.

Properties

Format

Use a to signify it is am or pm. The input string follows the formatting of the SimpleDateFormat.

Below is an example of using a within the format.

<zk>
    <window title="Test">
        <timepicker format="a hh:mm:ss"/>
    </window>
</zk>

since 5.0 In addition to specifying the format explicitly, you could specify the styling. There are two different types of styling: short, and medium (representing the styling of java.text.DateFormat). For example, you could specify the styling rather than the real format as follows.

<timepicker format="short"/>
<timepicker format="medium"/>

Then the real format of the timepicker will be decided at run time depending the configuration. For more information, please refer to ZK Developer’s Reference: Date and Time Formatting.

Minimum Time

By default, the options of timepicker start at 0:00 AM, you could specify another minimum time by using a java.util.Date Object.

<zscript>
    import java.util.Date;
    Date min = new Date();
    min.setTime(0);
</zscript>
<timepicker format="HH:mm a" min="${min}" />

Maximum Time

By default, the options of timepicker end before 12:00 AM, you could specify another maximum time by using a java.util.Date Object.

<zscript>
    import java.util.Date;
    Date max = new Date();
    max.setTime(0);
</zscript>
<timepicker format="HH:mm a" max="${max}" />

Interval

By default, the interval of the options in timepicker is one hour, you could specify the interval by using an integer (unit: 1 second).

<timepicker format="HH:mm a" interval="600" />

Inherited Functions

Please refer to FormatInputElement for inherited functions.

Supported Events

Name

Event Type

None

None

Supported Children

*NONE

Use Cases

Version Description Example Location
     

Version History

Version Date Content