DatePicker работает только с 1-й строкой динамической формы в Yii2

Question

Я использую динамическую форму wbraganca. Проблема, с которой я сталкиваюсь, заключается в том, что средство выбора даты отлично работает для первого ряда динамической формы. Но в остальных рядах его не работает. Я испробовал почти все возможные решения, но ни один из них не помог мне.

Первое изменение, которое я сделал в коде, - внесение изменений в yii2-dynamic-form.js путем замены приведенного ниже кода.

// "kartik-v/yii2-widget-datepicker"
        var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
        var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
        if ($hasDatepicker.length > 0) {
            $hasDatepicker.each(function() {
                $(this).parent().removeData().datepicker('remove');
                $(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
            });
        }

с этим

// "kartik-v/yii2-widget-datepicker"
       var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
    if ($hasDatepicker.length > 0) {
     $hasDatepicker.each(function() {
     $(this).parent().removeData().kvDatepicker('remove');
     $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
    });
   }

и теперь он показывает ошибку в консоли, как показано ниже

Uncaught TypeError: Cannot read property 'deprecated' of undefined
    at Datepicker.remove (bootstrap-datepicker.js:33)
    at HTMLDivElement.<anonymous> (bootstrap-datepicker.js:1649)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.datepickerPlugin [as kvDatepicker] (bootstrap-datepicker.js:1626)
    at HTMLInputElement.<anonymous> (yii2-dynamic-form.js:316)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at _restoreSpecialJs (yii2-dynamic-form.js:315)
    at _addItem (yii2-dynamic-form.js:116)

Заранее спасибо.

Answer 1

На самом деле, я боролся часами и, в конце концов, придумал простое решение, иногда лучше придумать решение на основе вашего опыта, чем искать часы.

Я сделал то же самое, что и вы, но затем я сделал эту простую модификацию

// "kartik-v/yii2-widget-datepicker"
    var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
    if ($hasDatepicker.length > 0) {
        $hasDatepicker.each(function () {
//      $(this).parent().removeData().kvDatepicker('remove');
// here is the solution
$(this).parent().find('.krajee-datepicker').kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));


        });
    }

Jus ловит входные данные, которые имеют класс.krajee-datepicker, и инициализирует его с помощью KvDatepicker, загружая в него параметры первого элемента datepicker, который вы создали.

Это сработало для меня. скажи мне, если это работает

Answer 2

Следующий код сработал для меня, надеюсь, он подойдет и для других

      $(".dynamicform_wrapper").on('afterInsert', function(e, item) {
    var datePickers = $(this).find('[data-krajee-kvdatepicker]');
    datePickers.each(function(index, el) {
        $(this).parent().removeData().kvDatepicker('initDPRemove');
        $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
    });

});

Добавьте этот код в свой файл представления, и вам не придется беспокоиться об изменениях кода сервера для динамической формы yii2.

Answer 3

Я работал над этой проблемой над многими встроенными динамическими формами, и проблема была решена следующим образом:

1.-Перейдите в папку frontend / web / assets или backend/web/assets и удалите там все файлы (файлы кеша), кроме.gitignore, если вы используете git

2.-Перейдите к vendor/wbraganca/yii2-dynamicform.js и прокомментируйте блок абзацев.

    // "kartik-v/yii2-widget-datepicker"
    /*
    var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
    if ($hasDatepicker.length > 0) {
        $hasDatepicker.each(function() {
            $(this).parent().removeData().datepicker('remove');
            $(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
        });
    }
    */

3.-Вставьте следующий код туда

    // "kartik-v/yii2-widget-datepicker"
    var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
    if ($hasDatepicker.length > 0) {
        $hasDatepicker.each(function () {
            console.log("Clonado2....");
            $(this).parent().removeData().off();
            //$(this).parent().removeData().kvDatepicker('remove');
            $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
            //$(this).parent().find('.krajee-datepicker').kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
        });
    }

4.-Наслаждайтесь;D