Yii2 + 2amigos DateRangePicker 模块。无法正常工作答案

【问题标题】：Yii2 + 2amigos DateRangePicker module. Doesn't work correctlyYii2 + 2amigos DateRangePicker 模块。无法正常工作
【发布时间】：2017-02-17 02:47:48
【问题描述】：

我已将 DateRangePicker 小部件放置在 2 个位置。首先是在 Bootstrap 模式窗口中，通过单击按钮打开该窗口。第二个我想在没有模式窗口的页面上显示。结果是它在模态窗口中正常工作，但页面上的第二个不能正常工作，我的意思是它看起来和显示正确，但在单击字段时不显示日历。

modal中的代码是：

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

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

附：当我使用 DatePicker 小部件时也有同样的问题。还有一刻，我又添加了一个模态，但它在那里也不起作用。仅在第一个模态中。

还有一点：我尝试添加没有模型的简单 DatePicker 小部件，它可以工作。

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

当我用模型添加这个小部件时出现问题。

【问题讨论】：

检查浏览器控制台是否有错误。
控制台没有错误

标签： datepicker yii2 widget daterangepicker

【解决方案1】：

我认为您的问题发生是因为您对两个小部件使用了相同的模型属性。因此，一页有两个具有相同id 和name 属性的输入。在这种情况下，JS 库无法正确处理它们。只需尝试为第二个小部件使用其他属性名称。它可能会有所帮助。

PS：我不确定，但可能存在为第二个小部件定义其他 id 和 name 的方法（可能使用 clientOptions）。它取决于 JS 库及其版本。

【讨论】：

谢谢！你说的对。它是使用 'options' 和 'optionsTo' 定义的。