在 Laravel 应用程序中使用 JQuery UI 日期选择器答案

【问题标题】：Using JQuery UI Datepicker in Laravel App在 Laravel 应用程序中使用 JQuery UI 日期选择器
【发布时间】：2019-11-30 07:53:50
【问题描述】：

我正在使用 Laravel 构建一个应用来管理营销活动预订。

我想使用 JQuery Datepicker UI，以便 tghe datepicker 可以正确显示在 Internet Explorer 和 chrome 中。我正在按照官方 jquery 教程中的描述正确地对日期选择器进行排队：

         <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">    

    <!-- FOR DATEPICKER -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link href="{{ asset('css/flow_live.css') }}" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      $( function() {
        $( ".datepicker" ).datepicker({dateFormat: 'dd/mm/yyyy'});
      } );
    </script>

</head>

但是，我不断在控制台中收到错误消息“datepicker() 不是函数”，并且 datepicker 不起作用，除非我注释掉该行 <script src="{{ asset('js/app.js') }}" defer></script>.

当我删除这条线时，日期选择器可以工作，但我失去了许多归因于该应用程序的其他功能，例如标题栏中的向下滑动菜单。

谁能提出一个方便的方法来解决这个问题？

也许以不同的时间间隔加载两个不同的脚本？

谢谢，

罗伯

【问题讨论】：

您是否尝试在datepicker 样式表之后添加app.css 样式表？

标签： jquery laravel datepicker

【解决方案1】：

由于你使用的是 laravel 的 app.js，你不需要再次调用 JQuery。 app.js 包括 JQuery。删除

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

日期选择器现在应该可以工作了。

【讨论】：

嗨，Zahid，这并没有什么不同——即使我删除了 jquery.min.js 并将 app.js 行保留在我的文件中，它仍然显示“datepicker 不是函数”。

【解决方案2】：

为什么你把这些放在head

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $( function() {
    $( ".datepicker" ).datepicker({dateFormat: 'dd/mm/yyyy'});
  } );
</script>

请将它们放在body 标签中在你为app.js实施之后

【讨论】：

您好，我试过了，但似乎没有什么不同。