Materialize date picker is not working when I create a textbox using JQuery

Question

I have used Materialize CSS ( https://materializecss.com/ ) Date Picker. But, I couldn't able to access the date picker when I create the textbox dynamically using JQuery. I'm not sure It's not working. But, Can able to access date picker when we create a textbox manually. Please check my code.

Manual textbox creation:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<input type="text" class="datepicker">


<script>
$(document).ready(function(){
    $('.datepicker').datepicker();
});
</script>

Using my above code can able to access the date picker.

Dynamic textbox creation

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<button id="add">add</button>

<div id="createtextbox"></div>

<script>
  $(document).ready(function(){
       $('#add').click(function(){
          $("#createtextbox").append('<input type="text" class="datepicker" value="" />');
       });
       $('.datepicker').datepicker();
  });
</script>

Using this code, I couldn't able to access the date picker. Please help me to solve this? Thanks in advance :)

Answer 1

You are invoking the datepicker() before the input is being created. In addition, you are creating a multiple input elements on every element (I assume this is not the required behavior).

Your flow is basically:

- Document is ready
-- Invoke datepicker() //There is no datepicker input avaiable here
--- (Click) - Create and append a datepicker input
--- (Click) - Create and append a datepicker input
--- (Click) - Create and append a datepicker input
...

Your code execution order is as follows (look at the comments):

  $(document).ready(function(){ //1- document is ready
       $('#add').click(function(){ //Event listener is being registered but is not fired as no one clicked a button
          $("#createtextbox").append('<input type="text" class="datepicker" value="" />');
       });
       $('.datepicker').datepicker(); //2 invoke datepicker... but wait, there is no input - as no one pressed the button
  });

You should change it to:

  $(document).ready(function(){ //1- document is ready
       $('#add').click(function(){ //Event listener is being registered, this time when it will be fired it will invoke date picker as it was created in step 2
           $('.datepicker').datepicker();
       });
       $("#createtextbox").append('<input type="text" class="datepicker" value="" />'); //2 Create the input which will be used as the datepicker - BEFORE the click event is fired
  });

Which will make a correct flow of:

- Document is ready
-- Create and append a datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
--- (Click) - Invoke datepicker() //There is datepicker input
...