Я не могу получить функцию выбора даты всякий раз, когда создается новое поле, пожалуйста, какие настройки необходимы, чтобы это исправить?

У меня нет знаний о javascript, я сейчас создаю это на фляге

В основном то, что я пытаюсь получить, это: при нажатии на кнопку добавления новой позиции создается новое поле, я хочу, чтобы это поле функционировало точно так же, как работает исходное поле (т.е. должны отображаться средства выбора даты)

$(document).ready(function() {
  var max_input_fields = 10;
  var add_input = $('.add-input');
  var input_wrapper = $('.input-wrapper');
  var new_input = '<div class="col-lg-12  "><br><div class="col-md-12 select-pane "><label class="labels">Department</label><select \
          class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter">\
          <option>finace</option><option>music</option></select></div><div class="col-md-12"><label class="labels">Position Held \
            </label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div>\
        <div class="col-lg-12"><label class="labels">From</label><input type="text" name="From" id="From" class="form-control" \
          placeholder="From Date" /></div><div class="col-lg-12"><label class="labels">To</label><input type="text" name="to" \
            id="to" class="form-control" placeholder="To Date" /></div><a href="javascript:void(0);" class="col-lg-12 remove-input" title="Remove input"><button type="button" name="position_button">Remove</button></a></div>';

  var add_input_count = 1;
  $(add_input).click(function() {
    if (add_input_count < max_input_fields) {
      add_input_count++;
      $(input_wrapper).append(new_input);
    }
  });
  $(input_wrapper).on('click', '.remove-input', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    add_input_count--;
  });
});
$(document).ready(function() {
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $(function() {
    $("#From").datepicker();
    $("#to").datepicker();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="input-wrapper">
  <div class="p-3 py-5">
    <div class="d-flex justify-content-between align-items-center experience">
      <div class="col-lg-12  ">
        <h5>Add Previous Positions Held</h5>
        <br>
        <div class="col-md-12 select-pane "><label class="labels">Department</label>
          <select class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter">
            <option>finace</option>
            <option>music</option>

          </select>
        </div>


        <div class="col-md-12"><label class="labels">Position Held</label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div>
        <div class="col-lg-12">
          <label class="labels">From</label>
          <input type="text" name="From" id="From" class="form-control" placeholder="From Date" />
        </div>
        <div class="col-lg-12">
          <label class="labels">To</label>
          <input type="text" name="to" id="to" class="form-control" placeholder="To Date" />
          <br>
          <a href="javascript:void(0);" class="col-lg-12 add-input" title="Add input"><button type="button" name="position_button">Add more positions</button></a>
        </div>
      </div>
    </div>
  </div>
</div>
0
akinbode 16 Сен 2021 в 15:55

2 ответа

Лучший ответ

Идентификатор в html должен быть уникальным, если вы хотите, чтобы несколько уникальных элементов использовали класс.

Ниже приведено возможное решение, реализованное путем изменения идентификатора новых входных блоков.

var id_index = 2; //Id for from and to

$(document).ready(function() {

    var max_input_fields = 10;
    var add_input = $('.add-input');
    var input_wrapper = $('.input-wrapper');

    var add_input_count = 1;

    $(add_input).click(function() {
        if (add_input_count < max_input_fields) {
            
            //Moved so that the from and two id can change
            
            var new_input = '<div class="col-lg-12"><br><div class="col-md-12 select-pane "><label class="labels">Department</label><select \
                  class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter">\
                  <option>finace</option><option>music</option></select></div><div class="col-md-12"><label class="labels">Position Held \
                    </label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div>\
                <div class="col-lg-12"><label class="labels">From</label><input type="text" name="From" id="From' + id_index + '" class="form-control" \
                  placeholder="From Date" /></div><div class="col-lg-12"><label class="labels">To</label><input type="text" name="to" \
                    id="to' + id_index + '" class="form-control" placeholder="To Date" /></div><a href="javascript:void(0);" class="col-lg-12 remove-input" title="Remove input"><button type="button" name="position_button">Remove</button></a></div>';

            
            add_input_count++;
                            
            $(input_wrapper).append(new_input);
            
            $("#From" + id_index).datepicker(); //Apply datetime
            $("#to" + id_index).datepicker();
            
            id_index++; //Increment id 
        }
    });
  
    $(input_wrapper).on('click', '.remove-input', function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        add_input_count--;
    });
  
    //Removed $(document).ready as its redundant
    
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });
  
    $("#From").datepicker();
    $("#to").datepicker();

});
0
Chris 16 Сен 2021 в 15:36
$(document).ready(function() {
  var max_input_fields = 10;
  var add_input = $('.add-input');
  var input_wrapper = $('.input-wrapper');
  var new_input = '<div class="col-lg-12  "><br><div class="col-md-12 select-pane "><label class="labels">Department</label><select \
          class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter">\
          <option>finace</option><option>music</option></select></div><div class="col-md-12"><label class="labels">Position Held \
            </label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div>\
        <div class="col-lg-12"><label class="labels">From</label><input type="text" name="From"  class="form-control datepicker" \
          placeholder="From Date" /></div><div class="col-lg-12"><label class="labels">To</label><input type="text" name="to" \
            class="form-control datepicker" placeholder="To Date" /></div><a href="javascript:void(0);" class="col-lg-12 remove-input" title="Remove input"><button type="button" name="position_button">Remove</button></a></div>';

  var add_input_count = 1;
  $(add_input).click(function() {
    if (add_input_count < max_input_fields) {
      add_input_count++;
      $(input_wrapper).append(new_input);
    }
  });
  $(input_wrapper).on('click', '.remove-input', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    add_input_count--;
  });
});
$(document).ready(function() {
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $(function() {
   $(document).on('click', '.datepicker', function(event){
      $(event.target).datepicker().datepicker("show");
   });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="input-wrapper">
  <div class="p-3 py-5">
    <div class="d-flex justify-content-between align-items-center experience">
      <div class="col-lg-12  ">
        <h5>Add Previous Positions Held</h5>
        <br>
        <div class="col-md-12 select-pane "><label class="labels">Department</label>
          <select class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter">
            <option>finace</option>
            <option>music</option>

          </select>
        </div>


        <div class="col-md-12"><label class="labels">Position Held</label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div>
        <div class="col-lg-12">
          <label class="labels">From</label>
          <input type="text" name="From"  class="form-control datepicker" placeholder="From Date" />
        </div>
        <div class="col-lg-12">
          <label class="labels">To</label>
          <input type="text" name="to"  class="form-control datepicker" placeholder="To Date" />
          <br>
          <a href="javascript:void(0);" class="col-lg-12 add-input" title="Add input"><button type="button" name="position_button">Add more positions</button></a>
        </div>
      </div>
    </div>
  </div>
</div>

Вы не можете повторно использовать один и тот же идентификатор в html-документе. Поэтому я удалил id = "From" и id = "to" из HTML

Поскольку вы создаете динамический элемент, jQuery не распознает его. Таким образом, щелчок фиксируется на уровне документа, а datepicker назначается элементу, который имеет класс datepicker. Вы можете найти имя класса, добавленное как class = "datepicker" в поля ввода от и до.

0
Alaksandar Jesus Gene 16 Сен 2021 в 15:36