Datum im Datebox über jQuery löschen

Question

Der folgende Code zeigt eine Schaltfläche im Datebox-Modalpopup an, aber ich möchte das Datum löschen, wenn ich auf die Schaltfläche klicke. Ich habe viele Dinge versucht, aber es klappt nicht mit der jQuery-Methode.

    zk.afterLoad('zul.db', function () {
    var _xRenderer = {};
    zk.override(zul.db.Renderer, _xRenderer, {
    titleHTML: function (wgt, out, localizedSymbols) {
    _xRenderer.titleHTML.apply(this, arguments); //rufen Sie die Originalmethode auf
    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();"',
    ' >', ' heute', '</button>');
    }
              out.push('<button id="', uuid, '-clear" class="', text, '"', 
    ' onClick="alert(jq(this.parent.$n()))"',
    ' >', ' löschen', '</button>');
    }
    });
    });

Answer 1

In Ihrem Fall ist die Schaltfläche "Löschen" ein untergeordnetes Element des Datebox-DOM, aber kein untergeordnetes Widget. `this.parent.$n()` funktioniert nur, wenn die Schaltfläche ein untergeordnetes Widget der Datebox ist.

Sie können es ändern, um es wie folgt zu verwenden:

1. Holen Sie die ID der Datebox aus dem Popup-Kalender (dessen ID Datebox-ID + '-pp' ist).
2. Holen Sie das Datebox Widget mit der ID.
3. Löschen Sie den Wert des Eingabeknotens der Datebox und rufen Sie dann die Methode `updateChange_` der Datebox auf.

Ich habe Ihr Beispiel leicht modifiziert:

        <![CDATA[
            zk.afterLoad('zul.db', function () {
                var _xRenderer = {};
                zk.override(zul.db.Renderer, _xRenderer, {
                    titleHTML: function (wgt, out, localizedSymbols) {
                        _xRenderer.titleHTML.apply(this, arguments); //rufen Sie die originale Methode auf
                        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();"',
                                ' >', ' heute', '</button>');
                        }
                        out.push('<button id="', uuid, '-clear" class="', text, '"', 
                            ' onClick="clearDatebox(this)"',
                            ' >', ' löschen', '</button>');
                    }
                });
            });
            function clearDatebox (btn) {
                var id = jq('.z-datebox-pp')[0].id.replace('-pp', ''),
                    dbx = zk.Widget.$('#' + id);
                dbx.getInputNode().value = '';
                dbx.updateChange_();
            }
        ]]>

Answer 2

Ich habe den obigen Link-Code geändert, dann funktioniert er.

Version - zk 6.5.3

    <![CDATA[
    zk.afterLoad('zul.db', function () {
    var _xRenderer = {};
    zk.override(zul.db.Renderer, _xRenderer, {
    titleHTML: function (wgt, out, localizedSymbols) {
    _xRenderer.titleHTML.apply(this, arguments); //rufe die originale Methode auf
    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();"',
    ' >', 'heute', '</button>');
    }
              out.push('<button id="', uuid, '-clear" class="', text, '"', 
    ' onClick="clearDatebox(this)"',
    ' >', 'löschen', '</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_();
      }
    }
    ]]>

oder

Ändere diese Methode.

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_();
    }

für zk Version 7.0 Code hier

        <![CDATA[
        zk.afterLoad('zul.db', function () {
        var _xRenderer = {};
        zk.override(zul.db.Renderer, _xRenderer, {
        titleHTML: function (wgt, out, localizedSymbols) {
        _xRenderer.titleHTML.apply(this, arguments); //rufe die originale Methode auf
        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)"',
        ' >', 'heute', '</button>');
        }
                  out.push('<button id="', uuid, '-clear" class="', text, '"', 
        ' onClick="clearDatebox(this)"',
        ' >', 'löschen', '</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; //Januar ist 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;
            }
        }

        ]]>