Bootstrap DateTimePicker不是功能
[英]Bootstrap datetimepicker is not a function
问题描述
I am trying to use the datetimepicker from http://eonasdan.github.io/bootstrap-datetimepicker/ and I am getting the error "Uncaught TypeError: $(...).datetimepicker is not a function" 
我正在尝试使用来自http://eonasdan.github.io/bootstrap-datetimepicker/的datetimepicker，但出现错误“ Uncaught TypeError：$（...）。datetimepicker不是函数”
Here are my includes: 这是我的包括：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
Here is the code 这是代码
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
});
</script>
Any help would be greatly appreciated. 任何帮助将不胜感激。
4 个解决方案
解决方案1
35 已采纳 2015-10-21 15:35:26
Below is the right code. 下面是正确的代码。 Include JS files in following manner: 通过以下方式包括JS文件：
$(document).ready(function() { $(function() { $('#datetimepicker6').datetimepicker(); $('#datetimepicker7').datetimepicker({ useCurrent: false //Important! See issue #1075 }); $("#datetimepicker6").on("dp.change", function(e) { $('#datetimepicker7').data("DateTimePicker").minDate(e.date); }); $("#datetimepicker7").on("dp.change", function(e) { $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); }); }); });
<html> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <body> <div class="container"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </body> </html>
解决方案2
6 2015-10-21 15:31:45
The problem is that you have not included bootstrap.min.css . 问题是您还没有包含bootstrap.min.css 。 Also, the sequence of imports could be causing issue. 另外，导入顺序可能会引起问题。 Please try rearranging your resources as following: 请尝试按以下方式重新布置资源：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
解决方案3
1 2018-01-01 19:35:26
Try to use datepicker/ timepicker instead of datetimepicker like: 尝试使用datepicker / timepicker代替datetimepicker，例如：
replace: 更换：
$('#datetimepicker1').datetimepicker();
with: 与：
$('#datetimepicker1').datepicker(); // or timepicker for time picker
解决方案4
0 2019-10-15 21:03:19
I changed the import sequence without fixing the problem, until finally I installed moments and tempus dominius (Core and bootrap), using npm and include them in boostrap.js 我更改了导入顺序但未解决问题，直到最后我使用npm安装了moments和tempus dominius（Core和bootrap）并将其包含在boostrap.js中
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('moment'); /*added*/
require('bootstrap');
require('tempusdominus-bootstrap-4');/*added*/} catch (e) {}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap Datepicker不起作用，datetimepicker不是功能 - Bootstrap Datepicker not working, datetimepicker is not a function
BootStrap：未捕获的TypeError：$（...）。datetimepicker不是函数 - BootStrap : Uncaught TypeError: $(…).datetimepicker is not a function
bootstrap datepicker $(...).datetimepicker 中的错误不是函数 - error in bootstrap datepicker $(...).datetimepicker is not a function
Bootstrap 3 DatetimePicker中的setMinDate和minDate函数不起作用 - setMinDate and minDate function in Bootstrap 3 DatetimePicker not working
jQuery .on（'click'，function（））无法与bootstrap-datetimepicker一起使用 - jQuery .on('click', function()) not working with bootstrap-datetimepicker
bootstrap 4 的 bootstrap-datetimepicker - bootstrap-datetimepicker for bootstrap 4
如何调用bootstrap3-datetimepicker的“ onSelect”功能？ jQuery的 - How to call “onSelect” function for bootstrap3-datetimepicker? jQuery
YADCF插件-从Eonasdan Bootstrap Datetimepicker获取日期功能 - YADCF Plugin - Get Date Function From Eonasdan Bootstrap Datetimepicker
在document.ready中使用时，Bootstrap datetimepicker不是函数 - Bootstrap datetimepicker is not a function when used within document.ready
引导日期时间更改后如何触发角度控制器功能 - how to trigger angular controller function after bootstrap datetimepicker changes
相关标签