Topic: Datepicker does not work
BeatKienerGlx pro asked 11 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
Thanks for the help
BeatKienerGlx pro answered 11 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 11 months ago
Please change JS file name to mdb.umd.min.js
BeatKienerGlx pro commented 11 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 11 months ago
Sorry, I have PRO 6.4.2 installed
Kamila Pieńkowska staff commented 11 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 11 months ago
Now it works. I purchased the license on Friday. Is there already a newer version?
Kamila Pieńkowska staff commented 11 months ago
The last release was 20.11.2023
The newest availible version is 7.0.0
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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