Timebox"
Jumperchen (talk | contribs) |
|||
(21 intermediate revisions by 6 users not shown) | |||
Line 13: | Line 13: | ||
= Example = | = Example = | ||
+ | [[Image:ZKCompRef_Timebox.png]] | ||
+ | |||
+ | <source lang="xml" > | ||
+ | <timebox cols="11"/> | ||
+ | </source> | ||
+ | |||
+ | {{IntegrateMomentjs}} | ||
+ | |||
+ | =Properties= | ||
+ | |||
+ | == Constraint == | ||
+ | You could specify what value to accept for input controls by use of the <code>constraint </code>property. | ||
+ | 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. | |
+ | |||
+ | <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" > | <source lang="xml" > | ||
− | + | <timebox constraint="no empty: ${c:l('err.time.required')}"/> | |
− | + | </source> | |
− | + | ||
+ | == Format == | ||
+ | |||
+ | Use ''a'' to signify it is ''am'' or ''pm''. The input string follows the formatting of the [http://java.sun.com/j2se/1.5.0/docs/api/java/text/SimpleDateFormat.html SimpleDateFormat]. | ||
+ | |||
+ | Below is an example of using ''a'' within the format. | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <timebox cols="20" format="a hh:mm:ss"/> | ||
+ | </source> | ||
+ | |||
+ | 24 hours mode: | ||
+ | <source lang="xml"> | ||
+ | <timebox cols="8" format="HH:mm:ss"/> | ||
+ | </source> | ||
+ | |||
+ | {{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"> | ||
+ | <timebox format="short"/> | ||
+ | <timebox format="long"/> | ||
</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]]. | ||
+ | == Locale == | ||
+ | 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: | ||
+ | <source lang="xml"> | ||
+ | <timebox format="medium" locale="de_DE"/> | ||
+ | <timebox format="long" locale="fr"/> | ||
+ | </source> | ||
+ | |||
+ | == Text == | ||
+ | You should set <code>text</code> attribute after <code>format</code> attribute or ZK might not convert the specified text well. | ||
+ | <source lang='xml'> | ||
+ | <timebox format="hh:mm:ss a" locale="en" text="12:00:00 AM"/> | ||
+ | </source> | ||
+ | * 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= | ||
+ | |||
+ | Please refer to [[ZK_Component_Reference/Base_Components/FormatInputElement| FormatInputElement]] for inherited functions. | ||
=Supported Events= | =Supported Events= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
Line 39: | 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. | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Snapshot</center> | ! <center>Snapshot</center> | ||
Line 48: | Line 106: | ||
| <center>rounded</center> | | <center>rounded</center> | ||
|[[Image:timebox_mold_rounded.png ]] | |[[Image:timebox_mold_rounded.png ]] | ||
− | + | {{versionSince| 5.0.0}} | |
|} | |} | ||
Line 57: | Line 115: | ||
=Use Cases= | =Use Cases= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
Line 67: | Line 125: | ||
=Version History= | =Version History= | ||
{{LastUpdated}} | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | | + | | 5.0.7 |
− | | | + | | April, 2011 |
− | | | + | | <javadoc method="setFormat(java.lang.String)">org.zkoss.zul.Timebox</javadoc> supported the styling. |
+ | |- | ||
+ | | 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 03:24, 7 September 2022
Timebox
- Demonstration: Date and Time
- Java API: Timebox
- JavaScript API: Timebox
- Style Guide: Timebox
Employment/Purpose
An edit box for holding a time (a java.util.Date Object) , but only Hour & Minute are used.
Example
<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 settingtext
attribute, ZK might probably fail to convert the text to aDate
object according to default format and throworg.zkoss.zk.ui.WrongValueException
.
Inherited Functions
Please refer to FormatInputElement for inherited functions.
Supported Events
None | None |
- Inherited Supported Events: FormatInputElement
Supported Molds
Available molds of a component are defined in lang.xml embedded in zul.jar.
Since 5.0.0 |
Supported Children
*NONE
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
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. |