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

我的问题是如何访问分配了datepicker的元素，i。即按钮，在回调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>

Answer 2

在你的链接示例中，没有＆＃34;目的地＆＃34;所选日期存储到。您需要一个输入字段，并在日期选择器的selectionChange函数中更改其值。

<强> HTML

<input id="selected_date" class="field-input field-input-text" type="text">
<button class="btn btn-primary"><i class="icon-calendar icon-white"></i> Select the date</button>

<强> JS

[...]
  on: {
    selectionChange: function(event) {
      document.getElementById("selected_date").value = event.newSelection;
    }
  }
[...]

顺便说一句：如果您为新浏览器开发，可以使用type="date"作为输入字段，因此您不需要外部日期选择器库。

AUI datepicker：如何访问当前元素

2 个答案: