Форум

Syomga · #1 (**permalink**) 26.02.2022, 09:06

Приветствую всех, прошу вас помочь разобраться.
Задача у меня следующая мне нужно инициализировать 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() но опять же ничего не происходит, ошибок в консоле нет.
Возможно я чего то не понимаю. Прошу помощи.

рони · #2 (**permalink**) 26.02.2022, 09:35

Syomga,
клонируйте элемент до инициализации и будет вам счатье.

Syomga · #3 (**permalink**) 26.02.2022, 10:19

Сообщение от рони

Syomga,
клонируйте элемент до инициализации и будет вам счатье.

Убрал инициализацию при загрузке странице HTML теперь 2 проблемы:
1. После загрузки страницы инпут без datepicker
2. При первом клонировании инициализируется datepicker на 2 инпута при следующем клонировании уже не инициализируется
Возможно я вас не правильно понял.

рони · #4 (**permalink**) 26.02.2022, 10:53

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>

рони · #5 (**permalink**) 26.02.2022, 11:34

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>

Syomga · #6 (**permalink**) 26.02.2022, 14:35

рони
Благодарю, ваш код выглядит лучше, моё удаление выглядело так):

function deleteElement()
    {
        var line = $('#line');
        var action = $('#action').find('.row');
        if(action.length > 1) {
            line.remove();
        }
    }

Спасибо за помощь.

Syomga · #7 (**permalink**) 26.02.2022, 14:40

$('.btn', line).click(_ => line.remove())

Интересна эта строка в click(_ =>) в скобках нижнее подчёркивание со стрелкой что означают?

рони · #8 (**permalink**) 26.02.2022, 15:04

Сообщение от Syomga

в скобках нижнее подчёркивание со стрелкой

стрелочная функция, вместо подчёркивания, можно использовать () или другой символ.

Форум

Справочник

Discord чат

Курсы javascript