yii2 datepicker can't be rendered

Question

I want to add multiple active form in my app. and then I use some jquery code to append some row when (add form) button is clicked. everything is running well, but some form at 2nd,3rd row is not showing the datepicker input when it's clicked.

and then I figured something different between the first row form and the second form. the second form didnt have class="hasDatepicker" in the input tag.

so I pass the html class="hasDatepicker" from the model

public function renderTableAktivitas($form, $formAktivitas)
 {
   return Html::tag('tr',
   Html::tag('td', $formAktivitas->action) .
   Html::tag('td', $form->field($formAktivitas, 'Tanggal_Kegiatan', ['template' => '<label class="input"><i class="icon-append fa fa-calendar"></i>{input}</label>{error}'])
    ->widget(\yii\jui\DatePicker::classname(), [
    'clientOptions' => ['altField' => "yyyy-mm-dd"],
    'options' => ['class' => 'form-control hasDatepicker']
    ])
  ).
   Html::tag('td', $form->field($formAktivitas, 'Jenis_Kegiatan', ['template' => '<label class="input">{input}</label>{error}'])->widget(\conquer\select2\Select2Widget::className(), [
    'items' => [0,1,2,3,4],
    'options' => ['prompt' => '- Test select -', 'style' => 'width:100%'],
   ])) .
   Html::tag('td', $form->field($formAktivitas, 'Keterangan')->textArea()->label(false), ['style' => ['width' => 'aa50%']])
   ,['data-id' => $formAktivitas->idName]
   );
 }

the class="hasDatepicker" now contained in the first and second form, but the datepicker input is not displaying at both forms.

and this is my jquery code to add some form in my app.

body.delegate('[data-action=add_row_table_aktivitas]', 'click', function () {
    var elm = $(this);
    var tbl = elm.closest('fieldset').find('table');
    var form = elm.closest('form');
    $.ajax({
        // url: '',
        method: 'post',
        data: {'new_row_act': (tbl.find('tr').length - 1)},
        error: function (response) {
            alert_notif({status: "error", message: 'tidak bisa save'});
        },
        success: function (response) {
            var t = $(response.data);
            if ($.fn.select2 !== undefined){
                t.find('select').select2({"width":"100%"});
                t.find('.select_multi').select2({"width":"100%"});
                t.find('.summernote').summernote();
                t.find('form-control').addClass("hasDatepicker");
            }
            var tbody = tbl.find('tbody');
            if (tbody.length > 1) {
                $(tbody[0]).append(t);
            } else {
                tbody.append(t);
            }
            $.each(response.jsAdd, function (i, v) {
                var vali = eval("var f = function(){ return " + v.validate.expression + ";}; f() ;");
                v.validate = vali;
                $(form).yiiActiveForm('add', v);
            });
        }
    });

});

it seems that the datepicker is not just triggered by the class="hasDatepicker" in the form input. so how can I do to fix this problem in my app?

How do you initialize the datepicker js function? Seems it is called once and for dynamic added fields it wont work because it not called again for initialization of new datepickers. — ustmaestro, May 15 '20 at 10:59
You can just initialize it again with t.find('form-control').addClass("hasDatepicker").datepicker() or see this answer https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui — ustmaestro, May 15 '20 at 11:10
wow, thanks for the link ustmaestro. you helping me so much. you can add your answer and i'll mark this question to solved if you want — dslst, May 17 '20 at 00:33

score 0 · Accepted Answer · answered May 19 '20 at 08:52

this question is similar to this. you can access here. https://stackoverflow.com/a/34334388/11218275

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

yii2 datepicker can't be rendered

1 Answers1