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在小提琴中生成datepicker，因此未执行js代码。（ doc about data api

对于大多数日期选择器，只需在要初始化的元素上设置data-provide =“ 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>

bootstrap-datepicker以全屏显示

1 个答案: