Laravel 5.5 中的日期选择器使用 Jquery-ui 或 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49173025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datepicker in Laravel 5.5 using Jquery-ui or Bootstrap
提问by Roger
I am trying to learn Laravel 5.5and I am again stuck when I was trying to add a jquery datepickerin my modal window (bootstrap). Due to some unknown reason there is always an error which says:-
我正在尝试学习Laravel 5.5，当我尝试在我的模式窗口（引导程序）中添加一个jquery 日期选择器时，我再次陷入困境。由于某些未知原因，总是有一个错误说：-
$("#last_renewal").datepicker() is not a function
$("#last_renewal").datepicker() 不是函数
I have properly added all the required files in the header section in the following manner:-
我已按以下方式在标题部分正确添加了所有必需的文件：-
<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>
Now I am really confused what is the mistake i am doing. Except the datepicker everything in jquery works fine.
现在我真的很困惑我在做什么错误。除了日期选择器，jquery 中的所有内容都可以正常工作。
Please Suggest
请建议
回答by Jonathan Chaplin
I don't think you need to change your code like @BugFixer is suggesting, but I think you just need to change the order of your script tags. When I put $("#last_renewal").datepicker()before jQuery ui, i see the error you're seeing. Then, when I move it after jquery ui script tag and after the div it works. See my answer below.
我认为您不需要像@BugFixer 建议的那样更改代码，但我认为您只需要更改脚本标签的顺序。当我放在$("#last_renewal").datepicker()jQuery ui 之前时，我看到了您看到的错误。然后，当我在 jquery ui 脚本标记之后移动它并在 div 之后它工作时。请看我下面的回答。
By the way, I would have create a fiddle but I had some difficulty getting the order the way I wanted it.:
顺便说一句，我本来可以创建一个小提琴，但我很难按照我想要的方式获得订单。：
<!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>
回答by Roger
Everyone,
每个人，
I found a way around. It seems that in HTML there is a option where <input type="date" >gives the same output as jquery or any other datepicker. I am still keeping the bounty open and hope this way around method is useful for others. It may be relevant to mention here that it may not work with old browsers.
我找到了解决办法。似乎在 HTML 中有一个选项可以<input type="date" >提供与 jquery 或任何其他日期选择器相同的输出。我仍然保持悬赏，希望这种方法对其他人有用。在这里提到它可能不适用于旧浏览器可能是相关的。
回答by MrMins
You have to initilize the element with jQueryin the onReadyevent
你必须jQuery在onReady事件中初始化元素
<!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>
回答by Kinya Beatrice
You are missing a link to datepicker plugin. Put this after fontawesome reference. for css use this
您缺少指向 datepicker 插件的链接。把它放在 fontawesome 参考之后。对于 css 使用这个
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css"/>
for java script plugin
用于java脚本插件
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
回答by Bugfixer
Use this :
用这个 ：
<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>
![InvalidArgumentException] 在可使用 PHP 7.0.10 版安装的版本中找不到 5.6.* 版的 laravel/laravel 包](/res/img/loading.gif)