2amigos / yii2-date-picker-widget

Bootstrap DatePicker Widget for Yii2
https://2amigos.us
Other
130 stars 77 forks source link

calendar not working when used with autocomplete #10

Closed cornernote closed 8 years ago

cornernote commented 9 years ago

The following code results in the calendar always being displayed, and not working. There is no JS error in console.

<?php
use dosamigos\datepicker\DatePicker;
use yii\jui\AutoComplete;
?>
    <?php $form = ActiveForm::begin(['layout' => 'horizontal', 'enableClientValidation' => false]); ?>
            <?= $form->field($model, 'due')->widget(DatePicker::className(), [
                'clientOptions' => [
                    'autoclose' => true,
                    'format' => 'yyyy-mm-dd',
                ]
            ]) ?>
            <?= $form->field($model, 'country')->widget(AutoComplete::classname(), [
                'clientOptions' => [
                    'source' => ['USA', 'RUS'],
                ],
            ]) ?>
    <?php ActiveForm::end(); ?>
cornernote commented 9 years ago

interestingly, if I put the autocomplete field first it works correctly

tonydspaniard commented 9 years ago

@cornernote seems that there is an issue with the js files order.

cornernote commented 9 years ago

I guess as a hacky fix I can output buff a fake autocomplete field, then destroy the output.

Would be great if there was a cleaner way to solve it.

tonydspaniard commented 9 years ago

Let me know your findings if we can improve the library. Thanks

cornernote commented 9 years ago

haven't had a chance to get back to it.. i'll be working on it again later in the week.

cornernote commented 9 years ago

I saved the output of the working version and a non-working version, then twiddled the broken version.

The thing that makes it work is changing this:

<script src="/assets/914ad999/js/bootstrap.js"></script>
<script src="/assets/2e647d59/js/bootstrap-datepicker.js"></script>
<script src="/assets/a72cdb8f/jquery-ui.js"></script>

To this:

<script src="/assets/a72cdb8f/jquery-ui.js"></script>
<script src="/assets/914ad999/js/bootstrap.js"></script>
<script src="/assets/2e647d59/js/bootstrap-datepicker.js"></script>

jquery-ui has to be output before bootstrap.

That's probably tricky to resolve in this lib, because the calendar widget doesn't use jquery-ui. It's only used by the auto-complete widget.

I think the best option for me is the hacky output buff I suggested above. If you have a better way to do it I am all ears. If you can think of a way to make the library do it internally then that would be awesome.

tonydspaniard commented 9 years ago

I would create an Asset Bundle and set those that register those libraries turned off, that way I can ensure the order.

clissmancamacho commented 6 years ago

Hi, how are you? I have the same problem. How i can resolve it?