Timepicker"

From Documentation
 
(21 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
= Timepicker =
 
= Timepicker =
−
 
+
{{versionSince| 8.0.0}}
−
*Java API: <javadoc>org.zkoss.zul.Timepicker</javadoc>
+
{{ZK EE}}
 +
*Java API: <javadoc>org.zkoss.zkmax.zul.Timepicker</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.inp.Timepicker</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.inp.Timepicker</javadoc>
−
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Timebox | Timebox]]
+
*Style Guide: [[ZK_Style_Customization_Guide | Timepicker]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
−
An edit box for holding a time (a java.util.Date Object) , but only Hour & Minute are used.
+
A selection box for holding a time (a java.util.Date Object) , but only Hour, Minute, and Second are used.
  
 
= Example =
 
= Example =
  
−
[[Image:ZKCompRef_Timebox.png]]
+
[[Image:ZKCompRef_Timepicker.png]]
  
  
 
<source lang="xml" >
 
<source lang="xml" >
−
<window title="Simple" width="300px" border="normal">
+
<timepicker/>
−
    <timebox id="tb0"/>
 
−
</window>
 
 
</source>
 
</source>
  
 +
{{IntegrateMomentjs}}
  
 
=Properties=
 
=Properties=
−
 
−
== Constraint ==
 
−
You could specify what value to accept for input controls by use of the <tt>constraint </tt>property.
 
−
It could be <tt>no empty</tt>.
 
−
 
−
If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.
 
−
 
−
<source lang="xml" >
 
−
<timebox constraint="no empty: cannot be empty"/>
 
−
</source>
 
−
 
−
Notes:
 
−
* The error message, if specified, must be the last element and start with colon.
 
−
* To support multiple languages, you could use the 「l」 function as depicted in the '''Internationalization''' chapter.
 
−
 
−
<source lang="xml" >
 
−
<timebox constraint="no empty: ${c:l('err.time.required')}"/>
 
−
</source>
 
  
 
== Format ==
 
== Format ==
Line 52: Line 34:
 
<zk>
 
<zk>
 
<window title="Test">
 
<window title="Test">
−
<timebox cols="20" format="a hh:mm:ss"/>
+
<timepicker format="a hh:mm:ss"/>
 
</window>
 
</window>
 
</zk></source>
 
</zk></source>
  
−
In addition to specifying the format explicitly, you could specify the styling<ref>The styling is available since 5.0.7</ref>. There are four different types of styling: short, medium, long and full (representing the styling of java.text.DateFormat). For example, you could specify the styling rather than the real format as follows.
+
{{VersionSince| 5.0.7}} 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.
  
 
<source lang="xml">
 
<source lang="xml">
−
<timebox format="short"/>
+
<timepicker format="short"/>
−
<timebox format="long"/>
+
<timepicker format="medium"/>
 
</source>
 
</source>
  
−
Then the real format of the timebox will be decided at run time depending the configuration. For more information, please refer to [[ZK Developer's Reference/Internationalization/Date and Time Formatting|ZK Developer's Reference: Date and Time Formatting]].
+
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/Internationalization/Date and Time Formatting|ZK Developer's Reference: Date and Time Formatting]].
  
−
<blockquote>
+
== 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.
−
<references/>
 
−
</blockquote>
 
  
−
== Locale ==
+
<source lang="xml">
−
By default, the real format depends on the current locale (i.e., <javadoc method="getCurrent()">org.zkoss.util.Locales</javadoc>. However, you could specify the locale for an individual instance such as:
+
<zscript>
 +
import java.util.Date;
 +
Date min = new Date();
 +
min.setTime(0);
 +
</zscript>
 +
<timepicker format="HH:mm a" min="${min}" />
 +
</source>
 +
 
 +
== 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.
  
 
<source lang="xml">
 
<source lang="xml">
−
<timebox format="medium" locale="de_DE"/>
+
<zscript>
−
<timebox format="long" locale="fr"/>
+
import java.util.Date;
 +
Date max = new Date();
 +
max.setTime(0);
 +
</zscript>
 +
<timepicker format="HH:mm a" max="${max}" />
 +
</source>
 +
 
 +
== 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).
 +
 
 +
<source lang="xml">
 +
<timepicker format="HH:mm a" interval="600" />
 
</source>
 
</source>
  
Line 84: Line 84:
 
=Supported Events=
 
=Supported Events=
  
−
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 92: Line 92:
 
|}
 
|}
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/FormatInputElement#Supported_Events | FormatInputElement]]
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/FormatInputElement#Supported_Events | FormatInputElement]]
−
 
−
=Supported Molds=
 
−
Available molds of a component are defined in lang.xml embedded in zul.jar.
 
−
{| border="1" | width="100%"
 
−
! <center>Name</center>
 
−
! <center>Snapshot</center>
 
−
|-
 
−
| <center>default</center>
 
−
|[[Image:timebox_mold_default.png ]]
 
−
|-
 
−
| <center>rounded</center>
 
−
|[[Image:timebox_mold_rounded.png ]]
 
−
[Since 5.0.0]
 
−
|}
 
  
 
=Supported Children=
 
=Supported Children=
Line 113: Line 99:
 
=Use Cases=
 
=Use Cases=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 123: Line 109:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.7
+
| &nbsp;
−
| April, 2011
+
| &nbsp;
−
| <javadoc method="setFormat(java.lang.String)">org.zkoss.zul.Timebox</javadoc> supported the styling.
+
| &nbsp;
−
|-
 
−
| 5.0.7
 
−
| April, 2011
 
−
| <javadoc method="setLocale(java.util.Locale)">org.zkoss.zul.Timebox</javadoc> was introduced to specify a locale other than the current locale.
 
 
|}
 
|}
−
 
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 09:33, 28 December 2023


DocumentationZK Component ReferenceInputTimepicker
Timepicker

Timepicker

Since 8.0.0

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Employment/Purpose

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

Example

ZKCompRef Timepicker.png 


<timepicker/>

Integrate Moment.js

Since 8.5.1 The JavaScript widgets including Datebox,Timebox,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.7 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

Last Update : 2023/12/28


Version Date Content
     


Last Update : 2023/12/28

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Timepicker&oldid=56524"