Datepicker在创建时无法使用javascript动态运行

Question

我正在制作一个页面，其中一种形式使用日期选择器，并且我会动态地进行创建。第一种形式工作正常，但添加新形式时，日期选择器不显示任何内容。这是我的代码和应用程​​序屏幕截图

这是JavaScript代码，我将其放在标题中

    var room2 = 1;
    function tambah_kegiatan() {
        room2++;
        var objTo = document.getElementById('tambah_kegiatan');
        var datepicker = document.getElementById('reservation2');
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "form-group removeclass"+room2);
        var rdiv = 'removeclass'+room2;
        divtest.innerHTML = '<div class="card-body"><div class="row"><div class="col-md-12"><div class="form-group "><label for="inputEstimatedBudget">Nama Agenda</label><input type="text" class="form-control" name="namaAgenda[]" placeholder="Nama Agenda" required></div></div><div class="col-md-6"><div class="form-group "><label for="inputEstimatedBudget">Tipe Kegiatan</label><select class="form-control select2bs4" style="width: 100%;" name="tipeKegiatan[]"> @foreach($agenda_kegiatan as $agenda_kegiatan2) <option value={{ $agenda_kegiatan2->id_agenda_kegiatan }}>{{ $agenda_kegiatan2->nama_kegiatan }} </option> @endforeach </select></div></div><div class="col-md-6"><div class="form-group "><label for="inputEstimatedBudget">Kode Kegiatan</label><input type="text" class="form-control" name="kodeKegiatan[]" placeholder="Kode Kegiatan" required></div></div><div class="col-md-6"><div class="form-group"><label for="inputDescription">Waktu Penelitian</label><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input type="text" class="form-control float-right" id="reservation2" name="reservation2[]"></div></div></div><div class="form-group "><label class="form-control-label text-muted" style="opacity: 0;">Tambah</label><div class="input-group-btn"><button class="btn btn-success" type="button"  onclick="tambah_kegiatan();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"> + </span> </button></div></div><div class="form-group"><label class="form-control-label text-muted" style="opacity: 0;">Kurang</label><div class="input-group-btn"><button class="btn btn-danger" type="button" onclick="remove_tambah_kegiatan('+room2+');"><span class="glyphicon glyphicon-plus" aria-hidden="true"> - </span></button></div></div></div></div>';

        objTo.appendChild(divtest);
    }
    function remove_tambah_kegiatan(rid) {
        $('.removeclass'+rid).remove();
    }

这里是PHP代码

       <div class="col-md-12">
          <div class="card card-secondary">
              <div class="card-header">
                  <h3 class="card-title">Agenda Penelitian</h3>

                  <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                      <i class="fas fa-minus"></i></button>
                  </div>
              </div>
              <div class="card-body">
                  <div class="row">
                      <div class="col-md-12">
                          <div class="form-group ">
                              <label for="inputEstimatedBudget">Nama Agenda</label>
                              <input type="text" class="form-control" name="namaAgenda[]" placeholder="Nama Agenda" required>
                          </div>
                      </div>
                      <div class="col-md-6">
                          <div class="form-group ">
                              <label for="inputEstimatedBudget">Tipe Kegiatan</label>
                              <select class="form-control select2bs4" style="width: 100%;" name="tipeKegiatan[]">
                                  @foreach($agenda_kegiatan as $agenda_kegiatan)
                                      <option value={{ $agenda_kegiatan->id_agenda_kegiatan }}>{{ $agenda_kegiatan->nama_kegiatan }} </option>
                                  @endforeach
                              </select>
                          </div>
                      </div>
                      <div class="col-md-6">
                          <div class="form-group ">
                              <label for="inputEstimatedBudget">Kode Kegiatan</label>
                              <input type="text" class="form-control" name="kodeKegiatan[]" placeholder="Kode Kegiatan" required>
                          </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="inputDescription">Waktu Penelitian</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <span class="input-group-text">
                              <i class="far fa-calendar-alt"></i>
                              </span>
                            </div>
                            <input type="text" class="form-control float-right" id="reservation2" name="reservation2[]">
                          </div>
                        </div>
                      </div>
                      <div class="form-group ">
                          <label class="form-control-label text-muted" style="opacity: 0;">Tambah</label>
                          <div class="input-group-btn">
                              <button class="btn btn-success" type="button"  onclick="tambah_kegiatan();"> 
                                  <span class="glyphicon glyphicon-plus" aria-hidden="true"> + </span> 
                              </button>
                          </div>
                      </div>
                      <!-- <div class="form-group">
                          <label class="form-control-label text-muted" style="opacity: 0;">Kurang</label>
                          <div class="input-group-btn">
                              <button class="btn btn-danger" type="button" onclick="remove_tambah_kegiatan('+room2+');">
                                  <span class="glyphicon glyphicon-plus" aria-hidden="true"> - </span>
                              </button>
                          </div>
                      </div> -->
                  </div>
              </div>

              <div id="tambah_kegiatan">

            </div>
          </div>
      </div>

这是Datepicker代码，我将其放在页脚中

<script>
var startDate;
var endDate;

$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
    theme: 'bootstrap4'
    })

    //Datemask dd/mm/yyyy
    $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
    //Datemask2 mm/dd/yyyy
    $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
    //Money Euro
    $('[data-mask]').inputmask()

    //Date range picker
    $('#reservation').daterangepicker()
    //Date range picker
    $('#reservation2').daterangepicker()
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    locale: {
        format: 'MM/DD/YYYY hh:mm A'
    }
    })
    //Date range as a button
    $('#daterange-btn').daterangepicker(
    {
        ranges   : {
        'Today'       : [moment(), moment()],
        'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month'  : [moment().startOf('month'), moment().endOf('month')],
        'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        startDate: moment().subtract(29, 'days'),
        endDate  : moment()
    },
    function (start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        startDate = start;
        endDate = end; 
    }
    )
    $('#submitBtn').click(function(){
      console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
    });
    //Timepicker
    $('#timepicker').datetimepicker({
    format: 'LT'
    })

    //Bootstrap Duallistbox
    $('.duallistbox').bootstrapDualListbox()

    //Colorpicker
    $('.my-colorpicker1').colorpicker()
    //color picker with addon
    $('.my-colorpicker2').colorpicker()

    $('.my-colorpicker2').on('colorpickerChange', function(event) {
    $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
    });

    $("input[data-bootstrap-switch]").each(function(){
    $(this).bootstrapSwitch('state', $(this).prop('checked'));
    });
})

这里是屏幕快照第一个表格正常工作这是屏幕截图的第二种形式无法正常工作你们能给我一些解决问题的建议吗？

Answer 1

这可能是因为您在运行JQuery代码进行初始化之后动态创建日期选择器。您可以将用于初始化datepicker的代码放入javascript函数中，并在动态创建日期选择器之后调用它进行加载