All geek questions in one place

Bootstrap Datetime Picker does not work with Bootstrap 4 Alpha 6

We use the Eonasdan Datetime picker. We migrated to Boostrap 4 Alpha 6 since it comes with a lot of improvements over Alpha5, but the Datetime collector is broken. Now it does not show the numbers when we click on the calendar icon in the datetime picker. But it works with alpha 5 . I am looking for a possible way to resolve this.

// 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>
+5
source share
2 answers

The collapse in classes were changed to collapse show , so the code became incompatible.

in provider \ eonasdan \ bootstrap-datetimepicker \ src \ js \ bootstrap-datetimepicker.js

GetTemplate:

 if (hasDate()) { content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse in' : '')).append(dateView));

Change to:

 if (hasDate()) { content.append($('<li>').addClass((options.collapse && hasTime() ? 'collapse show' : '')).append(dateView)); }

togglePicker:

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

and

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

Change to:

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

and

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

A source

+8
source

To correctly display all the icons in eonasdan-bootstrap-datetimepicker, you can add only glyphics to your page using this tag:

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

or install it with:

 // using npm npm install glyphicons-only-bootstrap // using bower bower install glyphicons-only-bootstrap

This will help you correctly display all the icons in the component; to display the component correctly, follow the steps above for Heretron and sr9yar.

Obviously, you can also copy fonts from the dist folder to boostrap 3 and css relative to it, but the previous option is usually faster.

This is the github repository for glyphicon bootstrap only:

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

Good luck, hope you help

PD: Sorry if my English is incorrect. Bye

+1
source

Source: https://habr.com/ru/post/1264002/

More articles:


All Articles