Thank you. It worked fine ! And I understood it well.

This error suggests that myDatepicker is input. You have to catch the div element, not the input which is inside. Take a look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3436776#js-tab-view it simulates the situation you are dealing with - with the difference that the elements are loaded after pressing the button.

Thank you in advance. I added a code for initialize according your sample code. But it seems that failed to initialize only Datepicker. My added code is follow.

    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.form-outline').forEach((formOutline) => {
                new mdb.Input(formOutline).init();
            });
        });
        window.addEventListener('DOMContentLoaded', () => {
            const myDatepicker = new mdb.Datepicker(document.getElementById('myDatepicker'));
        });
    </script>

Do Datepicker and any other components need to be initialized at different times ?

Yes. Each element that is added after loading the page must be initialized manually.

<div class="form-outline datepicker">
  <input type="text" class="form-control" id="myDatepicker" />
  <label for="exampleDatepicker1" class="form-label">Select a date</label>
</div>

window.addEventListener('DOMContentLoaded', () => {
  const myDatepicker = new mdb.Datepicker(document.getElementById('myDatepicker'));
});

This is because components are initialized automatically when mdb.min.js is loaded. So if any component is added after loading mdb.min.js it will not be initialized automatically.

Many thanks for your help. It seems to be working fine after I try your code. But It is still not working only the datepicker. (There is no calender icon and can not open dialog.) Is it need to write additional initialization code to use datepicker ?

It looks like these elements are added after the Mdb js codes are loaded. Try adding this code and see if it helps:

window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.form-outline').forEach((formOutline) => {
      new mdb.Input(formOutline).init();
    });
});

It appear when an element is clicked on. There is no error after loading the page. I did not write any code for initiation.

When does this error appear? After loading the page or clicking on an element? Is input initiation done automatically or do you do it manually?