Many datepickers in one form yii2

Question

I would like to have various datepickers in my form. Unfortunetely, only the first field acts as supposed. Here's my code:

<?php
    for ($i = 0; $i < 4; $i++) {
        ?>
        <div class="row">
            <div class="col-md-1">
                <?= ($i+1).'.' ?>
            </div>
            <div class="col-md-3">
                <?= $form->field($pres_rules[$i], 'date')->textInput() ?>
            </div>
            <div class="col-md-3">
                <?=
                $form->field($pres_rules[$i], 'time')->widget(TimePicker::className(), [
                    'pluginOptions' => [
                        'showMeridian' => false,
                        'defaultTime' => '12:00'
                    ],
                    'addonOptions' => [
                        'asButton' => true,
                    ]
                ]);
                ?>
            </div>
        </div>
        <?php
    }
    ?>

And the result looks like that:

Only the first field shows clock icon, which I can click on and select hours. The rest is like ordinary text fields, clicking on the 'clock icon' doesn't trigger any further action. I can put any string I want and field accepts it, only the first, working field rejects letters etc. What is the problem here?

EDIT
I think the problem is that Yii generates the same IDs for every field. How can I change that? I tried all of these, but doesn't work at all:

$form->field($pres_rules[$i], 'time', ['inputOptions' => ['id' => 'time-'.$i]])->widget(TimePicker::className(), [
                    'pluginOptions' => [
                        'id' => 'time-' . $i,
                        'showMeridian' => false,
                        'defaultTime' => '12:00'
                    ],
                    'addonOptions' => [
                        'asButton' => true,
                    ],
                    'containerOptions' => [
                        'id' => 'time-' . $i,
                    ], 
                    'id' => 'time-'.$i
                ], ['id' => 'time-'.$i,]);

Here's the ID I'd like to change

Answer 1

Please see the documentation about Tabular input http://www.yiiframework.com/doc-2.0/guide-input-tabular-input.html so your code should look like this:

<?php foreach ($pres_rules as $i => $pres_rule): ?>
<?= $form->field($pres_rule, "[$i]date")->widget(TimePicker::className(), [
        'pluginOptions' => [
            'showMeridian' => false,
            'defaultTime' => '12:00'
        ],
        'addonOptions' => [
            'asButton' => true,
        ]
    ]) ?>
<?php endforeach; ?>