jquery - bootstrap-datepicker 全屏显示

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>

和 JS:

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

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

Answer 1

您正在使用 data-api 在您的 fiddle 中生成日期选择器，因此未执行 js 代码。( doc about data api

For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion. )

尝试使用js生成datepicker并添加'container'选项，然后你可以编写一些自定义样式使其全屏:

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>

---