javascript - AUI日期选择器: How to access current element

Question

有人知道 AUI 日期选择器吗？ 有一个教程 http://alloyui.com/versions/2.0.x/examples/datepicker/ 给出此代码的位置:

YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button',
        popover: {
          zIndex: 1
        },
        on: {
          selectionChange: function(event) {
            console.log(event.newSelection)
          }
        }
      }
    );
  }
);

我的问题是如何访问日期选择器分配给的元素，即。 e.按钮，在回调中的selectionChange？ 我尝试阅读完整的文档，但我不明白。

Answer 1

要在selectionChange事件期间获取触发元素，您可以执行以下操作:

selectionChange: function(event) {
    var triggerNode = Y.one(event.target.get('trigger'));
    // Your code here ...
}

这是一个使用您的代码的可运行示例，该代码在 selectionChange 上显示按钮的 html:

YUI().use('aui-datepicker', function(Y) {
  new Y.DatePicker({
    trigger: 'button',
    popover: {
      zIndex: 1
    },
    on: {
      selectionChange: function(event) {
        var triggerNode = Y.one(event.target.get('trigger'));
        alert(triggerNode.get('outerHTML'));
      }
    }
  });
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<button class="btn btn-primary"><i class="icon-calendar icon-white"></i> Select the date</button>