I want to add clear button in Calender modal Popup.In my application lots of dateboxes are there.I restrict the user only to select the date not to enter. But in some cases I need to clear the date. Because of read only I am not able to clear it manually. I need to customize the calender which will reflect other places. And user can clear the datebox by clicking clear button in calender window.
Is there any way to add clear button in calender to fulfill my requirement?
Thanks in Advance!!
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.