Datebox"
Tmillsclare (talk | contribs) m (Created page with 'init') |
|||
| Line 1: | Line 1: | ||
| − | + | {{ZKComponentReferencePageHeader}} | |
| + | |||
| + | = Datebox = | ||
| + | |||
| + | *Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f9 Date and Time] | ||
| + | *Java API: <javadoc>org.zkoss.zul.Datebox</javadoc> | ||
| + | *JavaScript API: <javadoc directory="jsdoc">zul.db.Datebox</javadoc> | ||
| + | |||
| + | = Employment/Purpose = | ||
| + | An edit box for holding a date. After click on the calender, a <tt>calender</tt> will pop-up for inputting date. | ||
| + | |||
| + | Mouseless Entry <tt>datebox</tt> | ||
| + | |||
| + | ‧ Alt+DOWN to pop up the <tt>calendar.</tt> | ||
| + | |||
| + | ‧ LEFT, RIGHT, UP and DOWN to change the selected day from the <tt>calendar.</tt> | ||
| + | |||
| + | ‧ ENTER to activate the selection by copying the selected day to the <tt>datebox</tt> control. | ||
| + | |||
| + | ‧ Alt+UP or ESC to give up the selection and close the <tt>calendar</tt>. | ||
| + | |||
| + | |||
| + | = Example = | ||
| + | |||
| + | |||
| + | [[Image:ZKComRef_Datebox_Example.PNG]] | ||
| + | |||
| + | <source lang="xml" > | ||
| + | <datebox lenient="true" buttonVisible="false" /> | ||
| + | <datebox lenient="false" compact="false" buttonVisible="true" /> | ||
| + | </source> | ||
| + | |||
| + | |||
| + | |||
| + | =Supported events= | ||
| + | |||
| + | {| border="1" | width="100%" | ||
| + | ! <center>Name</center> | ||
| + | ! <center>Event Type</center> | ||
| + | |||
| + | |- | ||
| + | | <center><tt>onClick</tt></center> | ||
| + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc> | ||
| + | |||
| + | Denotes user has clicked the component. | ||
| + | |||
| + | |- | ||
| + | | <center>onChange</center> | ||
| + | | '''Event: '''<javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | ||
| + | |||
| + | An input control notifies the application with the onChange event if its content is changed by the user. | ||
| + | |||
| + | |||
| + | |- | ||
| + | | <center>onChanging</center> | ||
| + | | '''Event: '''<javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | ||
| + | |||
| + | An input control also notifies the application with the onChanging event, when user is changing the content. | ||
| + | |||
| + | |- | ||
| + | | <center>onSelection</center> | ||
| + | | '''Event: '''<javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc> | ||
| + | |||
| + | Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selected text by use of the getStart and getEnd methods. | ||
| + | |||
| + | |- | ||
| + | | <center><tt>onFocus</tt></center> | ||
| + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc> | ||
| + | |||
| + | Denotes when a component gets the focus. | ||
| + | |||
| + | |- | ||
| + | | <center><tt>onBlur</tt></center> | ||
| + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc> | ||
| + | |||
| + | Denotes when a component loses the focus. | ||
| + | |||
| + | |} | ||
| + | |||
| + | |||
| + | =Supported Children= | ||
| + | |||
| + | {| border="1" | width="100%" | ||
| + | ! <center>Name</center> | ||
| + | ! <center>Event Type</center> | ||
| + | |- | ||
| + | | None | ||
| + | | None | ||
| + | |} | ||
| + | |||
| + | =Use cases= | ||
| + | |||
| + | {| border='1px' | width="100%" | ||
| + | ! Version !! Description !! Example Location | ||
| + | |- | ||
| + | | 5.0 | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| + | |||
| + | =Version History= | ||
| + | |||
| + | {| border='1px' | width="100%" | ||
| + | ! Version !! Date !! Content | ||
| + | |- | ||
| + | | 5.0.1 | ||
| + | | 4/27/2010 | ||
| + | | Initialization | ||
| + | |} | ||
| + | |||
| + | {{ZKComponentReferencePageFooter}} | ||
Revision as of 11:42, 27 April 2010
Datebox
- Demonstration: Date and Time
- Java API: Datebox
- JavaScript API: Datebox
Employment/Purpose
An edit box for holding a date. After click on the calender, a calender will pop-up for inputting date.
Mouseless Entry datebox
‧ Alt+DOWN to pop up the calendar.
‧ LEFT, RIGHT, UP and DOWN to change the selected day from the calendar.
‧ ENTER to activate the selection by copying the selected day to the datebox control.
‧ Alt+UP or ESC to give up the selection and close the calendar.
Example
<datebox lenient="true" buttonVisible="false" />
<datebox lenient="false" compact="false" buttonVisible="true" />
Supported events
| Event: MouseEvent
Denotes user has clicked the component. | |
| Event: InputEvent
An input control notifies the application with the onChange event if its content is changed by the user.
| |
| Event: InputEvent
An input control also notifies the application with the onChanging event, when user is changing the content. | |
| Event: SelectionEvent
Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selected text by use of the getStart and getEnd methods. | |
| Event: Event
Denotes when a component gets the focus. | |
| Event: Event
Denotes when a component loses the focus. |
Supported Children
| None | None |
Use cases
| Version | Description | Example Location |
|---|---|---|
| 5.0 |
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.1 | 4/27/2010 | Initialization |