如何在Yii2中将CSS类添加到ActiveField的表单组div中？

Question

我在下面有以下代码：

<?= $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类集成到上面的yi​​i2活动形式中？ 谢谢您的帮助。

Answer 1

如果您希望将类添加到所有组div中，则意味着所有具有类form-group的div，则可以使用fieldConfig的{​​{1}}选项，或者想要将其用于一个特定字段，则可以使用ActiveForm的{​​{1}}选项作为第三个参数

对于整个表格

options

对于单个字段

$form->field()

转化

关于使用ActiveForm转换上述HTML，您应该可以使用$form = yii\widgets\ActiveForm::begin([ 'fieldConfig' => [ 'options' => [ 'class' => 'my-group' ] ] ]); 第三个参数的echo $form->field($model, 'name', ['options' => ['class' => 'my-class']])->textInput(); 选项在输入后添加自定义图标以及其他内容，请参见下文，将创建您的所需的HTML

template

您将看到类似以下的内容

Answer 2

<?= $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' => 'fa fa-map-marker'

Answer 3

您可以尝试使用类似下面的代码来将窗口小部件与日历图标结合起来

<?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,
 ]]);
?>

或者您可以尝试在正在使用的插件上进行更多搜索，某些小部件具有自己的属性来呈现日历图标。