Apply datepicker to a dynamic input with Jquery

Question

Apply datepicker to a dynamic input with Jquery

Navigation

#1 by (4 votes)

5

I have a form where multiple fields can be added with datepicker. However, when adding a new field to the form, the Jquery datepicker is not loaded.

This is the JS responsible for cloning and adding fields to the form:

$(document).ready(function () {

hideBtnDel();

function hideBtnDel() {
    if ($("#digitalCertificates .digitalCertificate").length <= 1) {
        $("#digitalCertificates .digitalCertificate .removeDigitalCertificate").addClass('disabled');
        $("#digitalCertificates .digitalCertificate .removeDigitalCertificate").prop('disabled', true);
    } else {
        $("#digitalCertificates .digitalCertificate .removeDigitalCertificate").removeClass('disabled');
        $("#digitalCertificates .digitalCertificate .removeDigitalCertificate").prop('disabled', false);
    }
    removeDigitalCertificate();
}

function removeDigitalCertificate() {
    $(".removeDigitalCertificate").unbind("click");
    $(".removeDigitalCertificate").bind("click", function () {
        $(this).parents('.digitalCertificate').remove();
        hideBtnDel();
    });
}

$("#addDigitalCertificate").click(function () {
    event.preventDefault();
    newDigitalCertificate = $("#digitalCertificates .digitalCertificate:first").clone();
    newDigitalCertificate.find("input[type='text']").val("");
    newDigitalCertificate.find("input[type=hidden]").val("");
    newDigitalCertificate.find("input[type='checkbox']").prop('checked', false);
    newDigitalCertificate.find("select").val("");
    newDigitalCertificate.insertAfter("#digitalCertificates .digitalCertificate:last");
    hideBtnDel();
});

Doing a search, I found this, which in theory should solve the problem, but it did not work, it even goes into the function, but the datepicker is not applied (I added it shortly after the '$ (document) .ready (function () {...} 'of the above block):

$(document).on('focus', '.datepicker', function () {
    console.log('teste');
    $(this).datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
        dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        nextText: 'Próximo',
        prevText: 'Anterior',
    });
});

Is there any other way to dynamically load this datepicker?

javascript jquery jquery-ui datepicker

asked by anonymous 03.09.2018 / 16:13

1 answer

What are the consequences of leaving the system without closing the tables? What is the purpose of the nextTick () method?

score 4 · Accepted Answer

After inserting the clone, remove the class hasDatepicker from input . This class is inserted by the Datepicker and when cloning the element with this class, Datepicker understands that it has already been applied to input , when in fact it was not.

Just insert this line after inserting the clone (after insertAfter ):

$("#digitalCertificates .digitalCertificate:last")
.removeClass("hasDatepicker");

Example:

$(document).ready(function () {
   $("#addDigitalCertificate").click(function (event) {
      event.preventDefault();
      newDigitalCertificate = $("#digitalCertificates .digitalCertificate:first").clone();
      newDigitalCertificate.insertAfter("#digitalCertificates .digitalCertificate:last");
      $("#digitalCertificates .digitalCertificate:last")
      .removeClass("hasDatepicker");
   });
   
   $(document).on('focus', '.datepicker', function () {
      $(this).datepicker({
      dateFormat: 'dd/mm/yy',
      dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
      dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
      dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
      monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
      monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
      nextText: 'Próximo',
      prevText: 'Anterior',
      });
   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divid="digitalCertificates">
   <input type="text" class="digitalCertificate datepicker">
</div>
<br>
<a href="#" id="addDigitalCertificate">Adicionar</a>

Another thing:

Include the event parameter in the event function:

$("#addDigitalCertificate").click(function (event) {...
                                              ↑

Without including the parameter, event.preventDefault(); will not work in Firefox, for example.