javascript - 为什么 jquery 日期选择器插件不起作用

Question

我正在制作待办事项网络应用程序。如果我只运行日期选择器代码，它将运行，但是当我与其他 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。我只是用它作为一个例子来证明您的问题在于导入该脚本的方式。