Doesn't work with kartik DateControl and DatePicker widget

[Murik]

https://github.com/kartik-v/yii2-datecontrol

<?php DynamicFormWidget::begin([

...
Add

....

$interval): ?>

                                <?= $form->field($interval, "[{$i}]start_date")->widget(
                                    DateControl::className(),
                                    ['type' => DateControl::FORMAT_DATE,
                                        'ajaxConversion' => false,
                                    ]); ?>

.....

After dynamic add DateControl and set date indicates an error that field is not filled.
possible to find a solution?

[cloudcaptain]

looking forward to this bug fix

[HenryDewa]

looking to this bug fix

[cloudcaptain]

The following fix is working for me.

        // "kartik-v/yii2-widget-datecontrol"
        var $hasDateControl = $(this).find('[data-krajee-datecontrol]');
        if ($hasDateControl.length > 0) {
            $hasDateControl.each(function() {
                var id = $(this).attr('id');
                var dcElementOptions = eval($(this).attr('data-krajee-datecontrol'));
                if (id.indexOf(dcElementOptions.idSave) < 0) {
                    // initialize the NEW DateControl element
                    var cdNewOptions = $.extend(true, {}, dcElementOptions);
                    cdNewOptions.idSave = $(this).next().attr('id');
                    $(this).kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
                    $(this).removeAttr('value name data-krajee-datecontrol');
                    $(this).datecontrol(cdNewOptions);

                }
            });
        }

[Discomania]

@cloudcaptain
your fix is not working for me. I had to edit your code. this is my modified code

        // "kartik-v/yii2-widget-datecontrol"
        var $hasDateControl = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datecontrol]');
        if ($hasDateControl.length > 0) {
            $hasDateControl.each(function() {
                var id = $(this).attr('id');
                var dcElementOptions = eval($(this).attr('data-krajee-datecontrol'));
                if (id.indexOf(dcElementOptions.idSave) < 0) {
                    // initialize the NEW DateControl element
                    var cdNewOptions = $.extend(true, {}, dcElementOptions);
                    cdNewOptions.idSave = $(this).parent().next().attr('id');
                    $(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
                    $(this).removeAttr('value name data-krajee-datecontrol');
                    $(this).datecontrol(cdNewOptions);

                }
            });
        }

I hope it is helpful to someone and that this bug will be corrected in yii2-dynamic-form.js

[fabioaccetta]

Talking about only DatePicker widget, it seem that Kartik has changed attribute names, so code in yii2-dynamic-form.js#L351:

[...]

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

[...]

can't work anymore, because for example data-krajee-datepicker is now called data-krajee-kvdatepicker, and the datepicker() function itself is now called kvDatepicker()...

This way, someone else has already tried to solve the fix here; so I have tried to use the same fix and what happens in my case is this: the widget appears correctly, but the parsing of php format does not.

This is my partial:

echo DatePicker::widget([
    'form' => $form,
    'language' => Yii::$app->language,
    'type' => DatePicker::TYPE_COMPONENT_PREPEND,
    'model' => $model,
    'attribute' => "[{$i}]birthday",
    'convertFormat' => true,
    'pluginOptions' => [
        'endDate' => '+0d',
        'autoclose' => true,
        'format' => 'php:Y-m-d',
        'todayHighlight' => true,
    ],
]);

and when I click on a date on the calendar, year and day are correct, but month is not; for example, I click on 2015-07-31 and the field value becomes: 2015-ii-31.

I hope my informations can help someone to solve the problem. Thanks

[fabioaccetta]

News: the date parsing error comes from Kartik exentions when DatePicker widget is called that way (because php date parsing is called twice, going to error), so changing to this:

$picker = [
    'language' => Yii::$app->language,
    'type' => DatePicker::TYPE_COMPONENT_PREPEND,
    'convertFormat' => true,
    'pluginOptions' => [
        'endDate' => '+0d',
        'autoclose' => true,
        'format' => 'php:Y-m-d',
        'todayHighlight' => true,
    ],
];
echo $form->field($model, "[{$i}]birthday")->widget(DatePicker::className(), $picker);

php parsing now works as espected.
Moreover, I have verified that patching yii2-dynamic-form.js with new Kartik attributes and functions - '[data-krajee-datepicker]' to '[data-krajee-kvdatepicker]' and datepicker() to kvDatepicker() - everything seems to work as espected.

[mrsad]

@Discomania great!

@wbraganca, i confirm, this code is working.

patch:

--- yii2-dynamic-form.js.old    2015-08-11 23:27:48.273959445 +0800
+++ yii2-dynamic-form.js        2015-08-11 21:39:13.000000000 +0800
@@ -309,12 +309,30 @@
     var _restoreSpecialJs = function(widgetOptions) {
         var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);

+        // "kartik-v/yii2-widget-datecontrol"
+        var $hasDateControl = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datecontrol]');
+        if ($hasDateControl.length > 0) {
+            $hasDateControl.each(function() {
+                var id = $(this).attr('id');
+                var dcElementOptions = eval($(this).attr('data-krajee-datecontrol'));
+                if (id.indexOf(dcElementOptions.idSave) < 0) {
+                    // initialize the NEW DateControl element
+                    var cdNewOptions = $.extend(true, {}, dcElementOptions);
+                    cdNewOptions.idSave = $(this).parent().next().attr('id');
+                    $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
+                    $(this).removeAttr('value name data-krajee-datecontrol');
+                    $(this).datecontrol(cdNewOptions);
+
+                }
+            });
+        }
+
         // "kartik-v/yii2-widget-datepicker"
-        var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
+        var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
         if ($hasDatepicker.length > 0) {
             $hasDatepicker.each(function() {
-                $(this).parent().removeData().datepicker('remove');
-                $(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
+                $(this).parent().removeData().kvDatepicker('remove');
+                $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
             });
         }

[PeterJason]

Anyone have a solution for this problem? My datepicker doesnt work (after add new item), i'm using kartik\date\DatePicker, i made the changes, but the problem continues..

Anyone have another solution?
Thank you

[ajkosh]

here is working solution for date picker and datetimepicker kartik 's widget

 var $hasDateControl = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datecontrol]');
        if ($hasDateControl.length > 0) {
           $hasDateControl.each(function() {
                var id = $(this).attr('id');
                var dcElementOptions = eval($(this).attr('data-krajee-datecontrol'));
                if (id.indexOf(dcElementOptions.idSave) < 0) {
                    // initialize the NEW DateControl element
                    var cdNewOptions = $.extend(true, {}, dcElementOptions);
                    $types=cdNewOptions.type;
                    if($types=='datetime'){
                       $(this).parent().datetimepicker(eval($(this).attr('data-krajee-datetimepicker')));  
                    }else{
                        $(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
                    }
                    cdNewOptions.idSave = $(this).parent().next().attr('id');
                    $(this).removeAttr('value name data-krajee-datecontrol');
                    $(this).datecontrol(cdNewOptions);
                }
           });
        }