logo标签列表

Bootstrap日期选择器的日期范围不在日历上显示

javascriptjquerytwitter-bootstrapdatepicker
8
我在下面的代码片段中实现了bootstrap datepicker日期范围，但是在我选择开始日期和结束日期后，我没有看到日历上显示范围。 

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

1个回答
26

你需要添加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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接