Question

我在下面的代码段中实现了bootstrap datepicker日期范围，但在选择了开始日期和结束日期的日期之后，我看不到日历上显示的范围。

＆＃13;

<!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>

＆＃13;

Answer 1

您还需要添加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({});

＆＃13;

<!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>

＆＃13;

bootstrap datepicker日期范围没有在calander上显示

1 个答案: