Topic: Datepicker throws JavaScript error

pregfit free asked 2 years ago


we have problems with the Datepicker. We use the Datepicker in the Stepper component, which is a form. Everytime we try to select a date, the modal doesn't close anymore, no value is inserted into the input and in the browser console we see this error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at

We use the example code from here:

This code we have tested it outside of the Stepper, but we still have the same error.

Here is the used HTML-Code. We use the Datepicker with data attributes.

<section class="py-5 mb-8">
    <div class="container my-5 py-5 ">
        <div class="row justify-content-center">
            <div class="onboarding-box col-xl-5 col-lg-5 col-md-8 p-4 shadow-4 bg-white rounded">

                <h1 class="mb-3 text-left text-muted">Set up your profile</h1>

                <ul class="stepper" id="onboarding" data-mdb-stepper="stepper" data-mdb-stepper-type="vertical" data-mdb-stepper-linear="true">
                    <form class="needs-validation stepper-form">

                        <li class="stepper-step stepper-active">
                            <div class="stepper-head">
                                <span class="stepper-head-icon">1</span>
                                <span class="stepper-head-text">Tell us something about you</span>

                            <div class="stepper-content py-3">
                                <div class="mb-5">
                                    <label class="form-label" for="reg_user_birthday">When were you born?</label>

                                    <div class="form-outline datepicker" data-mdb-toggle-button="false">
                                        <input type="text" class="form-control" id="reg_user_birthday" name="reg_user_birthday" data-mdb-toggle="datepicker">

                        <li class="stepper-step">
                            <div class="stepper-head">
                                <span class="stepper-head-icon">2</span>
                                <span class="stepper-head-text">Pregnancy information</span>

                            <div class="stepper-content py-3">

                                <div class="mb-4">
                                    <label class="form-label" for="reg_referral_information">How did you hear about us?</label>
                                    <select id="reg_referral_information" name="reg_referral_information" class="select form-control">
                                        <option value="0">&mdash; Please select                                                           &mdash;</option>
                                                                                        <option value="social_media">Social media - e.g. Instagram</option>                                                                                            <option value="recommendation">Personal recommendation</option>                                                                                            <option value="internet_search">Search on the Internet</option>                                                                                            <option value="other">Other</option>                                                                                   </select>


                <div class="d-flex justify-content-center pt-5">
                    <button id="onboarding-prev-step" class="btn btn-link w-100 me-2 invisible">Previous step</button>
                    <button id="onboarding-next-step" class="btn btn-primary w-100">Next step</button>
                    <button id="onboarding-finish-step" class="btn btn-primary w-100 d-none">Finish</button>

Dawid Wajszczuk staff commented 2 years ago

Hi. The problem is related to something else, probably some JS code in your project. Datepicker with Stepper works fine. You can see this in this snippet There is no such error. Do you use JS code to these components?

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Laptop
  • Browser: Chrome / Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes