laravel - datetimepicker not working in loop-CodePudding

I show data in table with foreach and for each data I open a modal in the table. inside this model there is a datetimepicker. When I open the first modal, the datetimepicker works perfectly, but when close that modal and open another modal, the datetimepciker doesn't work. Where am I missing?

Button to trigger modal

<a data-toggle="modal" data-target="#modalCart{{$result->orderId}}"  >{{$result->orderNumber}}</a>

Modal

.
.
.
<div  id="accordion4">
<form action="{{route('create-label')}}" method="post">
    @csrf
    <label  for="WeightLbs">Ship Date</label>
    <div  id="reservationdate"  data-target-input="nearest">
        <input type="text" name="shipDate" id="shipDate"  data-target="#reservationdate">
        <div  data-target="#reservationdate" data-toggle="datetimepicker">
            <div ><i ></i></div>
        </div>
    </div>
        <div  >
        <button type="submit" >Submit</button>
    </div>                          
</form>
</div>
.
.
.

jQuery Script

$(function () {
  $('#reservationdate').datetimepicker({
  format: 'YYYY/MM/DD',
  minDate: new Date(),
  defaultDate: new Date(),
  });
})

CodePudding user response：

You can try to add a datepicker class in your div and loop through it with an .each callback :

Your modal :

<div  data-target="#reservationdate" data-toggle="datetimepicker">
    <div ><i ></i></div>
</div>

jQuery script :

$(".datepicker").each(function(){
    $(this).datetimepicker();
});

CodePudding user response：

You need to identify each date picker as a different element and which you can denote using flexible id to the element like:

. reservationdate_1 or reservationdate1
. reservationdate_2 or reservationdate1
. reservationdate_3 or reservationdate3

and bind the date picker to trigger accordingly.Keep the same class for the element i.e. datepicker as it will define the behaviour of element.

Right now you are using loop and using same id so it will not pick the other elements and will only refer to first element with id.Try it with this solution and see if you can get the result you want to achieve. You just have to render multiple elements with different id to identify them as different elements.

Have a great day.Hope this helps.