Kartik Datepicker is not working inside renderAjax dynamic modal.

[shubham-agr]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-widget-datepicker.
• This is not an usage question. I confirm having read the widget documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• This is not a source plugin (datepicker) issue. (Those should be directed to the plugin issues repo).
• I have attempted to find the simplest possible steps to reproduce the issue.

Steps to reproduce the issue

1. I followed this tutorial https://www.yiiframework.com/wiki/806/render-form-in-popup-via-ajax-create-and-update-with-ajax-validation-also-load-any-page-via-ajax-yii-2-0-2-3
2. Added a kartik datepicker in _form.php file.
3. When I click on open modal button the datepicker is not working.

Expected behavior and actual behavior

The datepicker should have worked normally but it is not opening inside modal.

I check in normal page it is working fine.

Most probably it can be because datepicker is not initialized when it is loaded dynamically inside modal.
I have also modified the z-index also. But it looks like a JS error.

The create and update actions are working fine but only problem is datepicker or even select2 is not working.

Environment

Browsers

• Google Chrome
• Mozilla Firefox

Operating System

• Windows

Libraries

• jQuery version:
• yii2-widget-datepicker version:@Dev-Master

Isolating the problem

• The bug happens consistently across all tested browsers
• This bug happens when using yii2-widget-datepicker with dynamic modal.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DrYurets]

I propose the following solution:

1. In the markup of the modal window, add the CSS class datepicker to all datepicker fields:

<?= $form
                        ->field($model, 'expires_formatted')
                        ->label($model->getAttributeLabel('expires'))
                        ->widget(DatePicker::class, [
                            'language' => $lang,
                            'dateFormat' => 'dd.MM.yyyy',
                            'options' => [
                                'class' => 'form-control datepicker',
                                'autocomplete' => 'off',
                            ],
                        ]) ?>

2. After showing the modal window, run a function that reinitializes the Datepicker for each found element with the datepicker class in this modal window."

$('#modal').modal('show');
reinitDatepicker($('#modal'));

reinit function

function reinitDatepicker(modal) {
                let datepicker = modal.find('.datepicker');
                if (datepicker.length > 0) {
                    datepicker.each(function() {
                        $(this).datepicker(
                            {
                                format: 'dd.mm.yyyy',
                                autoclose: true
                            });
                    })
                }
            }