Bootstrap3 Datepicker is not working for Dynamically created elements
With the above HTML sample code, the datepicker looks like as shown in the below screenshot:
As you can see how simple it is to use the bootstrap3 datepicker on an already existing input.
But I faced an issue with dynamically created input elements, datepicker is not opened for such elements.
Let’s have a following screenshot:
From screenshot 2, we can see that on click of link Add More Input, we can add more inputs on the page dynamically, but the issue here is that datepicker is not opened for such dynamically created inputs. So, what’s the solution?
I used following approach to resolve this issue:
Change the jquery datepicker function from$('.calendar-input input').datepicker();
to$('form').on('focus', '.calendar-input input', function(){
$(this).datepicker();
});
Now, I have used on event on already existing parent element and it is showing datepicker for dynamically added elements too as shown below:
Microsoft Windows 10 is a widely used operating system in computers all over the world. If you have skills in Microsoft Windows 10 then you can get a Windows 10 Certification from StudySection which can help you in getting hired. A beginner level certification exam for newbies and an advanced level certification exam for experts is available on StudySection.
Originally published at https://studysection.com on March 3, 2022.
