jquery - bootstrap-datepicker 不起作用

Question

我是 jQuery 的初学者，但我尽力了，我可能犯了一些愚蠢的错误，但我无法弄清楚。

问题很简单，bootstrap-datepicker不起作用。我的代码:

$('#sandbox-container .input-group.date').datepicker({
  todayBtn: "linked",
  //language: "pl",
  orientation: "top auto",
  autoclose: true,
  todayHighlight: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="<?php echo BASE_URI;?>/templates/cms/js/bootstrap.min.js"></script>  
<script src="<?php echo BASE_URI;?>/templates/cms/js/bootstrap-datepicker.min.js"></script>  
<link href="<?php echo BASE_URI;?>/templates/cms/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo BASE_URI;?>/templates/cms/css/style.css" rel="stylesheet">
<script src="http://cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>
 
<div class="input-group date">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-th"></i>
  </span>
</div>

Answer 1

给你一个解决方案

$('.input-group.date').datepicker({
  todayBtn: "linked",
  //language: "pl",
  orientation: "auto",
  autoclose: true,
  todayHighlight: true
});

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>  
 <script src="http://cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>

 <div class="input-group date">
   <input type="text" class="form-control">
   <span class="input-group-addon">
     <i class="glyphicon glyphicon-th"></i>
   </span>
</div>

您在 HTML 中缺少 #sandbox-container

使用#sandbox-container的解决方案

$('#sandbox-container .input-group.date').datepicker({
  todayBtn: "linked",
  //language: "pl",
  orientation: "auto",
  autoclose: true,
  todayHighlight: true
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>  
<script src="http://cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>

<div id="sandbox-container">
  <div class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-th"></i>
    </span>
  </div>
</div>

希望这会有所帮助。