Question

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

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

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

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

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

如何让日期选择器在幻灯片放在面板上工作？

Answer 1

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

如果更改为：var selectedDatePicker = $（＆＃39; .selectedDate＆＃39;）;它可以工作但不确定通过表单传递数据的可靠性。

<强>更新由于具有2个具有相同ID的输入，因此跳回到1899是一个问题。也许更改用于幻灯片的插件/查看他们的文档＆amp;支持可能有所帮助。

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

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

1 个答案: