文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么jquery日期选择器插件不起作用

问为什么jquery日期选择器插件不起作用
EN

Stack Overflow用户

提问于 2019-09-10 10:09:06

回答 2查看 1.1K关注 0票数 0

我正在制作todo 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>

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

javascript

jquery

laravel

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-10 10:55:04

您的代码包含语法错误-请使用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>

票数 1

Stack Overflow用户

发布于 2019-09-10 10:44:40

您错误地导入了datepicker.js脚本。它应该是src而不是href。您也可能在模板语言的语法中有一些错误，但我不确定您使用的是什么，所以我不能百分之百地确定这一点。我觉得应该是这样，

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

但它肯定需要是src而不是href。如果我重现您的代码并替换该存储库中的Github pages脚本，它将工作得很好。

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

但绝对不要使用Github pages URL --它不应该用作CDN。我只是用它作为一个例子，证明你的问题出在你导入脚本的方式上。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57863156

复制

相似问题

问为什么jquery日期选择器插件不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么jquery日期选择器插件不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么jquery日期选择器插件不起作用
EN