我有一个下面的代码:
<?= $form->field($model, 'date') ->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]) ?>
这将以以下方式生成HTML:
<div class="form-group has-icon has-label">
<label for="formSearchUpLocation">Picking Up Location</label>
<input type="text" class="form-control" id="formSearchUpLocation" placeholder="Airport or Anywhere">
<span class="form-control-icon"><i class="fa fa-map-marker"></i></span>
</div>
我的问题如下:我如何将下面HTML中的css和bootstrap类集成到上面的yii2活动表单中?谢谢你的帮助。
发布于 2018-08-14 05:02:13
如果您希望将类添加到所有组div中,即具有类form-group
的所有div,则可以使用ActiveForm
的fieldConfig
选项,或者如果您希望将其用于某个特定字段,则可以使用$form->field()
的options
选项作为第三个参数
对于整个表单
$form = yii\widgets\ActiveForm::begin([
'fieldConfig' => [
'options' => [
'class' => 'my-group'
]
]
]);
对于单个字段
echo $form->field($model, 'name', ['options' => ['class' => 'my-class']])->textInput();
转换
关于使用ActiveForm转换你上面的超文本标记语言你可以使用$form->field()
第三个参数的template
选项在输入后添加你的自定义图标,如下所示将创建你想要的超文本标记语言
echo $form->field($model, 'date', [
'options' => [
'class' => 'form-group has-icon has-label'
],
'inputOptions' => [
'class' => 'form-control'
],
'template' => '{label}{input}<span class="form-control-icon"><i class="fa fa-map-marker"></i></span>{error}'
])->widget(yii\jui\DatePicker::class, [
'id' => 'created_at',
'options' => [
'placeholder' => 'Airport or Anywhere'
]
]);
您将获得如下所示的内容
发布于 2018-08-14 02:06:40
<?= $form->field($model, 'date') ->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'class' => 'WRITE-YOUR-CLASS'
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]) ?>
只需在“class”部分输入您的类名,它就可以工作了。示例:'class' => 'fa fa-map-marker'
发布于 2018-08-14 04:51:55
您可以尝试类似下面的代码,将您的日历图标与小部件连接起来:
<?php
$addon = '<span class="input-group-addon">
<i class="fa fa-calendar-alt"></i>
</span>';
echo $addon.$form->field($model, 'date')->widget(yii\jui\DatePicker::className(),['clientOptions' => [ 'placeholder' => 'dd/mm/yyyy',
'id' => 'form',
'autocomplete' => 'off',
'value' => date('m/d/Y'),
'autoclose'=>true,
]]);
?>
或者你可以尝试在你正在使用的插件上搜索更多,一些小部件有他自己的属性来呈现日历图标。
https://stackoverflow.com/questions/51828108
复制相似问题