如何在Yii2中添加css类到ActiveField的窗体组div中？
如何在Yii2中添加css类到ActiveField的窗体组div中？
提问于 2018-08-14 02:02:09
我有一个下面的代码：
<?= $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活动表单中？谢谢你的帮助。
回答 3
Stack Overflow用户
回答已采纳
发布于 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'
]
]);您将获得如下所示的内容
Stack Overflow用户
发布于 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'
Stack Overflow用户
发布于 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,
]]);
?>或者你可以尝试在你正在使用的插件上搜索更多，一些小部件有他自己的属性来呈现日历图标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51828108
复制相关文章
相似问题