Tenho um formulário onde pode ser adicionados vários campos com datepicker. Porém, ao adicionar um novo campo ao formulário, o datepicker do Jquery não é carregado.
Este é o JS responsável por clonar e adicionar os campos ao formulário:
$(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();
});
Fazendo uma pesquisa, eu encontrei isso, que na teoria deveria resolver o problema, mas não funcionou, ele até entra na função, mas o datepicker não é aplicado (adicionei ele logo após o '$(document).ready(function() {...}' do bloco acima):
$(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',
});
});
Tem alguma outra forma de carregar esse datepicker dinâmicamente?
$("#digitalCertificates").datepicker()
onde é criado o clone.datepicker
nos inputs onde vc quer que seja aplicado:<input class="datepicker"....>
. Se já tiver outras classes, basta incluir ela:<input class="datepicker outraClasse MaisOutra"...>
. Quando vc focar o input, automaticamente o datepicker será aplicado.