Image:stop.png This documentation is for an older version of ZK. For the latest documentation please click here.
Datebox
Single Page

Datebox

Datebox is composed of two parts, an input box and a button.

Source:

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-datebox

-over

-btn-clk

-focus

-btn-over

-disd

Supported

V

V

V

V

V

!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name

Description

Default Values

.z-datebox

Font size

border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;

.z-datebox-inp

Background of input element

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9;

.z-datebox-text-invalid

Background of invalidated

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;

.z-datebox-readonly, .z-datebox-text-disd

Background of disabled and read only

background: #ECEAE4;

.z-datebox .z-datebox-img

Background of the button image

background: transparent url(${c:encodeURL('~./zul/img/button/datebtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #86A4BE;

.z-datebox-pp

Font size and background of datebox's popup

display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #888888; padding: 2px; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;

Mold: Default - Calendar

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-datebox

-over

-seld

-over-seld

-disd

Supported

V

!

!

!

!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name

Description

Default Values

.z-datebox-calyear

Background of year

background: #e9f1f3; border: 1px solid; border-color: #f8fbff #aca899 #aca899 #f8fbff;

.z-datebox-calyear td

Font size of year

font-size: ${fontSizeM}; font-weight: bold; text-align: center; white-space: nowrap;

.z-datebox-calmon td

Font size of month

font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;

.z-datebox-calday

Border of day

border: 1px solid #ddd;

.z-datebox-calday td, .z-datebox-calday td a, .z-datebox-calday td a:visited

Font size of day

font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;

.z-datebox-calday td

Padding size of day

padding: 1px 3px;

z-datebox-caldow

Font size of DOW (Day Of Week)

font-size: ${fontSizeS}; color: #333; font-weight: bold; padding: 1px 2px; background: #e8e8f0; text-align: center;