[英]bootstrap datepicker does not show on small screens on firefox
由於某些奇怪的原因,日期選擇器不會顯示在 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>
我找不到解決方案,決定在 jquery ui 的 datepicker 中重寫它。
代碼如下:
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<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="text" id="startDate" 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="text" id="endDate" 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>
<!--datepicker-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 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 = [day, month, year].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());
//test Date
$('#startDate').val(formatDate(today)).datepicker({
dateFormat:'dd/mm/yy',
minDate: today,
});
$('#endDate').val(formatDate(tmr)).datepicker({
dateFormat:'dd/mm/yy',
minDate: tmr,
});
//change methods
$('#startDate').on('change',()=>{
var endDate = new Date($('#startDate').datepicker('getDate'));
$('#endDate').datepicker('option','minDate',endDate);
endDate.setDate(endDate.getDate()+1);
$('#endDate').datepicker('setDate',endDate);
})
$('#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) {
console.log("Invalid booking!");
} else {
console.log("Valid booking!");
}
//code below does get request or whatever
console.log($('#startDate').datepicker('getDate'));
console.log($('#endDate').datepicker('getDate'));
})
});
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.