yii2 日期选择器无法呈现
yii2 datepicker can't be rendered
我想在我的应用程序中添加多个活动表单。然后我使用一些 jquery 代码在单击(添加表单)按钮时附加一些行。一切都很好 运行,但是第 2、3 行的某些表单在单击时未显示日期选择器输入。
然后我发现第一行表格和第二行表格之间有些不同。第二种形式在输入标签中没有 class="hasDatepicker"。
所以我从模型
传递htmlclass="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" 触发的。那么我该如何解决我的应用程序中的这个问题?
本题与此类似。你可以在这里访问。
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
我想在我的应用程序中添加多个活动表单。然后我使用一些 jquery 代码在单击(添加表单)按钮时附加一些行。一切都很好 运行,但是第 2、3 行的某些表单在单击时未显示日期选择器输入。
然后我发现第一行表格和第二行表格之间有些不同。第二种形式在输入标签中没有 class="hasDatepicker"。
所以我从模型
传递htmlclass="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" 触发的。那么我该如何解决我的应用程序中的这个问题?
本题与此类似。你可以在这里访问。
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});