3

我正在为我的网站使用这个（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/）小提琴正确缩小表格，但不能正确显示日历。

<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>
    <?
}
4

3 回答 3

3

我不太了解您需要什么，但也许是这个？

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

在这个小提琴中看到

于 2016-01-15T12:51:44.093 回答
0

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

因此，我在 .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');

之前 - 问题 之后 - 解决

我希望它可以帮助任何人

于 2022-03-02T19:59:23.890 回答
0

简单的方法是设置position: staticdatepicker 包装器。例如

<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}

于 2019-07-04T11:39:38.560 回答