You can customize widget action with Client Side Programming (refer to Client Side Programming), for example:
<zk xmlns:w="client">
<!-- -->
<!-- Tested with ZK 6.5.3 -->
<!-- -->
<zscript><![CDATA[
// testing data
Date d = new Date();
]]></zscript>
<style>
/* invisible if not moved into datebox */
.invisible {
display: none !important;
}
</style>
put clear button under popup of datebox
<button label="show value" onClick="alert(((Datebox)self.getNextSibling()).getValue());" />
<datebox readonly="true" value="${d}">
<attribute w:name="doClick_"><![CDATA[
function (evt) {
// call original function
this.$doClick_(evt);
var pp = this.$n('pp'), // popup dom
$n = jq(this.$n()); // root dom
if (pp && !jq(pp).find('.datebox-inner-clear-button')[0]) {
// find button next to root dom
var btn = $n.next('.datebox-inner-clear-button')[0], // button dom element
btnWgt = zk.Widget.$('#' + btn.id), // button widget
popupWgt = this._pop;
// make button visible
jq(btn).removeClass('invisible');
// put button under popup dom
pp.appendChild(btn);
// store self at button widget
btnWgt.datebox = this;
var oldOnFloatUp = popupWgt.onFloatUp;
popupWgt.onFloatUp = function (ctl) {
if(ctl.origin == btnWgt) return; // do not close popup while mousedown on button
oldOnFloatUp.apply(this, arguments);
}
}
}
]]></attribute>
</datebox>
<button label="clear" sclass="datebox-inner-clear-button invisible">
<attribute w:name="doClick_"><![CDATA[
function (evt) {
// call original function
this.$doClick_(evt);
var dbx = this.datebox;
if (dbx) {
dbx.getInputNode().value = '';
dbx.updateChange_();
}
}
]]></attribute>
</button>
</zk>
You may also want to wrap the customized datebox and button by Macro Component or Composite Component as needed.