How to add css class to form-group div of ActiveField in Yii2?

Question

I have a following code below:

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

That will result in HTML in following way:

<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>

My question is as following: How can I integrate the css and bootstrap classes in HTML below into yii2 active form above? Thank you for your help.

Muhammad Omer Aslam · Accepted Answer · 2018-08-25 00:02:44Z

if you are looking to add the class to all the group divs mean all the div that have the class form-group then you can use the fieldConfig option of the ActiveForm or if you want it for one specific field then you can use the options option of the $form->field() as the 3rd parameter

For the whole Form

$form = yii\widgets\ActiveForm::begin([
            'fieldConfig' => [
                'options' => [
                    'class' => 'my-group'
                ]
            ]
        ]);

For Single Field

echo $form->field($model, 'name', ['options' => ['class' => 'my-class']])->textInput();

Conversion

About converting your above HTML using ActiveForm the following should work you can use template option of the $form->field() 3rd parameter to add your custom icon after the input, along with other, see below will create your desired HTML

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

You will have something like below

manu · Accepted Answer · 2018-08-13 18:06:40Z

0

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

just input your class name in 'class' section it will work. example : 'class' => 'fa fa-map-marker'

answered Aug 13, 2018 at 18:06

manu

3532 silver badges15 bronze badges

2 Comments

G'ulomjon Sulaymonov Over a year ago

Manu, thanks for your answer, I did it, but the icon of calender is not being in the same row with the calendar input, it is going just under the input

manu Over a year ago

i think it need some seperate styling, else you need to use normal html5 date picker

ThiagoYou · Accepted Answer · 2018-08-13 20:51:54Z

0

You could try something like the code bellow to concat your calendar icon with the widget:

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

Or you can try search more on the plugin you are using, some widgets have his own attribute to render the calendar icon.

answered Aug 13, 2018 at 20:51

ThiagoYou

3381 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to add css class to form-group div of ActiveField in Yii2?

3 Answers 3

For the whole Form

For Single Field

Conversion

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

For the whole Form

For Single Field

Conversion

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related