Bdtjtk

I'm using jQuery datepicker, when i add dynamic fields, datepicker is not working on dynamically added fields...

Thanks In Advance.

My HTML Date Type Field:

<td><input type="text" name="myDob" class="form-control form-control-sm datepicker" placeholder="Date of Birth: "></td>

My DatePicker jQuery:

// We don't want the val method to include placehoder value, so removing it here.

var $valFn = $.fn.val;

$.fn.extend({

  val: function() {

    var valCatch = $valFn.apply(this, arguments);

    var placeholder = $(this).attr("placeholder");



    // To check this val is called to set value and the val is for datePicker element 

    if (!arguments.length && this.hasClass('hasDatepicker')) {

      if (valCatch.indexOf(placeholder) != -1) {

        return valCatch.replace(placeholder, "");

      }

    }

    return valCatch;

  }

});



// Insert placeholder as prefix in the value, when user makes a change.

$(".datepicker").datepicker({

  onSelect: function(arg) {

    $(this).val($(this).attr("placeholder") + arg);

  }

});

Here is my Dynamic Add Fields jQuery:

$(document).ready(function() {

  //group add limit

  var maxGroup = 10;



  //add more fields group

  $(".addMore").click(function() {

    if ($('body').find('.fieldGroup').length < maxGroup) {

      var fieldHTML = '<table class="table table-bordered fieldGroup">' + $(".fieldGroupCopy").html() + '</table>';

      $('body').find('.fieldGroup:last').after(fieldHTML);

    } else {

      alert('Maximum ' + maxGroup + ' groups are allowed.');

    }

  });



  //remove fields group

  $("body").on("click", ".remove", function() {

    $(this).parents(".fieldGroup").remove();

  });

});

Updated Image:

This is a popular question on stackoverflow... In short if your inputs comes in the DOM after the page has load you had to use event delegation pattern to initialize all the datepickers. A popular trick is to listen when the document has focus.

$( document ).on( "focus", ".datepicker:not(.hasDatepicker)", function() {

   var self = this;

   $(self).datepicker({



     // Your code ....



   });

});

working demo

When you initialize a plugin:

$(".datepicker").datepicker({

    //...

});

This only initializes it on the elements matched at that moment. Matching elements added in the future will need to be initialized after they're added. Note that you'll probably want to more specifically identify the added elements rather than perform a global re-initialization of the plugin on all .datepicker elements.

The question then becomes, how can you identify specifically your newly added elements? For example, are they specifically in a new containing element to which you already have a reference? If so, you can use that to narrow your selection:

$(".datepicker", someContainingElement).datepicker({

    //...

});

Or perhaps the newly added elements are given a specific class which is then removed solely for the purpose of identifying them?:

$(".newdatepicker").datepicker({

    //...

}).removeClass("newdatepicker");

There are a variety of options regarding how you would identify your elements, but the main point is that you need to initialize the plugin on any new elements added to the DOM.