ZK自定义日历弹出窗口 [英] ZK Customize Calender Popup

问题描述

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

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?

先谢谢!!

推荐答案

您可以使用客户端编程自定义小部件操作（参考客户端编程），例如：

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>

您可能还希望通过宏组件或复合组件。

这篇关于ZK自定义日历弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！