Datebox"

From Documentation
Line 125: Line 125:
 
| July, 2010
 
| 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 [http://docs.zkoss.org/wiki/Internationalization#The_First_Day_of_the_Week The First Day of the Week] for details.
 
| An application can control the first day of the week by use of the session attribute and the library property. Please refer to [http://docs.zkoss.org/wiki/Internationalization#The_First_Day_of_the_Week The First Day of the Week] for details.
 +
|-
 +
| 5.0.4
 +
| August, 2010
 +
| Calendar supports moving to next/prev mon by mouse scrolling.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 21:56, 2 December 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" />


Properties

Displayed Time Zones

The image below shows the new Datebox functionality which allows the user to change the time zone to other predefined time zones. Viewing the zul markup provided below the image we can see that the displayedTimeZones is set to "GMT+12,GMT+8". These options are specified by the developer and restrict the user to the available time zones.

ZKComRef Datebox Timezone.png

<datebox id="datebox1" format="M/d/yy KK:mm:ss a" width="150px" displayedTimeZones="GMT+12,GMT+8" timeZone="GMT+8" timeZonesReadonly="false"/>

Format

You are able to format the field by providing specifying the attribute with a formatting string. The default value is null. When the formatting of the datebox is null, it means the date will be outputted using the format yyyy/MM/dd.

<datebox format="MM/dd/yyyy"/>

Like any other properties, you are able change the format dynamically, as depicted below.

<datebox id="db"/>
<button label="set MM-dd-yyyy" onClick='db.setFormat("MM-dd-yyyy")'/>

Inherited Functions

Please refer to FormatInputElement for inherited functions.

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
[Since 5.0.0]

Supported Children

Name
Event Type
None None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2010/12/02


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.
5.0.4 August, 2010 Calendar supports moving to next/prev mon by mouse scrolling.



Last Update : 2010/12/02

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