gpt4 book ai didi

javascript - bootstrap datepicker 日期范围未显示在日历上

转载 作者:数据小太阳 更新时间:2023-10-29 04:56:53 26 4
gpt4 key购买 nike

我在下面的代码片段中实现了 bootstrap datepicker date-range,但是在我为开始日期和结束日期选择了一个日期后,我没有看到日历上显示的范围。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
<div class="input-group input-daterange">
<input id="startDate1" name="startDate1" type="text"
class="form-control" readonly="readonly"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span> <span class="input-group-addon">to</span> <input id="endDate1"
name="endDate1" type="text" class="form-control" readonly="readonly">
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.input-daterange input').each(function() {
$(this).datepicker();
});
});
</script>
</body>
</html>

最佳答案

您还需要添加 bootstrap-datepicker css 资源。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />

并对日期范围使用以下语法。

 $('.input-daterange').datepicker({});

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
<div class="input-group input-daterange">
<input id="startDate1" name="startDate1" type="text"
class="form-control" readonly="readonly"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span> <span class="input-group-addon">to</span> <input id="endDate1"
name="endDate1" type="text" class="form-control" readonly="readonly">
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.input-daterange').datepicker({
});
});
</script>
</body>
</html>

关于javascript - bootstrap datepicker 日期范围未显示在日历上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41408156/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com