jQuery 日期选择器在页面加载时隐藏时不会初始化答案

【问题标题】：jQuery date picker won't initialize when hidden on page loadjQuery 日期选择器在页面加载时隐藏时不会初始化
【发布时间】：2017-06-21 09:59:54
【问题描述】：

我正在使用这个 JavaScript 插件：jQuery Slide Over

它允许我在主要内容上显示一个滑动面板。我正在使用它进行过滤。

大多数情况下它都很好用，但我在让 jQuery Date Picker 配合时遇到了问题。似乎日期选择器不会应用于输入，因为它开始隐藏。所以我尝试使用“onOpen”事件来应用日期选择器..但这也不起作用。

我在这里创建了一个问题的 JS 小提琴：

JS Fiddle

因为 SO 不允许我在没有随附代码的情况下发布小提琴，所以这里是：

JavaScript

$('#TestDate').datepicker({ maxDate: 0, dateFormat: 'yy-mm-dd' });

$('*[data-slideover="open"]').slideOver({
  orientation: 'left',
  animationSpeed: 300,
  overlayColor: 'rgba(18,19,20,0.9)',
  onOpen: function () {
    var selectedDatePicker = $('#SelectedDate');
    if (!selectedDatePicker.hasClass('hasDatepicker')) {
      selectedDatePicker.datepicker({ maxDate: 0, dateFormat: 'yy-mm-dd' });
    }
  }
});

HTML

<div class="container-fluid">

        <a href="#slideover1" class="btn btn-primary" data-slideover="open">
            <i class="fa fa-filter"></i>
        </a>

        <div id="slideover1" class="slideover-content">
            FILTERS
            <input type="text" id="SelectedDate" name="SelectedDate" value="2017-01-01" class="form-control" />
        </div>

        <div class="row">
            <div id="main-container" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                BLAH BLAH BLAH
                <br />
                <input type="text" id="TestDate" name="TestDate" value="2017-01-01" class="form-control" />
            </div>
        </div>
    </div>

CSS

.slide-over{
  width:30%;
  min-width:300px;
}

您将看到 2 个日期选择器 - 其中 1 个位于主要内容区域并且工作正常（仅用于演示目的），而有问题的一个位于滑出面板内，可以通过按下顶部的按钮来触发离开了。

我可以做些什么来让日期选择器在滑动面板内工作？

【问题讨论】：

不确定是不是幻灯片插件搞砸了或者到底发生了什么，但在小提琴中，看起来按下按钮打开幻灯片会导致“slideover1”div的内容被复制并附在身体上。生成的 dom 有 2 个以 SelectedDate 作为 id 的元素，而显示的那个似乎没有添加 datePicker。
@Some_Guy，谢谢。你只是给了我一个想法，尝试将日期选择器应用于类而不是 ID，它工作正常。我不知道这是否是最好的解决方案，但现在可以了。如果有人有更好的解决方案，请告诉我。
虽然似乎有奇怪的行为..就像从 2017 年开始，但点击“上一个”到 1899 年...... 编辑：更糟糕的是，点击日期不会将更改为日期.. 所以肯定有些东西还是很不稳定.. 不过还是谢谢你看看
我同意 Darren Keen 的观点，这可能不是最好的侧边栏插件。最好的办法是尝试另一个
@Some_Guy，感谢您的帮助。我决定最简单的事情是 Bootstrap 模态。它运作良好。再次感谢。

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

插件正在复制内容，所以基本上你最终会得到 2 个 selectedText 输入。如果您打开过滤器，右键单击并检查输入，将 ID 更改为其他内容，然后运行您的 datepicker 代码，它就可以工作。

如果你改成这样： var selectedDatePicker = $('.selectedDate');它会起作用，但不确定通过表单传递数据的可靠性。

更新： 由于有 2 个具有相同 ID 的输入，跳回 1899 是一个问题。也许更改您用于幻灯片的插件/查看他们的文档和支持可能会有所帮助。

更新： 替代插件建议： https://simple-sidebar.github.io/simpler-sidebar/

【讨论】：

谢谢。我会多玩一点，试着弄清楚什么，如果有什么可以做的……这将是一个漫长的夜晚……sigh
所以我查看了您正在使用的插件的 JS，它有这一行： $(contentId).clone().appendTo('.slide-over');它克隆内容并确定将其添加。尝试另一个插件 - 肯定是其中的一个。更新类似simple-sidebar.github.io/simpler-sidebar
谢谢，我决定采用更简单的解决方案：Bootstrap Modal.. 寻找过滤器并不像滑出菜单那样酷，但它很有效，而且很简单。无论如何，您都会获得赞成票。再次感谢。
很高兴你整理了一些东西。很高兴为您提供帮助，谢谢。