Yii2 + 2amigos DateRangePicker модуль. Не работает правильно

Question

Я разместил виджет DateRangePicker в 2 местах. Сначала находится в модальном окне Bootstrap, которое открывается нажатием кнопки. И второй, который я хочу отобразить на странице без модального окна. И результат заключается в том, что он работает правильно в модальном окне, но второй, который находится на странице, работает некорректно, я имею в виду, что он выглядит и отображается корректно, но не показывает календарь, когда его нажимают на поле.

Код в модальное:

<div class="modal fade" id="responsive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel4">Book</h4> 
      </div> 
      <div class="modal-body"> 
       <?php $form = ActiveForm::begin(); ?> 
        ... 
        <?= $form->field($model, 'start_date')->widget(DateRangePicker::className(), [ 
         'attributeTo' => 'end_date', 
         'language' => 'ru', 
         'labelTo' => 'до', 
        // 'size' => 'lg', 
         'clientOptions' => [ 
          'autoclose' => true, 
          'format' => 'yyyy-mm-d', 
          'todayHighlight' => true, 
         ] 
        ])->label('Укажите период');?>       
        ... 
       <?php ActiveForm::end(); ?> 
      </div> 
     </div> 
    </div> 
</div> 

И ДИВ на странице:

<div> 
    <?php $form = ActiveForm::begin(); ?> 
     ... 
     <?= $form->field($model, 'start_date')->widget(DateRangePicker::className(), [ 
      'attributeTo' => 'end_date', 
      'language' => 'ru', 
      'labelTo' => 'до', 
     // 'size' => 'lg', 
      'clientOptions' => [ 
       'autoclose' => true, 
       'format' => 'yyyy-mm-d', 
       'todayHighlight' => true, 
      ] 
     ])->label('Укажите период');?>       
     ... 
    <?php ActiveForm::end(); ?> 
</div> 

P.S. Та же проблема возникает, когда я использую виджет DatePicker. И еще один момент я добавил еще один модальный, и он тоже не работает. Только в первом модальном.

Еще один момент: я попытался добавить простой виджет DatePicker без модели, и он работает.

<?= DatePicker::widget([ 
'name' => 'Test', 
'value' => '02-16-2012', 
'template' => '{addon}{input}', 
    'clientOptions' => [ 
     'autoclose' => true, 
     'format' => 'dd-M-yyyy' 
    ] 
]);?> 

Проблема возникает, когда я добавляю этот виджет С моделью.

Answer 1

Я думаю, что ваша проблема возникает из-за того, что вы использовали один и тот же атрибут модели для обоих виджетов. Поэтому одна страница имеет два входа с одинаковыми атрибутами id и name. В этом случае библиотека JS не может исправить их. Просто попробуйте использовать другое имя атрибута для второго виджета. Это может помочь.

PS: Я не уверен, но может существовать способ определить другие id и name для второго виджета (возможно, с помощью clientOptions). Это зависит от библиотеки JS и ее версии.