Timebox"

From Documentation
 
(8 intermediate revisions by the same user not shown)
Line 13: Line 13:
  
 
= Example =
 
= Example =
 
 
[[Image:ZKCompRef_Timebox.png]]
 
[[Image:ZKCompRef_Timebox.png]]
 
  
 
<source lang="xml" >
 
<source lang="xml" >
<window title="Simple" width="300px" border="normal">
+
<timebox cols="11"/>
    <timebox id="tb0"/>
 
</window>
 
 
</source>
 
</source>
  
 +
{{IntegrateMomentjs}}
  
 
=Properties=
 
=Properties=
  
 
== Constraint ==
 
== Constraint ==
You could specify what value to accept for input controls by use of the <tt>constraint </tt>property.  
+
You could specify what value to accept for input controls by use of the <code>constraint </code>property.  
It could be <tt>no empty</tt>.
+
It could be <code>no empty</code>.
  
 
If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.
 
If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.
Line 51: Line 48:
  
 
<source lang="xml">
 
<source lang="xml">
<zk>
+
<timebox cols="20" format="a hh:mm:ss"/>
<window title="Test">
+
</source>
<timebox cols="20" format="a hh:mm:ss"/>
+
 
</window>
+
24 hours mode:
</zk></source>
+
<source lang="xml">  
 +
<timebox cols="8" format="HH:mm:ss"/>
 +
</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 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.
  
 
<source lang="xml">
 
<source lang="xml">
Line 65: Line 64:
  
 
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 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]].
 
<blockquote>
 
----
 
<references/>
 
</blockquote>
 
  
 
== Locale ==
 
== Locale ==
Line 80: Line 74:
  
 
== Text ==
 
== Text ==
You should set <tt>text</tt> attribute after <tt>format</tt> attribute or ZK might not convert the specified text well.
+
You should set <code>text</code> attribute after <code>format</code> attribute or ZK might not convert the specified text well.
 
<source lang='xml'>
 
<source lang='xml'>
 
<timebox format="hh:mm:ss a" locale="en" text="12:00:00 AM"/>
 
<timebox format="hh:mm:ss a" locale="en" text="12:00:00 AM"/>
 
</source>
 
</source>
* If you set <tt>format</tt> later than setting <tt>text</tt> attribute, ZK might probably fail to convert the text to a <tt>Date</tt> object according to default format and throw <tt>org.zkoss.zk.ui.WrongValueException</tt>.
+
* If you set <code>format</code> later than setting <code>text</code> attribute, ZK might probably fail to convert the text to a <code>Date</code> object according to default format and throw <code>org.zkoss.zk.ui.WrongValueException</code>.
  
 
=Inherited Functions=
 
=Inherited Functions=
Line 92: Line 86:
 
=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 103: Line 97:
 
=Supported Molds=
 
=Supported Molds=
 
Available molds of a component are defined in lang.xml embedded in zul.jar.
 
Available molds of a component are defined in lang.xml embedded in zul.jar.
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Snapshot</center>
 
! <center>Snapshot</center>
Line 112: Line 106:
 
| <center>rounded</center>
 
| <center>rounded</center>
 
|[[Image:timebox_mold_rounded.png ]]
 
|[[Image:timebox_mold_rounded.png ]]
[Since 5.0.0]
+
{{versionSince| 5.0.0}}
 
|}
 
|}
  
Line 121: Line 115:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 131: Line 125:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 03:24, 7 September 2022

Timebox

Employment/Purpose

An edit box for holding a time (a java.util.Date Object) , but only Hour & Minute are used.

Example

ZKCompRef Timebox.png

<timebox cols="11"/>

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

Constraint

You could specify what value to accept for input controls by use of the constraint property. It could be no empty.

If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.

<timebox constraint="no empty: cannot be empty"/>

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.
<timebox constraint="no empty: ${c:l('err.time.required')}"/>

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.

<timebox cols="20" format="a hh:mm:ss"/>

24 hours mode:

 
<timebox cols="8" format="HH:mm:ss"/>

Since 5.0.7 In addition to specifying the format explicitly, you could specify the styling. 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.

<timebox format="short"/>
<timebox format="long"/>

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: Date and Time Formatting.

Locale

By default, the real format depends on the current locale (i.e., Locales.getCurrent(). However, you could specify the locale for an individual instance such as:

<timebox format="medium" locale="de_DE"/>
<timebox format="long" locale="fr"/>

Text

You should set text attribute after format attribute or ZK might not convert the specified text well.

<timebox format="hh:mm:ss a" locale="en" text="12:00:00 AM"/>
  • If you set format later than setting text attribute, ZK might probably fail to convert the text to a Date object according to default format and throw org.zkoss.zk.ui.WrongValueException.

Inherited Functions

Please refer to FormatInputElement for inherited functions.

Supported Events

Name
Event Type
None None

Supported Molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name
Snapshot
default
Timebox mold default.png
rounded
Timebox mold rounded.png

Since 5.0.0

Supported Children

*NONE

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/09/07


Version Date Content
5.0.7 April, 2011 Timebox.setFormat(String) supported the styling.
5.0.7 April, 2011 Timebox.setLocale(Locale) was introduced to specify a locale other than the current locale.



Last Update : 2022/09/07

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