Инициализация datepicker jquery
Приветствую всех, прошу вас помочь разобраться.
Задача у меня следующая мне нужно инициализировать datepicker от jquery на склонированный input HTML:
<div id="action">
<div class="row" id="line" style="margin-bottom: 10px;">
<div class="col-md-5">
<input type="text" id="date" class="form-control date" placeholder="Дата" name="new_date[]">
</div>
<div class="col-md-5">
<input type="text" class="form-control" placeholder="Сумма" name="new_sum[]">
</div>
<div class="col-md-2">
<div class="btn-group">
<button type="button" class="btn btn-danger" id="del" onclick="deleteElement()">- Удалить</button>
</div>
</div>
</div>
</div>
JS
initDatepicker('#date')
function initDatepicker(id)
{
$(id).datepicker({
showOn: 'focus',
altFormat: "mm.dd.yy",
dateFormat: "mm.dd.yy",
});
}
function cloner()
{
$('#line').clone().appendTo('#action');
var new_date = $('.date');
new_date.each(function(index, value){
$(this).attr('id', 'date' + index);
initDatepicker('#date' + index);
});
}
Но проблема в том что datepicker инициализируется только на первом инпуте, как видите в функции cloner() я уже даю уникальные айдишники каждому инпуту и запускаю функцию initDatepicker() но опять же ничего не происходит, ошибок в консоле нет. Возможно я чего то не понимаю. Прошу помощи. |
Syomga,
клонируйте элемент до инициализации и будет вам счатье. |
Цитата:
1. После загрузки страницы инпут без datepicker 2. При первом клонировании инициализируется datepicker на 2 инпута при следующем клонировании уже не инициализируется Возможно я вас не правильно понял. |
Syomga,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
let clone = $('#line').clone();
initDatepicker('#date');
function initDatepicker(id) {
$(id).datepicker({
showOn: 'focus',
altFormat: "mm.dd.yy",
dateFormat: "mm.dd.yy",
});
}
function cloner() {
clone.clone().appendTo('#action');
let new_date = $('.date');
new_date.each(function(index, value) {
if ($(this).is('.hasDatepicker')) return;
$(this).attr('id', 'date' + index);
initDatepicker(value);
});
}
cloner()
cloner()
cloner()
});
</script>
</head>
<body>
<div id="action">
<div class="row" id="line" style="margin-bottom: 10px;">
<div class="col-md-5">
<input type="text" id="date" class="form-control date" placeholder="Дата" name="new_date[]">
</div>
<div class="col-md-5">
<input type="text" class="form-control" placeholder="Сумма" name="new_sum[]">
</div>
<div class="col-md-2">
<div class="btn-group">
<button type="button" class="btn btn-danger" id="del" onclick="deleteElement()">- Удалить</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
Syomga,
добавил удаление и клонирование (удаление первого запрещено, по желанию)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
let clone = $('#line').clone();
initDatepicker('#date');
$('#line .btn').remove();
function initDatepicker(id) {
$(id).datepicker({
showOn: 'focus',
altFormat: "mm.dd.yy",
dateFormat: "mm.dd.yy",
});
}
function deleteElement(line) {
$('.btn', line).click(_ => line.remove())
}
let num = 0;
function cloner() {
let line = clone.clone().appendTo('#action');
deleteElement(line);
let dateInput = $('.date', line).attr('id', `date${++num}`);
initDatepicker(dateInput);
}
$('#add').click(cloner);
});
</script>
</head>
<body>
<div id="action">
<div class="row" id="line" style="margin-bottom: 10px;">
<div class="col-md-5">
<input type="text" id="date" class="form-control date" placeholder="Дата" name="new_date[]">
</div>
<div class="col-md-5">
<input type="text" class="form-control" placeholder="Сумма" name="new_sum[]">
</div>
<div class="col-md-2">
<div class="btn-group">
<button type="button" class="btn btn-danger" id="del">- Удалить</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn" id="add">- Добавить</button>
</body>
</html>
|
рони
Благодарю, ваш код выглядит лучше, моё удаление выглядело так):
function deleteElement()
{
var line = $('#line');
var action = $('#action').find('.row');
if(action.length > 1) {
line.remove();
}
}
Спасибо за помощь. |
$('.btn', line).click(_ => line.remove())
Интересна эта строка в click(_ =>) в скобках нижнее подчёркивание со стрелкой что означают? |
Цитата:
|
| Часовой пояс GMT +3, время: 18:51. |