ZK Customize Calender Popup

Question

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!!

Answer 1

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.