通过Jquery从Datebox中清除日期

Question

以下代码显示的是datebox模式弹出式窗口中的按钮，但我希​​望在点击按钮时清除日期。我尝试了很多东西，但无法通过jQuery方法来完成。

<zk> 
    <script> 
    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('&lt;button id="', uuid, '-today" class="', text, '"', 
    ' onClick="var cal = zk.Widget.$(\'$', wgt.parent.id, '\')._pop; cal._value = null; cal._setTime();"', 
    ' &gt;', ' today', '&lt;/button&gt;'); 
    } 
       out.push('&lt;button id="', uuid, '-clear" class="', text, '"', 
    ' onClick="alert(jq(this.parent.$n()))"', 
    ' &gt;', ' clear', '&lt;/button&gt;'); 
    } 
    }); 
    }); 
    </script> 
    <datebox id="db" ></datebox> 
    </zk> 

Answer 1

在你的情况下，清除按钮是datebox的孩子DOM而不是一个子物件，this.parent。$ N（）如果按钮datebox的子部件只适用。

您可以修改它，使其如下工作：

1. 获取datebox的ID从弹出日历（其中id为datebox ID + '-pp'）。
2. 获取带ID的日期窗口小部件。
3. 清除datebox的输入节点的值，然后调用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> 

Answer 2

我上面的链接代码已经修改，然后它的工作。

版本 - ZK 6.5.3

<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 str = btn.id; 
    var res = str.substring(3,4); 

     if(res==0){ 
     var id = jq('.z-datebox-inp')[res].id, 
      dbx = zk.Widget.$('#' + id); 
     dbx.getInputNode().value = ''; 
     dbx.updateChange_(); 
     }else{ 
     var id = jq('.z-datebox-inp')[res/2].id, 
      dbx = zk.Widget.$('#' + id); 
     dbx.getInputNode().value = ''; 
     dbx.updateChange_(); 
     } 
    } 
    ]]></script> 
    <datebox id="db" ></datebox> 
    <datebox id="db1" ></datebox> 
    <datebox id="db2" ></datebox> 
    <datebox id="db3" ></datebox> 
</zk> 

或

改变这种方法。

function clearDatebox (btn) { 

     var d=jq('.z-datebox-pp').length-1; 
     var id = jq('.z-datebox-pp')[d].id.replace('-pp', ''), 
      dbx = zk.Widget.$('#' + id); 
     dbx.getInputNode().value = ''; 
     dbx.updateChange_(); 
    } 

为ZK 7.0版代码在这里

 <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="setDatebox(this)"', 
     ' >', ' today', '</button>'); 
     } 
        out.push('<button id="', uuid, '-clear" class="', text, '"', 
     ' onClick="clearDatebox(this)"', 
     ' >', ' clear', '</button>'); 
     } 
     }); 
     }); 
     function clearDatebox (btn) { 

     var str = btn.id; 
     var res = str.substring(3,4); 

      if(res==0){ 
      document.getElementById(jq('.z-datebox-input')[res].id).value=''; 
      }else{ 
      document.getElementById(jq('.z-datebox-input')[res/2].id).value=''; 
      } 
     } 
      function setDatebox (btn) { 
     var today = new Date(); 
     var dd = today.getDate(); 
     var mm = today.getMonth()+1; //January is 0! 

     var yyyy = today.getFullYear(); 
     if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} 
today = mm+'/'+dd+'/'+yyyy; 

      var str = btn.id; 
      var res = str.substring(3,4); 

      if(res==0){ 
      document.getElementById(jq('.z-datebox-input')[res].id).value=today; 
      }else{ 
       document.getElementById(jq('.z-datebox-input')[res/2].id).value=today; 
      } 
     } 

     ]]></script> 
     <datebox id="db" ></datebox> 
     <datebox id="db1" ></datebox> 
     <datebox id="db2" ></datebox> 
     <datebox id="db3" ></datebox> 
    </zk>