How to have the datepicker work for the dynamically created textboxes

问题

I have an 'add' button that creates some dynamic textfields. The default start date and end date textfields displays the datepicker. However, the dynamically created textboxes are not displaying the datepicker. Any help would be appreciated.

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

回答1:

You can quite easily add a datepicker to the newly-created elements

N.B. In this example I have taken the liberty of adding a "datepicker" class to your text boxes, to make the code simpler, so make sure you alter your HTML as well. I have also reduced the amount of repetition in your code by making the datepicker options into a re-usable object:

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
  });
});

You can also visit http://jsfiddle.net/yqr69eca/17/ to see a working demonstration of this code.

回答2:

write your function like this

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

来源：https://stackoverflow.com/questions/51020609/how-to-have-the-datepicker-work-for-the-dynamically-created-textboxes

标签

javascript

php

jquery

jquery-ui-datepicker