Bootstrap datetimepicker样式无法正常显示

时间:2016-03-11 13:40:38

标签: javascript css twitter-bootstrap bootstrap-datetimepicker

我尝试使用bootstrap-datetimepicker,但我无法正常显示。 我按照教程的安装部分进行了操作。

截图

我的结果:

style not applied

doc:

中的示例

enter image description here

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>

我试图删除一些包含以防止冲突,但我有相同的结果。 有人能说出我做错了吗?

2 个答案:

答案 0 :(得分:3)

当我忽略包含或禁用Bootstrap Datepicker CSS样式表时,我得到与图片相同的结果。 (guide)的第6步:

commandLine 'java -version'

在示例代码中,标记似乎出现在标题中,但您必须确保它也已加载。也许路径或文件本身是错误的。

答案 1 :(得分:0)

完全同样的事情! :(

但是,如果您使用演示站点中的bootstrap-datetimepicker.css和bootstrap-datetimepicker.js版本,则可以使用。

演示网站上的版本是4.15.35,而不是GitHub提供的最新4.17.37 ......