[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

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 ?

[KhaledMEB]

Any update on this?

[app-generator]

Hello @KhaledMEB,

Thank you for using this product.

To apply the date-picker control on dynamic content try to define a new handler as suggested in this StackOverflow topic:

https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui

$('body').on('focus',"SELECTOR_HERE", function(){
    $(this).datepicker();
});​

Let us know your progress.

[Raboldar]

After adding the snippet specified by @app-generator the element works as expected. I would be great to have it added to the documentation :) . Thanks a lot for the support !!