我们正在使用Eonasdan日期时间选择器。我们已迁移到Boostrap 4 Alpha 6，因为它对Alpha5进行了许多改进，但Datetime选取器已损坏。现在，当我们单击日期时间选择器中的日历图标时，它没有显示数字。但是它与alpha 5一起使用。我正在寻找一种解决此问题的方法。
// Code goes here
$(function () {
$('#datetimepicker1').datetimepicker();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap date time picker</title>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container" style="margin:50px;">
<h4>Bootstrap Datetime Picker</h4>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<script src="script.js"></script>
</html>请您参考如下方法:
类别collapse in类别已更改为collapse show，这就是代码变得不兼容的原因。
在您的供应商\eonasdan\bootstrap-datetimepicker.src\js\bootstrap-datetimepicker.js中
getTemplate:
if (hasDate()) {
content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse in' : '')).append(dateView));
改成:
if (hasDate()) {
content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse show' : '')).append(dateView));
}
togglePicker:
expanded = $parent.find('.in'),
closed = $parent.find('.collapse:not(.in)'),
和
} else { // otherwise just toggle in class on the two views
expanded.removeClass('in');
closed.addClass('in');
改成:
expanded = $parent.find('.show'),
closed = $parent.find('.collapse:not(.show)'),
和
} else { // otherwise just toggle in class on the two views
expanded.removeClass('show');
closed.addClass('show');
Source
