Firefox 无法在引导程序 offcanvas 中绘制日期选择器下拉选项

Firefox fails to draw date selector dropdown options inside a bootstrap offcanvas

提问人:Philkav 提问时间:11/17/2023 最后编辑:Philkav 更新时间:11/18/2023 访问量:19

问:

我的代码在这里:https://jsfiddle.net/epg8rn65/

问题摘要:单击日期选择器中的“月/年”,应打开样式选项菜单以选择新的月/年。这适用于 Chrome/Safari,但不适用于 Firefox。<select>

问题描述:Firefox 上存在以下问题,但在 Chrome 或 Safari 上不存在: 如果你运行我在上面发布到 jsfiddle 的代码片段,然后单击标有“打开 OffCanvas”的按钮,则左侧将出现一个引导 offcanvas 窗格。

其中有两个日期选择器工具。 第一个是数据表DateTime扩展 第二个是JQueryUI Datepicker

对于这些工具中的每一个;如果单击输入框,将出现这些日期选择器。但是,如果您尝试单击这些日期选择器顶部的“月份”或“年份”,它们将不会在 Firefox 中显示选择选项。它们在 Chrome/Safari 中显示得很好。

我有点迷茫问题出在哪里。

我尝试修改我的选项和选择类的 z-index,但到目前为止,这已经失败了。 我还尝试添加一个 javascript 函数,该函数将在切换 offcanvas 时重新初始化日期选择器,但同样 - 这让我无处可去。

也许我看错了。

   
    
    // Bootstrap DateTime
    var minDate;
    $(document).ready( function () {
        minDate = new DateTime($('#start_date'), {
            format: 'YYYY-MM-DD',
            firstDay: 0,
            buttons: {
                today: true,
            },
        });
    });

   
    // JQuery Datepicker
    $( function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Datepicker Fails</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">

  </head>
  <body>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Open OffCanvas
    </button>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
              <div class="card-body">
                    <!-- Date Selectors -->
                    <br/>
                    <b>* Bootstrap DateTime:</b>
                    <div class="filterbox">
                        <input type="text" id="start_date" name="start" class="form-control input-sm" placeholder="" aria-label="start-search" value="">
                    </div>
                    <br/>
                    <b>* JQuery Datepicker</b>
                    <p>Date: <input type="text" id="datepicker"></p>

                    <br/>
                    <b>* Regular Select</b><br/>
                    <select>
                      <option value="abc">abc</option>
                      <option value="def">def</option>
                      <option value="ghi">ghi</option>
                    </select>
              </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  </body>
</html>

twitter-bootstrap datetime datepicker html-rendering

评论


答: 暂无答案