Unable to have two datepicker inputs on the same page


Topic: Unable to have two datepicker inputs on the same page

edavey pro premium priority asked 2 years ago

I am trying to have a form input where I can select a start date and an end date. I want to be able to have two form input boxes on the same page which both allow me to utilise the datepicker module; however, the datepicker calendar only appears on one of the boxes and not both.

When I have both input groups in the html, the datepicker calendar only appears in the first one and not the second. However, if I comment out the first input-group, the calendar will then appear in the second box; hence, I do not think there is a problem with the html code.

        <div class="col-xl-3 col-lg-6 col-md-12 my-2">
            <div class="input-group shadow-lg form-outline datepicker-with-limits" data-mdb-toggle-button="false" data-mdb-format="yyyy-mm-dd">
                <span class="input-group-text py-4 bg-primary text-white">Start date:</span>
                <input type="text" class="form-control" id="start-datepicker" name="start-year" data-mdb-toggle="datepicker">
                <label for="start-datepicker" class="form-label">Select a start date</label>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12 my-2">
            <div class="input-group shadow-lg form-outline datepicker-with-limits" data-mdb-toggle-button="false" data-mdb-format="yyyy-mm-dd">
                <span class="input-group-text py-4 bg-primary text-white">End date:</span>
                <input type="text" class="form-control" id="end-datepicker" name="end-year" data-mdb-toggle="datepicker">
                <label for="end-datepicker" class="form-label">Select a end date</label>
            </div>                
        </div>

edavey pro premium priority commented 2 years ago

PS: I tried to attach a PNG of what the webpage looks like but I was not able to


kpienkowska staff answered 2 years ago

You didn't include your JS code. I expect that your problem is there. I am unsure if you want to achieve this, but I prepared a snippet based on your HTML. https://mdbootstrap.com/snippets/standard/kpienkowska/4886310


edavey pro premium priority commented 2 years ago

Apologies for not uploading the JS. I had a look and found that the JS was the problem, so thank you very much for sending the snippet


Joachim Kumpa pro premium priority commented 2 years ago

see my solution https://mdbootstrap.com/snippets/standard/kumpa/5375304#html-tab-view


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: DELL laptop Processor 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  • Browser: Chrome
  • OS: Windows 10 Enterprise Version
  • Provided sample code: No
  • Provided link: No