Java 通过Jquery清除日期框中的日期

下面的代码显示了日期框模式弹出窗口中的一个按钮，但我想清除我点击按钮的日期。我尝试了很多事情，但是用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>

zk.afterLoad（'zul.db'，函数（）{
var_xRenderer={}；
重写（zul.db.Renderer，xRenderer{
titleHTML:函数（wgt、out、本地化符号）{
_xRenderer.titleHTML.apply（this，arguments）；//调用原始方法
var uuid=wgt.uuid，
视图=wgt.\u视图，
text=wgt.getZclass（）+'-ctrler'；
如果（视图=‘天’）{
out.push（'button id=“”，uuid，'-today“class=“”，text，”，
'onClick=“var cal=zk.Widget.$（\'$，wgt.parent.id，'\'）。\u pop；cal.\u value=null；cal.\u setTime（）；”，
“今天”，“按钮”）；
}
out.push（'button id=“”，uuid，'-clear“class=“”，text，”，
'onClick=“alert（jq（this.parent.$n（））”，
“‘清除’，”/按钮”）；
}
});
}); 

在您的例子中，清除按钮是datebox的子dom，但不是子小部件，只有当按钮是datebox的子小部件时，此.parent.$n（）才起作用

您可以对其进行修改，使其工作如下：

从弹出日历中获取日期框id（id为日期框id+'-pp'）

获取id为的日期框小部件

清除datebox的输入节点的值，然后调用datebox的updateChange_uu方法

我对您的样品进行了轻微修改：

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

---

我已经修改了上面的链接代码，然后它就开始工作了

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

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

刚刚在下面的链接中做了一个类似的示例[[1]：该日期框没有此内置功能超出了甲烷储存的范围，但当我按下“清除”按钮时，该功能已清除但不起作用…文本框值不清除它在chrome上的ZK 6.5.3中运行良好，请参阅@Benbai:如果一个页面中只有一个日期框，则该功能正常。如果一个页面中有多个日期框，则该功能不起作用很好。就像我从第一个日期框中选择了日期，然后选择了第二个日期框。当我单击第二个日期框的“清除”按钮时，它会清除第一个日期框的值。只需将索引值0更改为1 var id=jq（'.z-datebox-pp'）[1].id.replace（'-pp'，''），正如Himanshu所说，只需要一个多个日期框的映射机制

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