时间戳

首页 > 解决方案 > 为什么 jquery 日期选择器插件不起作用

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

问题描述

我正在制作待办事项网络应用程序。如果我只运行日期选择器代码，它将运行，但是当我与其他 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>

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

标签： javascriptjquerylaravel

解决方案

您错误地导入了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。我只是用它作为一个例子来证明你的问题在于你导入该脚本的方式。

推荐阅读