addrow datepicker没有出现，如何解决
The addrow datepicker does not appear, how to solve it
如何解决
addrow datepicker 没有出现
I am already doing an addrow using the datepicker, why does the datepicker not appear when adding rows
因此在第一行运行日期选择器，但如果您单击添加按钮，第二行等日期选择器将不起作用。
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
this is html
<table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
<tbody class="input_fields_wrap_jadwal">
<tr align="center">
<th>struktur rencana kegiatan </th>
<th width="250px">Tanggal Mulai</th>
<th width="250px">Tanggal Selesai</th>
<th><button class="add_field_button_jadwal"
title="Tambah Jadwal"><i class="fas fa-plus"></i></button>
</th>
</tr>
<tr>
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
<td align="center">
<input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td align="center">
<input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td></td>
</tr>
</tbody>
</table>
this is javascript
添加行时，日期选择器未激活
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker({
dateFormat: "dd-mm-yy"
});
});
</script>
<script>
$(document).ready(function () {
var max_fields_jadwan = 100; //maximum input boxes allowed
//=================================================================================================//
//input jadwal
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '{{$paket[0]->rencana_awal}}';
var akhir = '{{$paket[0]->rencana_akhir}}';
var tanggal_akhir = '{{cal_days_in_month(CAL_GREGORIAN, date('m', strtotime($paket[0]->rencana_akhir)) , date('Y', strtotime($paket[0]->rencana_akhir)))}}';
var x = 1; //initlal text box count
$(add_button_jadwal).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields_jadwan) { //max input box allowed
x++; //text box increment
$(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal">\
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>\
<td align="center">\
<input type="text" name="tanggal_mulai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\
</td>\
<td align="center">\
<input type="text" name="tanggal_selesai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\
</td>\
<td>\
<a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a>\
</td>\
</tr>'); // add input boxes.
}
});
$(wrapper_jadwal).on("click", ".remove_field_jadwal", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('td').parent('tr').remove();
x--;
})
});
</script>
<script>
let form = document.forms["user-registration-form"];
// Required Field validation
function showValidityCue(input) {
let isValid = input.checkValidity();
if (input.type === "text" || input.type === "number" || input.pattern) {
const regPattern = new RegExp(input.pattern ? input.pattern : "^[a-zA-Z0-9]+");
isValid = regPattern.test(input.value);
}
if (isValid) {
input.style.borderColor = "green";
input.parentNode.classList.add("validBlock");
input.parentNode.classList.remove("invalidBlock");
input.setCustomValidity("");
} else {
input.style.borderColor = "red";
input.parentNode.classList.remove("validBlock");
input.parentNode.classList.add("invalidBlock");
input.setCustomValidity(input.title);
}
}
</script>
帮我解决一下
您需要为添加的行初始化 .datepicker。因此，为此只需使用 $(".input_fields_wrap_jadwal tr:last .datepicker").. 这将最后添加 tr，然后在该 tr 中初始化您的日期选择器。
演示代码 :
$(function() {
$(".datepicker").datepicker({
dateFormat: "dd-mm-yy"
});
});
var max_fields_jadwan = 100;
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '1';
var akhir = 'aomwhtnr';
var tanggal_akhir = '2-02-2020';
var x = 1; //initlal text box count
$(add_button_jadwal).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields_jadwan) { //max input box allowed
x++; //text box increment
$(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal">\<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>\<td align="center">\ <input type="text" name="tanggal_mulai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\ </td>\<td align="center">\ <input type="text" name="tanggal_selesai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\</td>\ <td>\<a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a>\</td>\</tr>');
//get last tr added > .datepicker initialize them
$(".input_fields_wrap_jadwal tr:last .datepicker").datepicker({
dateFormat: "dd-mm-yy"
});
}
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
<tbody class="input_fields_wrap_jadwal">
<tr align="center">
<th>struktur rencana kegiatan </th>
<th width="250px">Tanggal Mulai</th>
<th width="250px">Tanggal Selesai</th>
<th><button class="add_field_button_jadwal" title="Tambah Jadwal"><i class="fas fa-plus">+</i></button>
</th>
</tr>
<tr>
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
<td align="center">
<input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td align="center">
<input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td></td>
</tr>
</tbody>
</table>
如何解决
addrow datepicker 没有出现
I am already doing an addrow using the datepicker, why does the datepicker not appear when adding rows
因此在第一行运行日期选择器，但如果您单击添加按钮，第二行等日期选择器将不起作用。
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
this is html
<table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
<tbody class="input_fields_wrap_jadwal">
<tr align="center">
<th>struktur rencana kegiatan </th>
<th width="250px">Tanggal Mulai</th>
<th width="250px">Tanggal Selesai</th>
<th><button class="add_field_button_jadwal"
title="Tambah Jadwal"><i class="fas fa-plus"></i></button>
</th>
</tr>
<tr>
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
<td align="center">
<input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td align="center">
<input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td></td>
</tr>
</tbody>
</table>
this is javascript
添加行时，日期选择器未激活
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$( ".datepicker" ).datepicker({
dateFormat: "dd-mm-yy"
});
});
</script>
<script>
$(document).ready(function () {
var max_fields_jadwan = 100; //maximum input boxes allowed
//=================================================================================================//
//input jadwal
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '{{$paket[0]->rencana_awal}}';
var akhir = '{{$paket[0]->rencana_akhir}}';
var tanggal_akhir = '{{cal_days_in_month(CAL_GREGORIAN, date('m', strtotime($paket[0]->rencana_akhir)) , date('Y', strtotime($paket[0]->rencana_akhir)))}}';
var x = 1; //initlal text box count
$(add_button_jadwal).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields_jadwan) { //max input box allowed
x++; //text box increment
$(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal">\
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>\
<td align="center">\
<input type="text" name="tanggal_mulai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\
</td>\
<td align="center">\
<input type="text" name="tanggal_selesai[]" min="'+awal+'-01" max="'+akhir+'-'+tanggal_akhir+'" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\
</td>\
<td>\
<a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a>\
</td>\
</tr>'); // add input boxes.
}
});
$(wrapper_jadwal).on("click", ".remove_field_jadwal", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('td').parent('tr').remove();
x--;
})
});
</script>
<script>
let form = document.forms["user-registration-form"];
// Required Field validation
function showValidityCue(input) {
let isValid = input.checkValidity();
if (input.type === "text" || input.type === "number" || input.pattern) {
const regPattern = new RegExp(input.pattern ? input.pattern : "^[a-zA-Z0-9]+");
isValid = regPattern.test(input.value);
}
if (isValid) {
input.style.borderColor = "green";
input.parentNode.classList.add("validBlock");
input.parentNode.classList.remove("invalidBlock");
input.setCustomValidity("");
} else {
input.style.borderColor = "red";
input.parentNode.classList.remove("validBlock");
input.parentNode.classList.add("invalidBlock");
input.setCustomValidity(input.title);
}
}
</script>
帮我解决一下
您需要为添加的行初始化 .datepicker。因此，为此只需使用 $(".input_fields_wrap_jadwal tr:last .datepicker").. 这将最后添加 tr，然后在该 tr 中初始化您的日期选择器。
演示代码 :
$(function() {
$(".datepicker").datepicker({
dateFormat: "dd-mm-yy"
});
});
var max_fields_jadwan = 100;
var wrapper_jadwal = $(".input_fields_wrap_jadwal"); //Fields wrapper
var add_button_jadwal = $(".add_field_button_jadwal"); //Add button ID
var awal = '1';
var akhir = 'aomwhtnr';
var tanggal_akhir = '2-02-2020';
var x = 1; //initlal text box count
$(add_button_jadwal).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields_jadwan) { //max input box allowed
x++; //text box increment
$(wrapper_jadwal).append('<tr class="input_fields_wrap_jadwal">\<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>\<td align="center">\ <input type="text" name="tanggal_mulai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class="form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\ </td>\<td align="center">\ <input type="text" name="tanggal_selesai[]" min="' + awal + '-01" max="' + akhir + '-' + tanggal_akhir + '" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>\</td>\ <td>\<a href="#" class="remove_field_jadwal" title="Hapus"><i class="fas fa-trash-alt"></i></a>\</td>\</tr>');
//get last tr added > .datepicker initialize them
$(".input_fields_wrap_jadwal tr:last .datepicker").datepicker({
dateFormat: "dd-mm-yy"
});
}
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table class="table mt-4" style="border:border-radius: 20px;background-color: #fafafa">
<tbody class="input_fields_wrap_jadwal">
<tr align="center">
<th>struktur rencana kegiatan </th>
<th width="250px">Tanggal Mulai</th>
<th width="250px">Tanggal Selesai</th>
<th><button class="add_field_button_jadwal" title="Tambah Jadwal"><i class="fas fa-plus">+</i></button>
</th>
</tr>
<tr>
<td> <input type="text" name="kegiatan[]" class=" form-control" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required></td>
<td align="center">
<input type="text" name="tanggal_mulai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td align="center">
<input type="text" name="tanggal_selesai[]" min="{{$p->rencana_awal}}-01" max="{{$p->rencana_akhir}}-{{$jumHari}}" value="" class=" form-control datepicker" oninput="showValidityCue(this)" onblur="showValidityCue(this)" required>
</td>
<td></td>
</tr>
</tbody>
</table>