javascript - 隐藏在页面加载时，jQuery日期选择器不会初始化

我正在使用以下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个位于主要内容区域中，并且可以正常工作（仅用于演示目的），而有问题的一个则位于滑出面板内部，可以通过按左上方的按钮来触发。

如何使日期选择器在面板上方的幻灯片中工作？

最佳答案

该插件正在复制内容，因此本质上您将获得2个selectedText输入。如果打开过滤器，请右键单击并检查输入，将ID更改为其他名称，然后运行日期选择器代码，它将起作用。

如果更改为：var selectedDatePicker = $（'。selectedDate'）;它会起作用，但不确定通过表单传递数据的可靠性。

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

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

关于javascript - 隐藏在页面加载时，jQuery日期选择器不会初始化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44672905/