Bootstrap Datetime Picker не работает с Bootstrap 4 Alpha 6

Мы используем Eonasdan Datetime picker. Мы мигрировали в Boostrap 4 Alpha 6, так как он поставляется с большим количеством улучшений по сравнению с Alpha5, но сборщик Datetime сломан. Теперь он не показывает числа, когда мы нажимаем на значок календаря в сборщике datetime. Но он работает с alpha 5. Я ищу возможный способ решить эту проблему.Bootstrap Datetime Picker не работает с Bootstrap 4 Alpha 6

// 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>

источник

2017-02-09 nivas

Bootstrap Datepicker еще не совместим с Bootstrap 4, и * как известно, разработчик уже знает * этой проблемы: http: // github.com/Eonasdan/bootstrap-datetimepicker/issues/1996 – ZimSystem

Классы collapse in классы были изменены в collapse show, поэтому код стал несовместим.

в вашем поставщика \ eonasdan \ самозагрузки-DateTimePicker \ SRC \ JS \ бутстраповские-datetimepicker.js

GetTemplate:

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)); 
    }

togglePicker:

expanded = $parent.find('.in'), 
    closed = $parent.find('.collapse:not(.in)'),

} else { // otherwise just toggle in class on the two views 
    expanded.removeClass('in'); 
    closed.addClass('in');

Изменить на:

expanded = $parent.find('.show'), 
closed = $parent.find('.collapse:not(.show)'),

} else { // otherwise just toggle in class on the two views 
    expanded.removeClass('show'); 
closed.addClass('show');

Source

источник

2017-03-06 15:51:40 sr9yar

Я применил ваши изменения, но это все еще не работает. плагин правильно инициализирован, ошибок нет. и входное значение заполняется правильно. но когда я открываю сборщик, пользовательский интерфейс испорчен. я могу навести курсор на область содержимого, чтобы найти кнопки для установки значения времени. но пользовательский интерфейс datepicker ушел. это становится утомительным, и я пытался найти сборщик данных для загрузки. 4. Являлся мигрирующим в bootstrap 4 beta, а компонент выбора даты и времени был необходим. любая помощь приветствуется. – Nexus

Для отображения правильно все иконки в eonasdan-самозагрузки-DateTimePicker можно добавить только глификонов на вашу страницу, используя t его тег:

<link rel='stylesheet' href='bower_components/glyphicons-only-bootstrap/css/bootstrap.min.css' />

или установить его с помощью:

// using npm 
npm install glyphicons-only-bootstrap 

// using bower 
bower install glyphicons-only-bootstrap

Это поможет Вам показать правильно все иконки в компоненте, для корректного отображения компонентов выполните действия, указанные выше для Heretron и sr9yar.

Очевидно, вы также можете скопировать шрифты из папки dist в boostrap 3 и css по отношению к нему, но предыдущий вариант, как правило, более быстрый.

Это хранилище в GitHub из glyphicon-только-загрузчике:

https://github.com/ohpyupi/glyphicons-only-bootstrap

удачи, я надеюсь, есть помочь вам

PD: Извините, если мой английский не так. Bye

источник

2017-12-18 22:38:15

Bootstrap Datetime Picker не работает с Bootstrap 4 Alpha 6

ответ

Смежные вопросы