У меня есть функция JS, которая создает новый HTML-код, когда я нажимаю на кнопку, и я пытаюсь сделать так, чтобы при нажатии на кнопку создавался новый инструмент выбора даты.Здесь используется указатель даты , который я использую.
Каждый раз, когда моя функция создает новый вход, она добавляет число к конечному имени.Это по причинам, связанным с базой данных.
Так что в данный момент в моем HTML-формате имя для ввода DropOffDate1 , но когда я нажимаю на кнопку и создаю новый вход, имя DropOffDate2 , затем я нажимаюснова и будет DropOffDate3 и так далее.В основном автоинкремент ввода имени.
Причина, по которой я объясняю это, заключается в том, что функция Datapicker ищет имя ввода DropOffDate1 .
('input [name = "DropOffDate1"]')
Однако, поскольку при создании нового ввода имя меняется на DropOffDate2, функция больше не может найтиимя входа.
Надеюсь, это имеет смысл.
У меня также есть ощущение, что он не работает из-за того, что код выбора даты выполняется при загрузке страницы, и как только он загружен, ничто не говорит ему о том, чтобы снова извинить код.
codpen
var room = 1;
function add_fields() {
room++;
var objTo = document.getElementById("room_fileds");
var divtest = document.createElement("div");
divtest.innerHTML =
'<div class="control-group">' +
"<label>Date</label>" +
'<div class="controls">' +
'<input type="text" name="DropOffDate' +
room +
' " class="input-border" />' +
"</div>" +
"</div>";
objTo.appendChild(divtest);
}
$(function() {
$('input[name="DropOffDate1"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js">
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js">
</script>
<link rel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<label>Date</label>
<input type="text" name="DropOffDate1" class="input-border" />
<div id="text">
<input type="button" id="more_fields" class="btn mt-3 mb-2" onclick="add_fields();" value="Add More" />
<div id="room_fileds">
</div>
</div>
Я понимаю, что для работы средства выбора даты необходимо получить ввод с именем