Question

我正在制作待办事项Web应用程序。如果我只运行日期选择器代码，它将运行，但是当我与其他html代码结合使用时，它将不起作用

仅显示

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--datepicker-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset("css/todolist/datepicker.css") }}">

                                <input type="text" class="form-control" data-toggle="datepicker">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script href=" {{ asset('/js/todolist/datepicker.js') }}"}}></script>
    <script>
        $(function() {
            $('[data-toggle="datepicker"]').datepicker({
                autoHide: true,
                zIndex: 2048,
            });
        });
    </script>

当我单击输入字段时，它应该显示日期。

Answer 1

您错误地导入了datepicker.js脚本。应该是src而不是href。模板语言的语法也可能会出现一些错误，但是我不确定您使用的是什么，因此我不能100％地对此表示怀疑。我认为必须是这样，

<script src="{{asset('/js/todolist/datepicker.js')}}"></script>

但绝对必须是src，而不是href。如果我重现您的代码并从该存储库中替换Github页面脚本，那么它将正常工作。

<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

虽然绝对不要使用Github页面URL，但不应将其用作CDN。我仅以它为例来证明您的问题在于导入脚本的方式。

Answer 2

您的代码包含语法错误-使用src导入datepicker插件。

<script src="{{ asset('/js/todolist/datepicker.js') }}"}}></script>

在这里您可以找到插件的可行示例（我使用CDN而不是GitHub），

$(function() {
  $('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    zIndex: 2048,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fengyuanchen/datepicker@0.6.5/dist/datepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fengyuanchen/datepicker@0.6.5/dist/datepicker.min.css" rel="stylesheet"> 

<div clas="container">
  <input type="text" class="form-control" data-toggle="datepicker">
</div>

为什么jQuery Date Picker插件不起作用

2 个答案: