- 首页
- 其他开发
- Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6
Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6
[英] Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6
本文介绍了Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们正在使用 Eonasdan 日期时间选择器.我们迁移到 Boostrap 4 Alpha 6，因为它比 Alpha5 有很多改进，但日期时间选择器坏了.现在，当我们在日期时间选择器中单击日历图标时，它不会显示数字.但它可以使用 alpha 5.我正在寻找一种可能的方法来解决这个问题.
//代码放在这里$(函数(){$('#datetimepicker1').datetimepicker();});
<头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>引导日期时间选择器</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"><身体><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>
<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 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>
解决方案
Classes collapse in classes 变成了 collapse show，这就是代码不兼容的原因.>
在您的vendoreonasdanootstrap-datetimepickersrcjsootstrap-datetimepicker.js
获取模板:
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));}
切换选择器:
Expanded = $parent.find('.in'),关闭 = $parent.find('.collapse:not(.in)'),
和
} else {//否则只需在两个视图的类中切换展开.removeClass('in');close.addClass('in');
更改为:
Expanded = $parent.find('.show'),关闭 = $parent.find('.collapse:not(.show)'),
和
} else {//否则只需在两个视图的类中切换展开.removeClass('show');close.addClass('show');
来源
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>
解决方案
Classes collapse in classes were changed into collapse show, that's why the code became incompatible.
in your vendoreonasdanootstrap-datetimepickersrcjsootstrap-datetimepicker.js
getTemplate:
if (hasDate()) {
content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse in' : '')).append(dateView));
Change to:
if (hasDate()) {
content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse show' : '')).append(dateView));
}
togglePicker:
expanded = $parent.find('.in'),
closed = $parent.find('.collapse:not(.in)'),
and
} else { // otherwise just toggle in class on the two views
expanded.removeClass('in');
closed.addClass('in');
Change to:
expanded = $parent.find('.show'),
closed = $parent.find('.collapse:not(.show)'),
and
} else { // otherwise just toggle in class on the two views
expanded.removeClass('show');
closed.addClass('show');
Source
这篇关于Bootstrap 日期时间选择器不适用于 Bootstrap 4 Alpha 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
