Bootstrap 日期时间选择器样式显示不正确
Bootstrap datetimepicker style not displaying properly
我正在尝试使用 bootstrap-datetimepicker,但无法正确显示。
我遵循了教程的安装部分。
截图
我的结果:
文档中的示例:
HTML
<div class="form-group">
<div class="input-group date">
<label class="input-group-addon" for="add-event-start"><span class=
"glyphicon glyphicon-calendar"></span></label><input class=
"form-control" id="add-event-start" name="start" type="text">
</div>
</div>
Javascript
$('#add-event-start').datetimepicker({
allowInputToggle: true,
locale: 'fr',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
},
});
头
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/fullcalendar.min.css">
<link rel="stylehseet" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
正文
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/validator.min.js"></script>
<script src="js/vendor/moment/moment.min.js"></script>
<script src="js/vendor/moment/fr.min.js"></script>
<script src="js/vendor/fullcalendar/fullcalendar.min.js"></script>
<script src="js/vendor/fullcalendar/fr.min.js"></script>
<script src="js/vendor/typeahead.bundle.min.js"></script>
<script src="js/vendor/bootstrap-datetimepicker.min.js"></script>
我试图删除一些包含以防止冲突,但我得到了相同的结果。
有人可以告诉我做错了什么吗?
当我忽略包含或禁用 [=17=] Datepicker CSS 样式表时,我得到的结果与您的图片相同。 (guide 的第 6 步):
<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
在您的示例代码中,标签似乎存在于您的 header 中,但您必须确保它也已加载。可能路径或文件本身有误
我得到完全同样的东西! :(
但是,如果您使用演示站点中的 bootstrap-datetimepicker.css 和 bootstrap-datetimepicker.js 版本,它就可以工作。
演示站点上的版本是 4.15.35,而不是 GitHub...
提供的最新版本 4.17.37
我正在尝试使用 bootstrap-datetimepicker,但无法正确显示。 我遵循了教程的安装部分。
截图
我的结果:
文档中的示例:
HTML
<div class="form-group">
<div class="input-group date">
<label class="input-group-addon" for="add-event-start"><span class=
"glyphicon glyphicon-calendar"></span></label><input class=
"form-control" id="add-event-start" name="start" type="text">
</div>
</div>
Javascript
$('#add-event-start').datetimepicker({
allowInputToggle: true,
locale: 'fr',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
},
});
头
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/fullcalendar.min.css">
<link rel="stylehseet" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
正文
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/validator.min.js"></script>
<script src="js/vendor/moment/moment.min.js"></script>
<script src="js/vendor/moment/fr.min.js"></script>
<script src="js/vendor/fullcalendar/fullcalendar.min.js"></script>
<script src="js/vendor/fullcalendar/fr.min.js"></script>
<script src="js/vendor/typeahead.bundle.min.js"></script>
<script src="js/vendor/bootstrap-datetimepicker.min.js"></script>
我试图删除一些包含以防止冲突,但我得到了相同的结果。 有人可以告诉我做错了什么吗?
当我忽略包含或禁用 [=17=] Datepicker CSS 样式表时,我得到的结果与您的图片相同。 (guide 的第 6 步):
<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
在您的示例代码中,标签似乎存在于您的 header 中,但您必须确保它也已加载。可能路径或文件本身有误
我得到完全同样的东西! :(
但是,如果您使用演示站点中的 bootstrap-datetimepicker.css 和 bootstrap-datetimepicker.js 版本,它就可以工作。
演示站点上的版本是 4.15.35,而不是 GitHub...
提供的最新版本 4.17.37