Using Date Picker

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Using Date Picker

pro asked 7 years ago

Hello, I need your help to add the date picket in my website. These are the steps i'have already done : 1) add the code in my HTML/PHP page 
<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>
But i stopped there because i just don't uderstand where the initialization code should be write in .. $('.datepicker').pickadate(); Please help me Regards Corentin

pro commented 5 years ago

found it ! thanks :)

4mjoncas commented 5 years ago

I have the same problem... can you share you solution?

Mateusz Łubianka staff answered 5 years ago

Hi,

The initialization code should be write in <script></script> just before closing body tag or in your custom js file. For example:

<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>
<script type="text/javascript">
$(document).ready(function () {
// Data Picker Initialization
$('.datepicker').pickadate();
});
</script>
</body>

Best,

killi3000 commented 5 years ago

hello. I am struggling with the same. I have tried copying this code onto my page, but nothing happens. the Label is on top of "Selected date" and nothing happens when I click on it.

Mateusz Łubianka staff answered 5 years ago

Hi @killi3000,

Which MDB version are you using? I checked it with 4.15.0 MDB Pro and it works well.

<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>
<script type="text/javascript">
$(document).ready(function () {
// Data Picker Initialization
$('.datepicker').pickadate();
});
</script>
</body>


<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>

Best,

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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
corentin-chalhenri
Pro User
-3Support score
3Questions 2Answers
0Snippets likes 0Snippets