Laravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap
Posted
技术标签:
【中文标题】Laravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap【英文标题】：Datepicker in Laravel 5.5 using Jquery-ui or 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，你的代码仍然有效 【参考方案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()？你的日期选择器初始化部分在哪里
我在页脚中使用了它。但似乎问题仍然存在
你在浏览器的隐身模式下检查了吗以上是关于Laravel 5.5 中的 Datepicker 使用 Jquery-ui 或 Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
laravel 5.5中的payhere支付网关集成[关闭]
Cpanel 共享主机中的 Laravel 5.5 错误 500