CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapdatetimepicker
SirBT
SirBT

Reputation: 1698

Why isnt my Bootstrap datepicker working?

I have a Bootstrap datetimepicker component in my code that was working a few weeks ago but has stopped working. I appreciate any help getting to start working again.

Find below my HTML code:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>
<script src="js/app.js"></script>    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>

    <form action="" method="post" class="datepickers">
        <div class="form-group">
            <div class="input-group date" id="id_0">
                <input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
            </div>
        </div>
     </form>

     <script type="text/javascript">
         $(document).ready(function(){
               $(".datepickers").click(function(){ 
                   $("#id_0").datetimepicker();
                    
                   alert("MammazZ!");
               });
         });    
      </script>
   </div>
</div>

When I click within the datepickers input field as illustrated below: the button I click on The MammazZ alert is fired, followed by a slight change (the seconds are omitted) as illustrated below: change after the click

Please help me resolve this!

Upvotes: 0

Views: 292

Answers (1)

Nechoj
Nechoj

Reputation: 1582

I think the problem is due to an incompatibility in imports and the sequence of imports. In case you want to use bootstrap 5, things get more easy

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
    <h2 class="py-2">Datepicker in Bootstrap 5</h2>
    <form class="row">
        <label for="date" class="col-1 col-form-label">Date</label>
        <div class="col-5">
            <input id="date" class="form-control" type="date"/>
        </div>
    </form>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 1

Related Questions