引导--全屏显示的数据报警器

Question

我正在使用插件：https://github.com/uxsolutions/bootstrap-datepicker

JSFiddle演示：https://jsfiddle.net/j3b089gr/

我正在用HTML展示日历

<div class="row">
  <div class="col-5">first column</div>
  <div class="col-7">
    <input class="datepicker" data-date-format="dd/mm/yyyy">
  </div>
</div>

联合来文：

$('#datepicker').datepicker();

我想把日历显示在全屏上，但我不能这样做。它只显示在col-7区域。我该怎么做？

Answer 1

您正在使用data-api在您的小提琴中生成数据报警器，因此不执行js代码。( 关于数据api的文档

对于大多数数据编辑器，只需在您想要初始化的元素上设置data=“datepicker”，就会以真正的引导方式懒散地对进行简化。)

尝试使用js生成数据报警器，并添加“容器”选项，然后您可以编写一些自定义样式，使其成为全屏：

​

var widthPerDay = window.innerWidth / 7; 
var heightPerDay = window.innerHeight / 6;

$('.datepicker').datepicker({container:'body',orientation:'auto bottom'}).on('show',function(){ 
$('.dropdown-menu').addClass('overlay'); // to position the datepicker, or just do it here
 $('.datepicker td').css( {"width":widthPerDay,"height":heightPerDay } ); // change the size of day elements to make the datepicker table resize.
  $('.datepicker th').css( {"width":widthPerDay,"height":heightPerDay } );
 
});

.dropdown-menu.overlay{
  left:0 !important; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-5">First Column</div>
    <div class="col-7">
        <input class="datepicker" data-date-format="dd/mm/yyyy">
    </div>
  </div>
</div>

​