Pickadate 时间选择器在单击 JQuery UI 对话框时消失答案

【问题标题】：Pickadate Time Selector Disappears on Click on JQuery UI DialogPickadate 时间选择器在单击 JQuery UI 对话框时消失
【发布时间】：2015-02-06 05:26:12
【问题描述】：

如果您使用经典主题在 jQuery 对话框中打开时间选择器并尝试使用时间选择器滚动条向下移动时间列表，则时间列表会消失。

您可以在此处查看问题：http://jsfiddle.net/7c2z840a/7/

jQuery("#tmStart").pickatime({
    editable: true,
    format: 'h:i A',
    formatSubmit: 'HH:i',
    //hiddenSuffix: '_FORMATTED',
    interval: 15,
    min: [7,0],
    max: [21,0]
});

问题出现在 Chrome 和 Firefox 中，但不在 IE 中。

任何人对为什么会发生这种情况以及如何解决它有任何想法？

【问题讨论】：

您将需要覆盖时间列表的高度，以便它是滚动的而不是滚动的容器。

标签： javascript jquery jquery-ui jquery-ui-dialog pickadate

【解决方案1】：

出现的滚动条属于对话框小部件而不是日期选择器。单击滚动条与单击其他地方的效果相同，这会导致关闭日期选择器

【讨论】：

【解决方案2】：

您可以添加以下行：

    jQuery("#tmStart_root").find(".picker__box").css({height: "100px", overflow: "auto"});

示例：http://jsfiddle.net/cu0y9hyn/1/

【讨论】：

效果很好。在我的情况下也比其他建议的解决方案更容易实现，即只在创建对话实例后创建时间选择器。

【解决方案3】：

确保在创建对话框实例后创建 pickatime 实例

【讨论】：

【解决方案4】：

datetimepicker 和 numberOfMonths 有类似的问题：12

我改了这个：<p>Date: <input type="text" id="datepicker"></p>

对此：<div id="datepicker"> </div>

将对话框更改为内联

现在滚动不会关闭 datetimepicker。

【讨论】：