提问人:Philkav 提问时间:11/17/2023 最后编辑:Philkav 更新时间:11/18/2023 访问量:19
Firefox 无法在引导程序 offcanvas 中绘制日期选择器下拉选项
Firefox fails to draw date selector dropdown options inside a bootstrap offcanvas
问:
我的代码在这里: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>
答: 暂无答案
上一个:从 12 小时开始的日期模式
评论