表响应类中的引导 datetimepicker 问题

Question

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

请看这个 (https://jsfiddle.net/daza110/6abxn644/3/) 小提琴，它显示它正确打开，直到你缩小屏幕。

请看这个 (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

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

Answer 2

简单的方法是为日期选择器包装器设置position: static。比如

<td>
            <div class="col-sm-12">
              <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
            </div>
          </td>

你可以设置.col-sm-12 {position: static}

Answer 3

我还没有找到任何关于这个问题的真正令人满意的答案。

所以我在 .table-responsive 中为 bootstrap 下拉菜单修改了另一个代码

以下是我放在窗口上的主要代码：

window.setDatapickerEvents = ($parentElement) => {
    $($parentElement).on('dp.show', function (e) {
        const $e = $(e.target);
        const $input = $e.find('input').first();
        const $btn = $e.find('span.input-group-addon').first();
        const $dropdownMenu = $e.find('.dropdown-menu');

        const eOffset = $e.offset();
        const btnWidth = $btn.outerWidth();
        const inputWidth = $input.outerWidth();
        const dropdownWidth = $dropdownMenu.outerWidth();
        const dropdownHeight = $dropdownMenu.outerHeight();

        $('body').append($dropdownMenu.detach());

        $dropdownMenu.css({
            'top': eOffset.top - dropdownHeight,
            'left': eOffset.left + inputWidth + (btnWidth / 2) - dropdownWidth + 20,
            'width': dropdownWidth,
            'height': dropdownHeight,
        });
    });

    $($parentElement).on('dp.hide', function (e) {
        const $e = $(e.target);
        const $dropdownMenu = $e.find('.dropdown-menu');

        $e.append($dropdownMenu.detach());
        $dropdownMenu.hide();
    });
}

并在页面的脚本标签内启用它

setDatapickerEvents('.table-responsive');

Before - Problem After - Resolved

希望对大家有帮助