Javascript Bootstrap 3日期选择器不';不显示日历
我已在我的页面中包括以下内容: 在Javascript Bootstrap 3日期选择器不';不显示日历,javascript,jquery,twitter-bootstrap-3,datepicker,calendar,Javascript,Jquery,Twitter Bootstrap 3,Datepicker,Calendar,我已在我的页面中包括以下内容: 在 然后,我使用jQuery将表单的输入字段转换为日期选择器: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon">
然后,我使用jQuery将表单的输入字段转换为日期选择器:
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
$(函数(){
$('#datetimepicker1')。datetimepicker();
});
输入字段的样式类似于日期选择器(末尾带有日历图标的字段),但当我单击该字段上的任何位置或图标时,日历不会显示
我重新阅读了教程,但没有发现遗漏任何内容。如果打开浏览器控制台,可能会在控制台中看到异常错误,例如
引导JS需要jquery
等等
<!-- Latest compiled and minified jQuery Core -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
这应该有效更换
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
借
您应该获得TypeError:$(…)。datetimepicker不是浏览器控制台中的函数
因为您只包含datepicker而不包含datetimepicker
将日期时间选择器1添加到
和$('#datetimepicker1')。datepicker()代码>非$('#datetimepicker1')。datetimepicker()代码>
沃克林:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">-->
</head>
<body>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<!-- Latest compiled and minified jQuery Core -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</body>
</html>
文件
$(函数(){
$('#datetimepicker1').datepicker();
});
bootstrap.min.js之前加载jquery.min.js还必须为日期时间选择器添加CSS,否则日历看起来像垃圾。
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">-->
</head>
<body>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<!-- Latest compiled and minified jQuery Core -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</body>
</html>