Datetimepicker only works on Bootstrap 3

Question

Datetimepicker only works on Bootstrap 3

Asked 5 years, 2 months ago

Viewed 1,742 times

0

When you click, just open this pop-up. IMG1

By clicking the pop-up, it slides up and does not show the calendar. IMG2 When I change the boostrap to version 3.x. x, it works correctly.

But my entire project is using version 4.3.1.

Any suggestions?

$(function () {
  $('#datetimepicker5').datetimepicker({
    defaultDate: "04/09/2019",
    locale: 'pt-br'
  });
});

<head>
  <!-- ... -->


<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.min.css">
  <link rel="stylesheet" type="text/css" href="assets/js/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">




</head>


<div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker5'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon" style="width: 20px;">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
<!-- Page JS Code -->

<script src="assets/js/core/jquery.min.js"></script>
<script src="assets/js/core/jquery-ui.js"></script>
<script src="assets/js/core/js.cookie.min.js"></script>
<script src="assets/js/core/bootstrap.bundle.min.js"></script>
<script src="assets/js/core/simplebar.min.js"></script>
<script src="assets/js/core/jquery-scrollLock.min.js"></script>
<script src="assets/js/core/jquery.appear.min.js"></script>
<script src="assets/js/core/js.cookie.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="./assets/js/plugins/moment/moment-with-locales.min.js"></script>
<script src="assets/js/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="assets/js/plugins/bootstrap-datetimepicker/js/bootstrap.js"></script>
<script src="./js/atend_os.js"></script>

I have a suggestion! Use a plugin that was made for BS4, not a BS3 plugin inside BS4 ;)

– hugocsl

2019/09/04 at 14:24
Oops, I’m searching the internet and I can’t find anything specific from datetimepicker to BS4

– Felipe Fernandes

2019/09/04 at 14:26

1 answer

Browser other questions tagged javascript html twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-04T14:32:24+00:00

Its problem is that several BS3 class and date attributes are different from BS4, including one has the Popper.js and the other does not. There are several differences between the versions, I will not cover them here, but the fact is that it is not possible to use the plugins of BS3 in BS4.

Here’s a model made for BS4 that can help you.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

</style>
</head>

<body>



    <div class="container">
        <div class="input-group date">
            <input type="text" class="form-control" id="datepicker" placeholder="DD/MM/AAAA" data-date-format="dd/mm/yyyy">
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.pt-BR.min.js"></script>
    <script>
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
language: "pt-BR",
orientation: 'auto',
});
    </script>
</body>

</html>