title: How to activate bootstrap datepicker in a table?
body: <p>I have a script that apppend a row into a table. Each row has two datepicker textboxes for <code>start_date</code> and <code>end_date</code>.</p>
  
  <pre><code>var rows = "";
  $("#btn_add").on('click', function(i){
      var ct_row  = $("#t_activity tr").not('.header').length+1;
  
      rows     = "&lt;td class='text-center'&gt;&lt;div class='date_set date_2'&gt;";
          rows    += "&lt;input type='text' class='form-control date dt_set' placeholder='start' onCopy='return false'";
          rows    += "  onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' /&gt;";
      rows    += "&lt;/div&gt;&lt;/td&gt;";
  
      rows    += "&lt;td&gt;&lt;div class='date_end date_2'&gt;";
          rows    += "&lt;input type='text' class='form-control date dt_end' placeholder='Finish' onCopy='return false'";
          rows    += "  onDrag='return false' onDrop='return false' onPaste='return false' onkeypress='return false' /&gt;";
      rows    += "&lt;/div&gt;&lt;/td&gt;";
  
      $("#t_activity").append("&lt;tr class='tr_content'&gt;"+rows+"&lt;/tr&gt;");
  });
  </code></pre>
  
  <p>If I put the <code>datepicker</code> script inside the <code>button click event after the append</code>, it's working but I need to process the <code>datepicker</code> outside the <code>button event</code>. This is the <code>datepicker</code> script: </p>
  
  <pre><code>//START
      $('.date_set .date').datepicker({
          startView           : 0,   
          forceParse          : true,
          autoclose           : true,
          format              : "dd/mm/yyyy",
          todayHighlight      : true,
      }).on('changeDate', function(selected){
          var minDate = new Date(selected.date.valueOf());
          $('.date_end .date').datepicker('setStartDate', minDate);
      }); 
  
      $('.date_end .date').datepicker({
          startView           : 0,
          todayBtn            : "linked",
          forceParse          : true,
          autoclose           : true,     
          format              : "dd/mm/yyyy",
          todayHighlight      : true,
      }).on('changeDate', function (selected) {
          $('.date_set .date').datepicker('setEndDate', selected.date);
      }); 
  //END
  </code></pre>
  
  <p>I've tried changing the script like this but the it's failed to show the <code>datepicker</code>:</p>
  
  <pre><code>$("#t_activity tbody").on('click','.date_set .date',function(){ 
      $(this).closest('tr').find('div .dt_set').datepicker({
          startView           : 0,   
          forceParse          : true,
          autoclose           : true,
          format              : "dd/mm/yyyy",
          todayHighlight      : true,
          }).on('changeDate', function(selected){
              var minDate = new Date(selected.date.valueOf());
              $('.date_end .date').datepicker('setStartDate', minDate);
      }); 
  });
  </code></pre>