日付ピッカーのIDを動的に追加する方法

Question

私はその1つのテキストボックスに2つの日付ピッカーとテキストarea.hereの日付ピッカーがid属性を使用して作業していますが、動的に追加された行は変更されません以下、この問題を解決する方法テキストボックス

<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> 
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> 
    <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script> 
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> 

<div class="container"> 
    <div class="row"> 
     <!-- form: --> 
     <section> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="page-header"> 
        <h2>Dynamic fields</h2> 
       </div> 

       <form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 
        <div class="form-group"> 
         <label class="col-lg-3 control-label">Textbox</label> 
         <div class="col-lg-5"> 
          <input class="form-control" type="text" name="textbox[]" placeholder="Textbox #1" /> 
         </div> 
         <div class="col-lg-4"> 
          <button type="button" class="btn btn-default btn-sm addButton" data-template="textbox">Add</button> 
         </div> 
        </div> 
        <div class="form-group hide" id="textboxTemplate"> 
         <div class="col-lg-offset-3 col-lg-5"> 
          <input class="form-control" type="text" /> 
         </div> 
         <div class="col-lg-4"> 
          <button type="button" class="btn btn-default btn-sm removeButton">Remove</button> 
         </div> 
        </div>    


        <div class="form-group"> 
         <div class="col-lg-offset-3 col-lg-3"> 
          <button type="submit" class="btn btn-primary">Submit</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </section> 
     <!-- :form --> 
    </div> 
</div> 

JS

$(document).ready(function() { 
     $('.addButton').on('click', function() { 
      var index = $(this).data('index'); 
      if (!index) { 
       index = 1; 
       $(this).data('index', 1); 
      } 
      index++; 
      $(this).data('index', index); 

      var template  = $(this).attr('data-template'), 
       $templateEle = $('#' + template + 'Template'), 
       $row   = $templateEle.clone().removeAttr('id').insertBefore($templateEle).removeClass('hide'), 
       $el   = $row.find('input').eq(0).attr('name', template + '[]'); 
      $('#defaultForm').bootstrapValidator('addField', $el); 

      // Set random value for checkbox and textbox 
      if ('checkbox' == $el.attr('type') || 'radio' == $el.attr('type')) { 
       $el.val('Choice #' + index) 
        .parent().find('span.lbl').html('Choice #' + index); 
      } else { 
       $el.attr('placeholder', 'Textbox #' + index); 
      } 

      $row.on('click', '.removeButton', function(e) { 
       $('#defaultForm').bootstrapValidator('removeField', $el); 
       $row.remove(); 
      }); 
     }); 

     $('#defaultForm') 
      .bootstrapValidator({ 
       message: 'This value is not valid', 
       feedbackIcons: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: { 
        'textbox[]': { 
         validators: { 
          notEmpty: { 
           message: 'The textbox field is required' 
          } 
         } 
        }, 
        'checkbox[]': { 
         validators: { 
          notEmpty: { 
           message: 'The checkbox field is required' 
          } 
         } 
        }, 
        'radio[]': { 
         validators: { 
          notEmpty: { 
           message: 'The radio field is required' 
          } 
         } 
        } 
       } 
      }) 
      .on('error.field.bv', function(e, data) { 
       //console.log('error.field.bv -->', data.element); 
      }) 
      .on('success.field.bv', function(e, data) { 
       //console.log('success.field.bv -->', data.element); 
      }) 
      .on('added.field.bv', function(e, data) { 
       //console.log('Added element -->', data.field, data.element); 
      }) 
      .on('removed.field.bv', function(e, data) { 
       //console.log('Removed element -->', data.field, data.element); 
      }); 
    }); 

Answer 1

<div class="input-group input-append date" id="fromdatePicker1"></div> 
<div class="input-group input-append date" id="fromdatePicker2"></div> 

のjQueryを使用して、サンプルコードである

// get the last DIV which ID starts with ^= "fromdatePicker" 
var $div = $('div[id^="fromdatePicker"]:last'); 

// Read the Number from that DIV's ID (i.e: 2 from "fromdatePicker2") 
// And increment that number by 1 
var num = parseInt($div.prop("id").match(/\d+/g), 10) +1; 

// Clone it and assign the new ID (i.e: from num 3 to ID "klon3") 
var $fromdatePicker = $div.clone().prop('id', 'fromdatePicker'+num); 

// >>> Append $fromdatePicker wherever you want 

日付範囲選択ツールを起動する

$('div[id="fromdatePicker^"]').daterangepicker(); 

または使用クラス代わり

$('.common-class-name').daterangepicker(); 

ライブデモ

http://jsbin.com/bekabegelo/edit?html,js,output