Search code examples
datepickeryii2widgetdaterangepicker

Yii2 + 2amigos DateRangePicker module. Doesn't work correctly

I have placed DateRangePicker widget in 2 places. First is in the Bootstrap modal window, which is opened by clicking a button. And the second one I want to display on the page without modal window. And the result is that it works correctly in modal window, but the second which is on the page is not working correctly, I mean it looks and displayed correct but doesn't show calendar when it's clicked on field.

The code in modal is:

<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>

And div on the page:

<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. There is same problem when I use DatePicker widget. And one more moment is I added one more modal, and it also doesn't work there. Only in first modal.

One more moment: I tried to add simple DatePicker widget without a model an it works.

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

There is a problem when I'm adding this widget WITH a model.

Solution

  • I think your problem happens because you used the same model-attribute for both widgets. Therefore the one page have two inputs with the same id and name attributes. In this case JS library can't correct handle them. Just try to use other attribute name for the second widget. It may help.

    PS: I not sure, but may be exist way to define other id and name for the second widget (probably using clientOptions). It depends from the JS library and its version.