javascript - 尽管使用了 jQuery，datepicker 仍然无法工作

Question

虽然我使用了 jQuery，但我的 datepicker 表单字段无法正常工作。

在控制台中显示错误

Uncaught ReferenceError: jQuery is not defined

我已经在谷歌上搜索过它并将我的 jQuery 放在脚本的顶部。但还是不行

HTML 日期选择器字段

<div class="form-group col-md-6 col-sm-12">
      <label>{{ trans('misc.deadline') }}</label>
        {{-- <div class="input-group-addon addon-dollar"><i class="fa fa-calendar"></i></div> --}}
        <input type="text" value="{{ old('deadline') }}" id="datepicker" name="deadline" class="form-control" >
      <span class="help-block">{{ trans('misc.deadline_desc') }}</span>

    </div>

head 部分中的脚本

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

脚本

$('#datepicker').datepicker({
  autoclose: true,
  format: 'dd-mm-yyyy',
  startDate: '+7d',
  language: 'en'
});

有人帮忙吗？提前致谢

Answer 1

您需要在 Jquery UI 之前添加 Jquery，并为日期选择器添加 css，如下所示

$('#datepicker').datepicker({
  autoclose: true,
  format: 'dd-mm-yyyy',
  startDate: '+7d',
  language: 'en'
});

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group col-md-6 col-sm-12">
      <label>{{ trans('misc.deadline') }}</label>
        {{-- <div class="input-group-addon addon-dollar"><i class="fa fa-calendar"></i></div> --}}
        <input type="text" value="{{ old('deadline') }}" id="datepicker" name="deadline" class="form-control" >
      <span class="help-block">{{ trans('misc.deadline_desc') }}</span>

    </div>