javascript - ZK 自定义日历弹出窗口

Question

我想在日历模式弹出窗口中添加清除按钮。在我的应用程序中，有很多日期框。我限制用户只能选择不输入的日期。但在某些情况下我需要清除日期。由于只读，我无法手动清除它。我需要定制能够反射(reflect)其他地方的日历。用户可以通过单击日历窗口中的清除按钮来清除日期框。

有没有办法在日历中添加清除按钮来满足我的要求？

提前致谢!!

Answer 1

您可以通过客户端编程自定义小部件操作(请参阅Client Side Programming)，例如:

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

您可能还想通过 Macro Component 包装自定义的日期框和按钮或Composite Component根据需要。