mdb-select and datepicker

Topic: mdb-select and datepicker

zhangatjlu pro asked 6 years ago

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>

ajithkumar free commented 4 years ago

this is code not properly working

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there zhangatjlu,

Thanks for contributing to our support forum. These are all viable questions.

1. <code>Datepicker</code> and <code>mdb-select</code> 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 <code>datepicker</code> 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 <code>mdb-select</code> is even more tricky, as its initialization takes the <code>select</code> and <code>option</code> elements and replaces them with an <code>unordered list</code> with <code>li</code>s full of <code>span</code>s. No <code>label</code> is preserved to be animated.

2. How do you load datepicker, using plain JS or perhaps a framework <em>per se</em>? 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 <code>display: none !important;</code>) 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

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

zhangatjlu

Pro User 15Support score
5Questions 0Answers 0Snippets