Twitter Bootstrap Question posted in

Bootstrap Datetime Picker not working with Bootstrap 4 Alpha 6 – Twitter bootstrap

We are using Eonasdan Datetime picker. We are migrated to Boostrap 4 Alpha 6 since it comes with lot of improvements over Alpha5 but Datetime picker broken. Now it’s not showing the numbers when we click on calendar icon in datetime picker.But it’s working with alpha 5.I am looking for a possible way to solve 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>
Tags:

2

Answers


  1. 0

    Classes collapse in classes were changed into collapse show, that’s why the code became incompatible.

    in your vendoreonasdanbootstrap-datetimepickersrcjsbootstrap-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');

    Source

    Login or Signup to reply.
  2. 0

    For display correctly all icons in eonasdan-bootstrap-datetimepicker you can add only the glyphicons 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 help you to show correctly all icons in the component, for correctly display component follow the steps mentioned above for Heretron and sr9yar.

    Obviously you also can copy the fonts from dist folder in boostrap 3 and the css relative to it, but the previously option is generally more fast.

    This is the repository in github of glyphicon-only-bootstrap:

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

    Good luck, I hope have help you

    PD: Sorry if my english is wrong. Bye

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search