bootstrap-datepicker для отображения в полноэкранном режиме - PullRequest
Новая
       14

bootstrap-datepicker для отображения в полноэкранном режиме

0 голосов
/ 12 мая 2019

Я использую плагин: https://github.com/uxsolutions/bootstrap-datepicker

JSFiddle DEMO: 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. Как мне это сделать?

1 Ответ

1 голос
/ 12 мая 2019

Вы используете data-api для генерации указателя даты в скрипте, поэтому код js не выполняется. ( документ о данных API

Для большинства средств выбора даты просто установите data-provide = "datepicker" в элементе, который вы хотите инициализировать, и будет инициализирован лениво в режиме истинной начальной загрузки. )

попробуйте сгенерировать datepicker с помощью js и добавить опцию '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>
...