1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Datepicker does not work

BeatKienerGlx pro asked 5 months ago

I am trying to create the example with a datepicker. Unfortunately the icon does not appear and the datepicker does not work

<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
  </head>

  <body>
    <!-- Start your project here-->
<form style="width:500px">
  <!-- Email input -->
  <div data-mdb-input-init class="form-outline mb-4">
    <input type="email" id="form1Example1" class="form-control" />
    <label class="form-label" for="form1Example1">Email address</label>
  </div>

  <!-- DateTime -->
    <div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-inline="true">
        <input type="text" class="form-control" id="exampleDatepicker2" />
    <label for="exampleDatepicker2" class="form-label">Select a date</label>
</div>

</form>
    <!-- End your project here-->

    <!-- MDB -->
    <script type="text/javascript" src="js/mdb.min.js"></script>


    <!-- Custom scripts -->
    <script type="text/javascript">
    </script>
  </body>
</html>

the result

enter image description here

Thanks for the help

BeatKienerGlx pro answered 5 months ago

Is there an example with a form and a date picker? My example does not work

<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
  </head>
  <body>
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input
        type="text"
        class="form-control"
        id="inlineFormInputGroupUsername"
        placeholder="Username"
      />
    </div>
  </div>

  <div class="col-12">
    <div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-inline="true">
        <input type="text" class="form-control" id="exampleDatepicker2" />
        <label for="exampleDatepicker2" class="form-label">Select a date</label>
        <button class="datepicker-toggle-button" data-mdb-toggle="datepicker">
            <i class="fas fa-calendar datepicker-toggle-icon"></i>
        </button>
    </div>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck" />
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button data-mdb-ripple-init type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

    <!-- MDB -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>

Kamila Pieńkowska staff answered 5 months ago

Please change JS file name to mdb.umd.min.js

BeatKienerGlx pro commented 5 months ago

Thank you for your answer. Unfortunately there is no change

Material Design for Bootstrap

Email address Select a date 
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>

<!-- Custom scripts -->
<script type="text/javascript">
</script>

BeatKienerGlx pro commented 5 months ago

Sorry, I have PRO 6.4.2 installed

Kamila Pieńkowska staff commented 5 months ago

If that is the case than the previous file name was fine.

But we've changed the initialization method since the version you use and you need to copy code examples from legacy documentation

Here is a link to legacy docs: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/

You can access it from the changelog.

BeatKienerGlx pro commented 5 months ago

Now it works. I purchased the license on Friday. Is there already a newer version?

Kamila Pieńkowska staff commented 5 months ago

The last release was 20.11.2023

The newest availible version is 7.0.0
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
datepicker
About author
BeatKienerGlx
Pro User 0Support score
2Questions 2Answers 0Snippets