Kartik datepicker extention not working on array input form

Question

I have a form field "dob[]" with array input like

<?php $form = ActiveForm::begin();
for($i=0;$i<= 3;$i++): 
 echo $form->field($model, 'dob[]')->widget(DatePicker::classname(), [
  'options' => ['placeholder' => 'Date Of Birth'],
  'type' => DatePicker::TYPE_INPUT,
  'pluginOptions' => [
      'format' => 'mm/dd/yyyy',
      'autoclose' => true,
  ]
 ]);
 endfor; ?>

 <div class="form-group">
<?= Html::button('Submit', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>

Datepicker working only on first "dob" field but rest of the field having only button format of datepicker but calendar not working.

Answer 1

This is because the javascript cannot determine the correct input fields, after the first one. Take a look in your source code. All widgets have properly the same id and/or name. You have to setup a unique ID for each of the generated widgets. By the way, it is always a good approach to name form data accordingly.

That is documented at the demo page.

The following should work:

<?php
$form = ActiveForm::begin();
    for ($i=0; $i < 3; $i++) {
        echo $form->field($model, 'date_end')->widget(DatePicker::classname(), [
            'options' => [
                'placeholder' => 'Date Of Birth',
                'name' => 'DOB' .$i,
                'id' => 'DOB-ID' . $i,
            ],
            'type' => DatePicker::TYPE_INPUT,
            'pluginOptions' => [
                'format' => 'mm/dd/yyyy',
                'autoclose' => true,
            ],
        ]);
    }
 ?>

<div class="form-group">
<?= Html::button('Submit', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>