弹出窗口内的 WinJS 日期选择器未触发

【问题标题】：WinJS date picker inside flyout not being triggered弹出窗口内的 WinJS 日期选择器未触发
【发布时间】：2014-09-09 08:46:45
【问题描述】：

我有一个 WinJS 弹出对象，当用户单击文本框时会启动该对象。浮出控件用于显示日期时间选择器，用于选择用户的出生日期。

浮出控件正确启动，但我无法访问内部的日期选择器。例如，只要我想选择一个日期，浮出控件就会自动关闭。

没有任何代码可以连接到弹出窗口中，例如单击事件。我尝试在日期选择器上添加 z-index，但没有成功。

【问题讨论】：

我在一些客户的代码中也看到了这个问题......但不确定他们是如何解决的。我会试着问他们。
我有一个similar problem，但在翻转视图中有一个弹出窗口。也没有答案。我猜浮出控件是非常不稳定的对象。

标签： winjs

【解决方案1】：

这是一个在单击按钮时启动包含DatePicker 的Flyout 的示例。

HTML

<button class="button">Hello</button>
<div class="fly" data-win-control="WinJS.UI.Flyout">
    <div class="date" data-win-control="WinJS.UI.DatePicker"></div>
</div>

JavaScript

WinJS.Application.onready = function () {

    WinJS.UI.processAll().then(function () {

        // Add a click handler to the button
        var b = document.querySelector(".button");
        b.addEventListener("click", function (e) {

            // Find the Flyout and call show 
            var f = document.querySelector(".fly");
            f.winControl.show(b);
        });
    });
};

WinJS.Application.start();

【讨论】：