Bootstrap datetimepicker不工作，控制台中的错误显示$ is not defined

Question

我正在使用bootstrap日期时间选择器，但它不工作，谁能告诉我，我做错了什么。

我给出的链接是

     <script  src="{{ asset ('css/sidebar/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript" ></script>
<script  src="{{ asset ('css/sidebar/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>
 <script src="{{asset('css/sidebar/bower_components/jquery/dist/jquery.min.js')}}"></script>

    <!-- Bootstrap 3.3.7 -->
    <script src="{{asset('css/sidebar/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
  <!-- daterangepicker -->
  <script src="{{asset('css/sidebar/bower_components/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
      <!-- datepicker -->
     <script src="{{asset('css/sidebar/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>

<script src="{{asset('css/sidebar/dist/js/demo.js')}}"></script>
<script src="{{asset('css/sidebar/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js')}}"></script>

 <link rel="stylesheet" href="{{asset('css/sidebar/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}">
   <!-- Daterange picker -->
    <link rel="stylesheet" href="
    {{asset('css/sidebar/bower_components/bootstrap-daterangepicker/daterangepicker.css')}}">
  <link href="{{asset('css/sidebar/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.css')}}" rel="stylesheet">

而我用于文本字段的代码是

      <div class="form-group">
                        <label class="col-md-4 control-label">Birthday</label>
                        <div class="col-md-6">
                            <div class="input-group date" id="DOB">
                                <input type="text" value="{{ old('birthdate') }}" name="dateOfBirth" class="form-control pull-right" id="dateOfBirth" required>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
                            </div>
                             @if ($errors->has('dateOfBirth'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('dateOfBirth') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

脚本是

 <script type="text/javascript">
$("#DOB").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>   

​

​

Answer 1

当您使用jquery代码而没有先加载它时，就会发生$ is not defined。

正如您在序列中所看到的：

<script  src="{{ asset ('css/sidebar/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript" ></script>
<script  src="{{ asset ('css/sidebar/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>
 <script src="{{asset('css/sidebar/bower_components/jquery/dist/jquery.min.js')}}"></script>

您最终加载的是jquery。在加载jquery之前，您正在加载jquery的两个依赖的javascripts。

您应该先加载jquery，然后再加载其他依赖项。

<script src="{{asset('css/sidebar/bower_components/jquery/dist/jquery.min.js')}}"></script>`
<script  src="{{ asset ('css/sidebar/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript" ></script>
<script  src="{{ asset ('css/sidebar/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>

还要确保您的脚本在末尾：(并确保在此之前加载了jquery和datetimepicker )

<script type="text/javascript">
$("#DOB").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>   

Answer 2

你做错了一些小事。您的JS的加载顺序

<script  src="{{ asset ('css/sidebar/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript" ></script>
<script  src="{{ asset ('css/sidebar/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>
<script src="{{asset('css/sidebar/bower_components/jquery/dist/jquery.min.js')}}"></script>

正确的是

<script src="{{asset('css/sidebar/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script  src="{{ asset ('css/sidebar/plugins/datatables/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>`
<script  src="{{ asset ('css/sidebar/plugins/datatables/jquery.dataTables.min.js') }}" type="text/javascript" ></script>

然后，您必须等待页面(DOM呈现)仍然准备就绪。这看起来像这样：

$(function() {
$("#DOB").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
});

Answer 3

您需要在顶部调用jquery引用文件，然后在此之后调用所有其他插件文件。

更改文件引用的顺序。