1

Fiz um form com um campo "data" e usei o jQuery Datepicker pra inserir a data. Fiz também uma função para adicionar mais campos iguais aos já existentes no form:

inserir a descrição da imagem aqui

Código que insere novos campos:

$('#add_field').click (function(e) {
            //e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {
                $('#listas').append('\
                    <div class="row">\
                        <div class="form-group col-md-4">\
                            <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                                <option value="">Selecione</option>\
                                @if(count($tests) > 0)\
                                    @foreach($tests as $item)\
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>\
                                    @endforeach\
                                @endif\
                            </select>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                        </div>\
                        <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
                    </div>');
                x++;
            }
        });

Alguém tem uma ideia do porque não funciona o Datepicker nos campos adicionados?

1 Resposta 1

2

Após o .append inicialize novamente o componente com:

$(".date").datepicker();

Assim irá aplicar o plugin aos novos campos que foram adicionados.

Veja:

$(function(){

   $(".date").datepicker();

   var x = 1;
   var campos_max = 5;
   $('#add_field').click (function(e) {
      //e.preventDefault();     //prevenir novos clicks
      if (x < campos_max) {
          $('#listas').append('\
              <div class="row">\
                  <div class="form-group col-md-4">\
                      <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                          <option value="">Selecione</option>\
                      </select>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                  </div>\
                  <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
              </div>');
          x++;
         $(".date").datepicker();
      }
      
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="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>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div id="listas">
  <div class="row">
      <div class="form-group col-md-4">
          <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>
              <option value="">Selecione</option>
          </select>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>
      </div>
      <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>
  </div>
</div>
<button id="add_field">Adicionar</button>

1
  • cara, q fácil e eu quebrando a cabeça. Valeu Sam Commented 20/05/2019 às 23:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .