Laravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap答案

【问题标题】：Datepicker in Laravel 5.5 using Jquery-ui or BootstrapLaravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap
【发布时间】：2018-08-16 19:13:55
【问题描述】：

我正在尝试学习 Laravel 5.5，当我尝试在我的模式窗口（引导程序）中添加 jquery datepicker 时，我再次陷入困境。由于一些未知的原因，总是有一个错误说：-

$("#last_renewal").datepicker() 不是函数

我已按以下方式在标题部分正确添加了所有必需的文件：-

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

现在我真的很困惑我在做什么错误。除了 datepicker，jquery 中的一切都可以正常工作。

请推荐

【问题讨论】：

添加 js 代码以获取更多详细信息您是否在 $(document).ready() 中编写代码？
@Jigs1212 不工作。我得到的最多的是......我的区域链接中有一些问题。因为如果我删除这些链接，那么它就可以正常工作。但仍然无法得到导致错误的原因
哪些链接可以用当前头更新问题？
你也可以发布 HTML 吗？当您似乎正在使用 Bootstrap 3 时，为什么这会被标记为 [bootstrap-4]？
我创建了fiddle，你的代码仍然有效

标签： jquery laravel jquery-ui laravel-5.5

【解决方案1】：

您缺少指向 datepicker 插件的链接。把这个放在很棒的参考之后。对于 css 使用这个

<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css"/>

用于java脚本插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

【讨论】：

【解决方案2】：

您必须在 onReady 事件中使用 jQuery 初始化元素

<!doctype html>

<html lang="en">
<head>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script>
$(function(){
    $("#last_renewal").datepicker()
});
</script>
</head>
<body>

<p>Date: <input type="text" id="last_renewal"></p>



</body>
</html>

【讨论】：

【解决方案3】：

我认为您不需要像@BugFixer 建议的那样更改代码，但我认为您只需要更改脚本标签的顺序即可。当我将 $("#last_renewal").datepicker() 放在 jQuery ui 之前时，我看到了您所看到的错误。然后，当我在 jquery ui 脚本标记和 div 之后移动它时，它可以工作。请看下面我的回答。

顺便说一句，我会创建一个小提琴，但我很难按照我想要的方式获得订单。：

<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
  <body>
    <div id="last_renewal">
    </div>
<script>
$("#last_renewal").datepicker()  
</script>
  </body>
</html>

【讨论】：

【解决方案4】：

大家，

我找到了解决办法。似乎在 HTML 中有一个选项，<input type="date" > 提供与 jquery 或任何其他日期选择器相同的输出。我仍然保持赏金开放，并希望这种方法对其他人有用。在这里可能需要提到它可能不适用于旧浏览器。

【讨论】：

您尝试使用哪些浏览器和版本？

【解决方案5】：

使用这个：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script> 
    $('body').on('focus',"#last_renewal", function(){        
        $(this).datepicker();
    });

</script>

【讨论】：

如果使用此设置，菜单上的默认下拉菜单不起作用
您需要在页脚添加<script> 部分。
你在哪里写了这个$("#last_renewal").datepicker()？你的日期选择器初始化部分在哪里
我在页脚中使用了它。但似乎问题仍然存在
你在浏览器的隐身模式下检查了吗