John Davidson

Message:

how to solve it

The addrow datepicker does not appear

I am already doing an addrow using the datepicker, why does the datepicker not appear when adding rows

So on the first row the datepicker runs, but if you click the add button, the second row and so on the datepicker doesn't work.

<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

When adding rows, the datepicker is not active

<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>

help me to solve it

---

My Answer:
To solve the issue of the datepicker not appearing on dynamically added rows, you need to initialize the datepicker for each new row that is added.

You can achieve this by calling the datepicker function inside the click event handler for adding new rows. Here's how you can modify your JavaScript code:

javascript
$(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
var newRow = $('\
\
\
\
\
\
\
\
\
\
\
');

$(wrapper_jadwal).append(newRow); // add input boxes.

// Initialize datepicker for the new row
newRow.find('.datepicker').datepicker({
dateFormat: "dd-mm-yy"
});
}
});


By initializing the datepicker for the new row inside the click event handler, the datepicker should now work for dynamically added rows as well.