Datepicker not working (Bootstrap)?

Question

JavaScript

It is necessary to display in the input field - a calendar (datepicker (Bootstrap)).
The problem is that in the first case it is displayed:

<input type="text" class="datepicker_goal" data-provide="datepicker" value="Period">

$('.modal-body input[data-provide="datepicker"]').datepicker();

But I have a modal window, on activation another form is created and a tag is added:

<input type="text" class="datepicker_goal_modal" data-provide="datepicker_modal" value="Period">

$('.modal-body input[data-provide="datepicker_modal"]').datepicker();

But in the second option, the datepicker is not activated and the calendar is not visible. Moreover, something conflicts, the modal window closes.
Tell me what I did wrong and how to fix it? How to display calendar in all modal form fields?

Answer 1

Try this

<input type="text" class="datepicker_goal" data-provide="datepicker" value="Period">

$('.modal-body input').datepicker();

Answer 2

Hang the initialization of the datepicker on the appearance event of the modal window.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

You can look for bootstrap script events here getbootstrap.com/javascript/, show.bs.modal I don’t remember before or after the window appears