datepicker is not a function with Pro 4.18.0

Topic: datepicker is not a function with Pro 4.18.0

Giacomoni free asked 3 years ago

Expected behavior

I am trying to use the basic example for the new datepicker API and the datepicker method is not present in the div's object $('.datepicker')

I have used other pro features so I'm not sure what I'm missing.

thanks

John G

Actual behavior

index.html:21 Uncaught TypeError: $(...).datepicker is not a function

Resources (screenshots, code snippets etc.)

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link href="./bootstrap.min.css" rel="stylesheet">
  <link href="./mdb-pro.min.css" rel="stylesheet">
  <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="./popper.min.js"></script>
  <script type="text/javascript" src="./bootstrap.min.js"></script>
  <script type="text/javascript" src="./mdb.min.js"></script>
</head>

<body>
  <main role="main" id="MainContent">
    <div class="container">
      <div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
        <input placeholder="Select date" type="text" id="example" class="form-control">
        <label for="example">Try me...</label>
        <i class="fas fa-calendar input-prefix" tabindex=0></i>
      </div>
      <script>
        // Data Picker Initialization
        $('.datepicker').datepicker();
      </script>
    </div>
  </main>
</body>

Add comment

Tomek Makowski staff answered 3 years ago

0 0 Best answer

<p>Your scripts are in the wrong position. It should look like this:</p>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design for Bootstrap</title>
  
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/addons/pickr.min.css" />
  
  <link rel="stylesheet" href="css/mdb.min.css">
  
  <link rel="stylesheet" href="css/style.css">
</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
  
  <script type="text/javascript" src="js/popper.min.js"></script>
  
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  
  <script type="text/javascript" src="js/mdb.min.js"></script>

</body>

</html>
</code></pre>

<p>Best, regards</p>

Please insert min. 20 characters.

Your scripts are in the wrong position. It should look like this:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/addons/pickr.min.css" />
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main role="main" id="MainContent">
    <div class="container">
      <div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">
        <input placeholder="Select date" type="text" id="example" class="form-control">
        <label for="example">Try me...</label>
        <i class="fas fa-calendar input-prefix" tabindex=0></i>
      </div>
    </div>
  </main>

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>

  <script>
    // Data Picker Initialization
    $('.datepicker').datepicker();
  </script>

</body>

</html>

Best, regards

cloud.vgp free commented 3 years ago

well, even with this suggestion, it does not work neither with pro version. also this file ( css/addons/pickr.min.css) does not exist too

ItIsN3RD free commented 3 years ago

I bought pro and i dont have access to pro level components even though i manually installed the files it gave me, i would like this investigated too!!!!

Krzysztof Wilk staff commented 3 years ago

Hi @cloud.vgp and @ItIsN3RD!

@cloud.vgp - could you share your code with me?

@ItIsN3RD - here is answer for your question https://mdbootstrap.com/support/jquery/i-manually-installed-my-pro-files-and-dont-have-any-of-the-features/

Best regards

Please insert min. 15 characters.

Add comment