Datebox"

From Documentation
Line 3: Line 3:
 
= Datebox =
 
= Datebox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f9 Date and Time]
+
*Demonstration: [http://www.zkoss.org/zkdemo/input/date_and_time_picker Date and Time]
 
*Java API: <javadoc>org.zkoss.zul.Datebox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Datebox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.db.Datebox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.db.Datebox</javadoc>
 +
*Style Guide: [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Datebox Datebox]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 42: Line 43:
  
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</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>
+
| <center><tt>onTimeZoneChange</tt></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>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
+
Denotes the time zone of the component is changed by user.
Denotes when a component loses the focus.
 
 
 
 
|}
 
|}
 
+
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/FormatInputElement#Supported_Events | FormatInputElement]]
=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%"
 
{| border="1" | width="100%"
Line 110: Line 78:
 
|}
 
|}
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"

Revision as of 11:06, 16 November 2010

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.

The First Day of the Week

The first day of the week is decided by the locale (actually the return value of the getFirstDayOfWeek method in the java.util.Calendar).

Since 5.0.3, you can control the first day of the week by use of the session attribute and the library property. Please refer to The First Day of the Week for details.

Customization

Since 5.0.3, the rendering of the calendar can be customized at the client by providing JavaScript code that overrides Renderer.

Example

ZKComRef Datebox Example.PNG

 <datebox lenient="true" buttonVisible="false" />
 <datebox lenient="false" compact="false" buttonVisible="true" />


Supported Events

Name
Event Type
onTimeZoneChange
Event: Event

Denotes the time zone of the component is changed by user.

Supported Molds

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

Name
Snapshot
default
Datebox mold default.png
rounded
Datebox mold rounded.png

Supported Children

Name
Event Type
None None

Use Cases

Version Description Example Location
     

Version History

Version Date Content
5.0.3 July, 2010 An application can control the first day of the week by use of the session attribute and the library property. Please refer to The First Day of the Week for details.



Last Update : 2010/11/16

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