CODEWITHSUNDEEP
datepickeryii2dynamicform
Ankit Singh
Ankit Singh

Reputation: 912

DatePicker only working on 1st row of Dynamic Form in Yii2

I'm using wbraganca dynamic-form. The problem I'am facing is that datepicker works fine for the first row of dynamic form. But on rest of the rows its not working. I have tried almost every possible solution for it but none of them worked for me.

The first alteration I did to code is by making changes in yii2-dynamic-form.js by replacing the code below 

// "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')));
            });
        }

with this

// "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')));
		  });
	  }

and now it is showing an error in the console as below

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)

Thanks in advance.

Upvotes: 1

Views: 1801

Answers (3)

Aditya
Aditya

Reputation: 151

Following code worked for me, hope it works for other too

$(".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')));
    });

});

Add this code in your view file, and no need to worry about the server code changes for the yii2 dynamic form.

Upvotes: 0

Yury Euceda
Yury Euceda

Reputation: 566

I was working on this problem on many embeded dynamic forms and the problem was solved in next way:

1.-Go to folder frontend/web/assets or backend/web/assets and delete all files there (cache files) except .gitignore if you're using git

2.-Go to vendor/wbraganca/yii2-dynamicform.js and comment paragraph block 

    // "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.-Paste next code there

    // "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.-Enjoy ;D

Upvotes: 0

ilya
ilya

Reputation: 631

Actually, I was struggling for hours and finally came up with a simple solution, sometimes it is better to figure up a solution from your experience rather than searching for hours.

I did same as you did but then I made this simple modification

// "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 catch the input that has .krajee-datepicker class and initialize it with KvDatepicker loading to it the options of the first datepicker element you have created.

It worked for me. tell me if it works

Upvotes: 4

Related Questions