Fatal编程技术网
  • jquery/
  • Laravel5.5中使用jQueryUI或引导的日期选择器

Laravel5.5中使用jQueryUI或引导的日期选择器

jquery laravel jquery-ui

Laravel5.5中使用jQueryUI或引导的日期选择器,jquery,laravel,jquery-ui,laravel-5.5,Jquery,Laravel,Jquery Ui,Laravel 5.5,我正在尝试学习Laravel5.5，当我试图在我的模式窗口（引导）中添加jquery日期选择器时，我再次陷入困境。由于未知原因，始终存在一个错误，该错误表示：- $（“#上次更新”）.datepicker（）不是函数 我已按以下方式在标题部分正确添加了所有必需的文件：- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link rel="stylesheet" href="http://netdna.boot

我正在尝试学习
Laravel5.5
，当我试图在我的模式窗口（引导）中添加jquery日期选择器时，我再次陷入困境。由于未知原因，始终存在一个错误，该错误表示：-

$（“#上次更新”）.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中的一切都很好

请建议使用以下方法：

<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> 


$（'body'）。关于（'focus'，“#last_renewal”，function（）{
$（this.datepicker（）；
});
各位

我找到了一条路。在HTML中似乎有一个选项，
提供与jquery或任何其他日期选择器相同的输出。我仍然保持悬赏开放，希望这种方法对其他人有用。这里可能需要指出的是，它可能不适用于旧浏览器。

我认为您不需要像@Bugfix建议的那样更改代码，但我认为您只需要更改脚本标记的顺序。当我将
$（“#上次更新”）.datepicker（）放在jQuery ui之前时，我看到了您看到的错误。然后，当我将其移动到jQueryUI脚本标记之后和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>




$（“#上次更新”）.datepicker（）

您必须在
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>




$（函数（）{
$（“#上次更新”）.datepicker（）
});
日期：


您缺少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>





如果使用此设置，默认下拉列表在菜单上不起作用。您需要在页脚中添加
部分。您在哪里编写此
$（“#上次更新”）。datepicker（）
？您的日期选择器初始化部分在哪里？我在页脚中使用了它。但是问题似乎一直存在。你可以在浏览器的匿名模式下检查它添加js代码以了解更多详细信息。你是否在$（document）.ready（）中编写代码？@Jigs1212不工作。我得到的最多的是。。。我的区域链接中存在一些问题。因为如果我删除这些链接，它就可以正常工作。但是仍然不能得到什么导致错误你可以用当前标题更新问题的链接？你也可以发布HTML吗？为什么在您似乎正在使用bootstrap 3时会将其标记为[bootstrap-4]？我创建了，但您的代码仍然有效您尝试使用的浏览器和版本是什么？