javascript - Bootstrap datetimepicker 无法工作，控制台中的错误显示 $ 未定义

Question

我正在使用 bootstrap datetimepicker，但它不起作用，任何人都可以告诉我我做错了什么。

我给出的链接是

     <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

$ is not Define 当您使用 jquery 代码而不先加载它时会发生。

正如您在序列中看到的:

<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 的两个依赖的 javascript。

您应该首先加载 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>