This documentation is for an older version of ZK. For the latest documentation please
click here.
This documentation is for an older version of ZK. For the latest documentation please
click here.
Datebox is composed of two parts, an input box and a button.
Source:
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
|
-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 |
|
|
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; |
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
|
-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 |
|
|
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; |
