【发布时间】：2020-07-27 01:57:24
【问题描述】：
由于某些奇怪的原因，日期选择器不会显示在 Firefox 的小屏幕上。我目前使用的是 78.0.2 版（64 位）。在 Chrome 上进行测试时，它可以在移动设备大小的屏幕和常规屏幕上完美运行。
从小屏幕返回到常规屏幕后，日期选择器现在不显示了。它是 Firefox 特有的，有什么解决方案吗？
我的代码：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Availability</title>
</head>
<body>
<div class="container-fluid">
<!--Screens lg and above -->
<!--block on md screens because it looks ugly af-->
<!--
<div class="row">
<div class="col-md-12 p-0">
<img class="img-fluid" src="images/banner.png" style="width:100%;max-height:300px;" />
</div>
</div>
-->
<div class="row pb-3 pt-2" style="background-color:#042a3d">
<div class="col-md-10 offset-md-1 text-light">
<form class="form-inline row">
<div class="col-6 col-md-4">
<!--js version-->
<p class="mb-1">Check in</p>
<input type="date" id="startDate" min="" style="width:100%" class="form-control" required="required" />
</div>
<div class="col-6 col-md-4">
<!--js version-->
<p class="mb-1">Check out</p>
<input type="date" id="endDate" min="" style="width:100%" class="form-control" required="required" />
</div>
<div class="col-12 col-md-4 text-center" style="margin-top:25px">
<button style="width:100%" id="availSubmit" class="btn btn-primary">Check Availability</button>
</div>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
formatDate = (date) => {
var day = date.getDate().toString();
var month = (date.getMonth() + 1).toString();
var year = date.getFullYear();
if (day.length < 2) {
day = "0" + day;
}
if (month.length < 2) {
month = "0" + month;
}
var formattedDate = [year, month, day].join('-');
return formattedDate;
}
//onload initialization
$(document).ready(() => {
console.log("It's ready and loaded!");
var today = new Date();
var tmr = new Date();
tmr.setDate(tmr.getDate() + 1);
$('#startDate').val(formatDate(today));
$('#endDate').val(formatDate(tmr));
$('#startDate').attr('min', $('#startDate').val());
$('#endDate').attr('min', $('#endDate').val());
//for default screens
$("#availSubmit").on("click", (e) => {
e.preventDefault();
//initalizations
var one_day = 1000 * 60 * 60 * 24;
var string_startDate = $("#startDate").val();
var string_endDate = $("#endDate").val();
//check date difference
var date_startDate = new Date(string_startDate);
var date_endDate = new Date(string_endDate);
var diff = (date_endDate.getTime() - date_startDate.getTime()) / one_day;
//bookings cannot be -1 or 0 days. TESTING PURPOSES
if (diff < 1) {
alert("Invalid booking!");
} else {
alert("Valid booking!");
}
//code below does get request or whatever
});
//onchange for start and end date
$('#startDate').on('change', () => {
var newEndDate = new Date($('#startDate').val());
newEndDate.setDate(newEndDate.getDate() + 1);
$('#endDate').attr('min', formatDate(newEndDate));
$('#endDate').val(formatDate(newEndDate));
});
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript twitter-bootstrap firefox bootstrap-4 datepicker