Question

我是jQuery的初学者，但我尽我所能，我可能做了一些愚蠢的错误，但我无法理解。

问题很简单，bootstrap-datepicker无法正常工作。我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你想到达什么？你的代码中没有包含＃sandbox-container ，如果你试图放置多个类/ Ids选择器你应该将它们分开像那样，：

$('#sandbox-container, .input-group, .date') .........

Answer 2

您可以使用解决方案

$('.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>

#sandbox-container

中缺少HTML

使用#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>

希望这会有所帮助。

Answer 3

将您的javascript包裹在$(document).ready()：

中

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

bootstrap-datepicker不起作用

3 个答案: