Как заставить DatePicker работать для динамически создаваемых текстовых полей - PullRequest
Новая
       8

Как заставить DatePicker работать для динамически создаваемых текстовых полей

0 голосов
/ 25 июня 2018

У меня есть кнопка «Добавить», которая создает динамические текстовые поля.В текстовых полях даты начала и окончания по умолчанию отображается средство выбора даты.Однако динамически созданные текстовые поля не отображают средство выбора даты.Любая помощь будет оценена. 

$(document).ready(function() {
  $('input[name="settings[start_date][]"]').datepicker({
    maxDate: constants.MAX_YEAR + '-12-31',
    changeYear: true,
    changeMonth: true,
    dateFormat: 'yy-mm-dd'
  });

  $('input[name="settings[end_date][]"]').datepicker({
    maxDate: constants.MAX_YEAR + '-12-31',
    changeYear: true,
    changeMonth: true,
    dateFormat: 'yy-mm-dd'
  });

  $('#container').on('click', '.remove', function() {
    $(this).parent().remove();
  });

  $('#add').on('click', function() {
    var row = $('div.addNew:first').clone();
    $('#container').append(row);
  });
});

<div id="container">
  <div class="addNew" ?>
    Start Date :
    <?=form_input('settings[start_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
    End Date :
    <?=form_input('settings[end_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
    <input type="button" class="remove" value="Remove" />
  </div>
  <input type="button" id="add" value="Add Periods" />
</div>

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Вы можете довольно легко добавить указатель даты к вновь созданным элементам

NB. В этом примере я позволил себе добавить класс datepicker в ваши текстовые поля, чтобы сделать код проще, поэтомуубедитесь, что вы также изменили свой HTML.Я также уменьшил количество повторений в вашем коде, превратив параметры выбора даты в повторно используемый объект:

HTML / PHP: 

<div id="container">
  <div class="addNew" ?>
    Start Date :
    <?=form_input('settings[start_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
    End Date :
    <?=form_input('settings[end_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
    <input type="button" class="remove" value="Remove" />
  </div>
  <input type="button" id="add" value="Add Periods" />
</div>

jQuery: 

//I have assumed this, just for the sake of an example:
var constants = {
  MAX_YEAR: "2020"
};

//re-usable set of options
var datePickerOptions = {
    maxDate: constants.MAX_YEAR + '-12-31',
    changeYear: true,
    changeMonth: true,
    dateFormat: 'yy-mm-dd'
  };

$(document).ready(function() {
  //set datepicker on all existing elements with "datepicker" class
  $('.datepicker').datepicker(datePickerOptions);

  $('#container').on('click', '.remove', function() {
    $(this).parent().remove();
  });

  $('#add').on('click', function() {
    var row = $('div.addNew:first').clone();
    $('#container').append(row);
    var pickers = row.find(".datepicker"); //find elements within the new row which have the "datepicker" class
    //since we cloned them, remove the "id" attributes and "hasDatepicker" class, both of which were added by jQueryUI, otherwise the datepicker will not initialise properly on these new elements   
    pickers.removeAttr("id");
    pickers.removeClass("hasDatepicker"); 
    pickers.datepicker(datePickerOptions); //add a datepicker to each new element
  });
});

Вы также можете посетить http://jsfiddle.net/yqr69eca/17/, чтобы увидеть рабочую демонстрацию этого кода.

0 голосов
/ 25 июня 2018

напишите свою функцию следующим образом 

$(document).on('click','#targetid',function(){
    /*Do something logically here*/
   // On a side note it will always work on dynamic,static elements
 });
...