niv*_*vas 6 bootstrap-datetimepicker bootstrap-4
我们正在使用Eonasdan Datetime选择器.我们迁移到Boostrap 4 Alpha 6,因为它比Alpha5有很多改进但是日期时间选择器坏了.现在,当我们点击日期时间选择器中的日历图标时,它没有显示数字.但它正在使用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>sr9*_*yar 13
类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');
| 归档时间： |
|
| 查看次数： |
11434 次 |
| 最近记录： |