javascript - Datepicker 在创建时不起作用,它动态使用 javascript
问题描述
我正在制作一个页面,其中一个表单使用日期选择器,我动态地制作它。第一个表单工作正常,但添加新表单时,日期选择器不显示任何内容。这是我的代码和应用程序截图
这是javascript代码,我把它放在Header
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'));
});
})
解决方案
这可能是因为您在运行 JQuery 代码进行初始化后动态创建日期选择器。您可以将 init datepicker 的代码放入 javascript 函数中,并在加载时和动态创建日期选择器后调用它
推荐阅读
- wordpress - 文件上传后自动删除
- node.js - nodejs express post请求中的请求正文为空
- dart - 为什么 "".leftPad ( 0 ) 产生与 "".leftPad ( 1 ) 相同的结果?
- c# - 将包添加到 .NET Core 应用程序时,Visual Studio 2017 不会自动安装依赖项
- xml - 在 VB.net 中使用 XMLReader 读取大型 XML 文件
- tfs - TFS 报告服务器:显示工作项是否从区域路径退回到区域路径的报告
- php - 如何使用 node.js 向使用 https-post 的 php 页面进行 POST 请求?
- azure - Azure DevOps 需要哪些权限才能发布 NPM 包
- pandas - 使用 Pyarrow 读取分区 Parquet 文件会占用太多内存
- excel - 有没有更简单/更好的方法来使用预定义的字典?