在您的情况下,清除按钮是 datebox 的子 dom,但不是子小部件, this.parent.$n() 仅当按钮是 datebox 的子小部件时才有效。
您可以修改它以使其工作如下:
- 从弹出日历中获取日期框的 id(该 id 为日期框 id + '-pp')。
- 获取带有 id 的日期框小部件。
- 清除datebox的input节点的值,然后调用datebox的updateChange_方法。
我稍微修改了你的示例:
<zk>
<script><![CDATA[
zk.afterLoad('zul.db', function () {
var _xRenderer = {};
zk.override(zul.db.Renderer, _xRenderer, {
titleHTML: function (wgt, out, localizedSymbols) {
_xRenderer.titleHTML.apply(this, arguments); //call the original method
var uuid = wgt.uuid,
view = wgt._view,
text = wgt.getZclass() + '-ctrler';
if(view == 'day') {
out.push('<button id="', uuid, '-today" class="', text, '"',
' onClick="var cal = zk.Widget.$(\'$', wgt.parent.id, '\')._pop; cal._value = null; cal._setTime();"',
' >', ' today', '</button>');
}
out.push('<button id="', uuid, '-clear" class="', text, '"',
' onClick="clearDatebox(this)"',
' >', ' clear', '</button>');
}
});
});
function clearDatebox (btn) {
var id = jq('.z-datebox-pp')[0].id.replace('-pp', ''),
dbx = zk.Widget.$('#' + id);
dbx.getInputNode().value = '';
dbx.updateChange_();
}
]]></script>
<datebox id="db" ></datebox>
</zk>