CODEWITHSUNDEEP
laravel
322quick1
322quick1

Reputation: 143

laravel - datetimepicker not working in loop

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}}" class="orderNumber" >{{$result->orderNumber}}</a>

Modal

.
.
.
<div class="card-body collapse show" id="accordion4">
<form action="{{route('create-label')}}" method="post">
    @csrf
    <label class="control-label" for="WeightLbs">Ship Date</label>
    <div class="input-group date" id="reservationdate"  data-target-input="nearest">
        <input type="text" name="shipDate" id="shipDate" class="form-control datetimepicker-input inputs" data-target="#reservationdate">
        <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
        <div class="modal-footer mt-3" >
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>                          
</form>
</div>
.
.
.

jQuery Script

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

Upvotes: 1

Views: 247

Answers (2)

kshitij
kshitij

Reputation: 710

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.

Example for multiple ids:

@foreach($data as $key => $value)
 <input  id="reservationdate_{{$key}}"/>
@endforeach

Something like this

Upvotes: 2

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 1128

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

Your modal :

<div class="input-group-append datepicker" data-target="#reservationdate" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>

jQuery script :

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

Upvotes: 1

Related Questions