yii2 datepicker 无法渲染

Question

我想在我的应用中添加多个活动表单。然后我使用一些 jquery 代码在单击（添加表单）按钮时附加一些行。一切运行良好，但在第 2、3 行的某些表单在单击时未显示日期选择器输入。

然后我发现第一行表格和第二个表格之间有些不同。第二种形式的输入标签中没有 class="hasDatepicker"。

所以我从模型中传递了 html class="hasDatepicker"

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

class="hasDatepicker" 现在包含在第一个和第二个表单中，但日期选择器输入未在两个表单中显示。

这是我的 jquery 代码，用于在我的应用中添加一些表单。

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

});

日期选择器似乎不仅仅是由表单输入中的 class="hasDatepicker" 触发的。那么我该如何解决我的应用程序中的这个问题呢？

Answer 1

这个问题与此类似。你可以在这里访问。 https://stackoverflow.com/a/34334388/11218275

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

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

});