[Bug] Datepicker not working for the dynamically added elements

[Raboldar]

Version

v1.2.0

Reproduction link

https://jsfiddle.net/8agyk0nu/28/#&togetherjs=M59CPKtfmx

Operating System

Linux

Device

Laptop

Browser & Version

Chromium Version 89.0.4389.90 (Official Build) Arch Linux (64-bit)

Steps to reproduce

Add dynamic content (html code) to a already loaded page (client side). The client obtains the web page. When a certain event happens (click a button) a JQuery script is launched to add dynamically content to the page. The added content is a datepicker input with the following code :

<div id="datepicker-range-component" class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="datepicker-range-component-tab">
              <div class="input-daterange datepicker row align-items-center">
                <div class="col">
                  <div class="form-group">
                    <div class="input-group input-group-alternative">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                      </div>
                      <input class="form-control" placeholder="Start date" type="text" value="06/18/2020">
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="form-group">
                    <div class="input-group input-group-alternative">
                      <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                      </div>
                      <input class="form-control" placeholder="End date" type="text" value="06/22/2020">
                    </div>
                  </div>
                </div>
              </div>
            </div>

What is expected?

When clicking on the newly added item the date pop-up would open and allow the user to choose a range.

What is actually happening?

Nothing. When clicking on the input field nothing happens.

---

Solution

Fix the observer system so that it would take into account new datepicker items that are added to the page.

Additional comments

The date-picker library works for the statically rendered content (directly asked from the server) but not for the one that's added afterwards (once the page was loaded). This can be seen even on the https://demos.creative-tim.com/argon-design-system/docs/plugins/datepicker.html website. When adding an datepicker directly in the DOM (using the browser->elements->copy datepicker element -> paste element somewhere in the page) the script won't work. Is there a way to tell the library to take into account the newly created elements ?

[LebToki]

To fix this, you need to re-initialize the datepicker component after adding the new elements to the page. You can do this by calling the datepicker function again on the new elements.

Here's an example of how you can do this:

// Add the new datepicker elements to the page // ...

// Re-initialize the datepicker component on the new elements $('.datepicker').datepicker(); This will re-initialize the datepicker component on the new elements and make them functional.

Alternatively, you can also use the datepicker function with the update option set to true to update the existing datepickers:

$('.datepicker').datepicker('update'); This will update the existing datepickers and make them functional again.

In your case, you can add the following code after adding the new datepicker elements to the page:

// Add the new datepicker elements to the page // ...

// Re-initialize the datepicker component on the new elements $('.datepicker').datepicker(); This should fix the issue and make the new datepicker elements functional.

As for the additional comments, yes, the datepicker library doesn't automatically detect new elements added to the page. This is a common issue with many JavaScript libraries that rely on DOM manipulation. To work around this, you need to re-initialize the components or update the existing ones to make them functional again.