Bootstrap Datetime Picker不适用于Bootstrap 4 Alpha 6 [英] Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6
问题描述
我们正在使用 Eonasdan 日期时间选择器.我们已迁移到Boostrap 4 Alpha 6，因为它对Alpha5进行了许多改进，但Datetime选取器已损坏.现在，当我们单击日期时间选择器中的日历图标时，它没有显示数字.但是它与 alpha 5 .我正在寻找一种解决此问题的方法.
We are using Eonasdan Datetime picker. We are migrated to Boostrap 4 Alpha 6 since it comes with lot of improvements over Alpha5 but Datetime picker broken. Now it's not showing the numbers when we click on calendar icon in datetime picker.But it's working with alpha 5.I am looking for a possible way to solve this.
// 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，这就是代码变得不兼容的原因.
Classes collapse in classes were changed into collapse show, that's why the code became incompatible.
在您的供应商\ eonasdan \ bootstrap-datetimepicker.src \ js \ bootstrap-datetimepicker.js 中
getTemplate:
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:
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');
这篇关于Bootstrap Datetime Picker不适用于Bootstrap 4 Alpha 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
