Topic: mdb-select and datepicker
Hi,
I have following questions/problems
1. how to animate the label for datepicker and mdb-select like others
2. display confusion if the datepicker is loaded dynamically, placerholder and label are in same position.
3. "datepicker window" popups again if the browser is focused again, e.g. using alt+tab.
4. the label for mdb-select is out of view
the version of bootstrap is V4.
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/mdb/css/mdb.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<label for="date-picker-example">Try me...</label>
</div>
<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/assets/jquery/jquery-3.2.1.min.js"></script>
<script src="/assets/bootstrap/assets/js/vendor/popper.min.js"></script>
<script src="/assets/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/mdb/js/mdb.js"></script>
<script>
$(document).ready(function() {
$('.datepicker').pickadate();
$('.mdb-select').material_select();
});
</script>
</body>
</html>
Hi there zhangatjlu,
Thanks for contributing to our support forum. These are all viable questions.
1.
Datepicker and mdb-select are a bit different than the rest of our inputs and as the side-effect applying the same animation is difficult. As you probably know, not including the placeholder attribute in a datepicker allows the label to be animated, but the nature of the input itself gets it animated twice - once for a click event and once for picking an actual date. The case of mdb-select is even more tricky, as its initialization takes the select and option elements and replaces them with an unordered list with lis full of spans. No label is preserved to be animated.
2. How do you load datepicker, using plain JS or perhaps a framework per se? This has probably to do with initialization code for input.
3. I wasn't able to recreate this behavior.
4. Yes, as I mentioned in at the beginning, the select element is hidden (as in display: none !important;) and so is the label.
I hope it helps you at least a bit. We will consider implementing your suggestions in the future.
With Best Regards,
Kuba FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
ajithkumar commented 5 years ago
this is code not properly working