如何显示动态日期选择器

Question

我有一个输入，其中 name="datepicker" 作为标识符。这是在 while 循环内部生成动态数据。问题是，日期选择器仅适用于第一个输入。我该如何纠正这个问题？.

这是我的刀片

<div class="row">
    @foreach ($kelas as $x)
        <div class="col-6">
            <div class="card">
                @include('flashmessage')
                <div class="card-body">
                    <p style="font-weight: 800;"> Nama Kelas : {{ $x->nama_kelas }} - {{ $x->matkul }} </p>
                    <p style="font-weight: 800;"> Nama Modul : {{ $x->modul }} </p>
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">Tanggal Praktek</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="dd M, yyyy" data-date-format="dd M, yyyy" data-date-container='#datepicker1' data-provide="datepicker" id="datepicker{{$x->id_modulkelas}}">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div><!-- input-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

因此它将使用日期选择器输入创建与 $kelas 中的数据一样多的行。 这是我的脚本

    <script>
    $(function() {
        $("#datepicker{{ $x->id_modulkelas }}").datepicker();
    });
</script>

现在日期选择器仅出现在第一行输入中，但是当我单击另一个输入时，日期选择器不想出现。如何使日期选择器出现在所有行输入中？

Answer 1

您似乎对所有日期选择器输入使用相同的 ID，这可能会导致问题。 ID 应该是唯一的。尝试像这样修改你的刀片文件：

<div class="row">
    @foreach ($kelas as $x)
        <div class="col-6">
            <div class="card">
                @include('flashmessage')
                <div class="card-body">
                    <p style="font-weight: 800;"> Nama Kelas : {{ $x->nama_kelas }} - {{ $x->matkul }} </p>
                    <p style="font-weight: 800;"> Nama Modul : {{ $x->modul }} </p>
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">Tanggal Praktek</label>
                            <div class="input-group">
                                <input type="text" class="form-control datepicker" placeholder="dd M, yyyy" data-date-format="dd M, yyyy" data-date-container='#datepicker1' data-provide="datepicker">
                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div><!-- input-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

你的脚本是这样的：

<script>
    $(function() {
        $(".datepicker").datepicker();
    });
</script>