0

I would like to add a datepicker to my webpage. However when i add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>, it is not working. It works if i add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> instead.

My working code is as below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    **<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>**
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function () {

    $('#calendar').datepicker({
        autoclose: true,
        format: "dd/mm/yyyy"
    });

});

</script>
  </head>

  <body>
    <div class="container">
      <input class="form-control" type="text" placeholder="click to show datepicker" id="calendar">
  </div>



  </body>
</html>

not working one is as below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    **<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>**
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function () {

    $('#calendar').datepicker({
        autoclose: true,
        format: "dd/mm/yyyy"
    });

});

</script>
  </head>

  <body>
    <div class="container">
      <input class="form-control" type="text" placeholder="click to show datepicker" id="calendar">
  </div>



  </body>
</html>

why updated version block datepicker?

loremipsum
  • 11
  • 1
  • 3
  • Removing this line (line 75) from the datepicker CSS fixes it (I know it's hosted, but you could download it and modify a local version) `.datepicker > div { /* display: none; */ }` – Liftoff Sep 16 '20 at 18:51
  • Does this answer your question? [Bootstrap-Datetimepicker not working with the jQuery 3](https://stackoverflow.com/questions/41236574/bootstrap-datetimepicker-not-working-with-the-jquery-3) – Bryan Dellinger Sep 16 '20 at 18:54

0 Answers0