Блог

Главная - Вопросы по программированию - Средство выбора даты не отображается при создании нового поля [jquery]

Средство выбора даты не отображается при создании нового поля [jquery]

#javascript #html #jquery

Вопрос:

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

У меня нет знаний о javascript, в настоящее время я создаю это на flask

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

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

Ответ №1:

Идентификаторы в 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();

});

Комментарии:

1. хорошо отметил , что это сработало отлично, большое спасибо

Ответ №2:

 $(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» в полях » От » и » до » ввода

Метки: