html - 表响应类中的 Bootstrap datetimepicker 问题

Question

我正在为我的网站使用这个 ( https://github.com/Eonasdan/bootstrap-datetimepicker ) 日期和时间选择器，当您在表格响应类中打开日期时间选择器时，除非在您添加的 css 中，否则它不会在表格顶部显示日期选择器.table-responsive { overflow:visible !important } 在 css 中。这样做一切都很好，但是当您缩小屏幕或在手机/平板电脑上使用它时，表格不再响应并悬在屏幕的一侧。

请查看此 ( https://jsfiddle.net/daza110/6abxn644/3/) fiddle ，它显示它正确打开，直到您缩小屏幕。

请看这个 ( https://jsfiddle.net/daza110/6abxn644/4/ ) fiddle ，它正确地缩小了表格，但没有正确显示日历。

<div class="panel-body">
  <div class="table-responsive">
    <table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">
      <thead>
        <tr>
          <th class="col-sm-2">Debt Ref</th>
          <th class="col-sm-2">Due Date</th>
          <th class="col-sm-2">Amount Paid</th>
          <th class="col-sm-2">Account</th>
          <th class="col-sm-2">Reconcile Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="armitage">
          <td>
            <div>NOR087-DAN052</div>
          </td>
          <td>
            <div>05/01/2016</div>
          </td>
          <td>
            <div>180.00</div>
          </td>
          <td>
            <div class="col-sm-12">Paralegal (951)</div>
          </td>
          <td>
            <div class="col-sm-12">
              <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

查询

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
  format: "DD/MM/YYYY"
});

更新

我破解了这个但它不是很好，我添加了一个附加 DatePicker 的 PHP 函数，然后执行了以下 jquery 代码，这删除了表响应并在显示上添加了一个临时类，然后在隐藏时删除了临时类并添加了再次响应表格:

function attachDatePick($fieldId)
{
    ?>
    <script type="text/javascript">
        jQuery(function()
        {
            jQuery('#<?echo $fieldId;?>').datetimepicker().on('dp.show',function()
            {
                jQuery(this).closest('.table-responsive').removeClass('table-responsive').addClass('temp');
            }).on('dp.hide',function()
            {
                jQuery(this).closest('.temp').addClass('table-responsive').removeClass('temp')
            });
        });
    </script>
    <?
}

Answer 1

我不太明白你需要什么，但也许是这个？

.table-responsive {
 overflow-x: inherit;
}

见此fiddle