Advanced Bootstrap styled form layouts with yii2-field-range extension

This wiki will explain how you can use the yii2-field-range extension with multiple Bootstrap form layouts – vertical or horizontal.

About yii2-field-range

The yii2-field-range extension extension allows you to easily setup ActiveField range fields with Bootstrap 3 addons markup and more. You can thus setup the form attributes joined together like a single field with a bootstrap addon separating the two. In addition, it enables you to display the field validation error messages as one single block instead of separate validation errors for two fields.

Vertical Form Layout

By default the widget supports the bootstrap 3 vertical form layout. In order to display the label and the field range block in a vertical form layout, you need to just provide the following properties to the widget:

  • form
  • label

This will render the widget correctly for any widget extended from yii\widgets\ActiveForm including kartik\widgets\ActiveForm or yii\bootstrap\ActiveForm.

Horizontal Form Layout

Rendering the Bootstrap 3 horizontal form layout with a field range is always tricky, since there are more than two fields joined together, and the alignment is not always perfect. However, the yii2-field-range extension has been enhanced to support horizontal form layout by default for \kartik\widgets\ActiveForm and allows you to easily define your markup for other form widgets based on yii\widgets\ActiveForm.

Your options for a horizontal form layout are:

Option 1 – Using \kartik\widgets\ActiveForm

This is the most straightforward direct approach. An example of using the FieldRange widget with date input validation using kartik\widgets\DateControl in a horizontal form layout is mentioned below:

use kartik\widgets\ActiveForm;
$form = ActiveForm::begin([
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => [
        'labelSpan' => 3, 
        'deviceSize' => ActiveForm::SIZE_SMALL
    ],
]);
echo $form->field($model, 'username');
echo FieldRange::widget([
    'form' => $form,
    'model' => $model,
    'label' => 'Enter date range',
    'attribute1' => 'from_date_1',
    'attribute2' => 'to_date_1',
    'type' => FieldRange::INPUT_WIDGET,
    'widgetClass' => DateControl::classname(),
    'widgetOptions1' => [
        'saveFormat'=>'U',
        'options'=>[
            'pluginOptions' => ['autoclose' => true,],
        ],                
    ],
    'widgetOptions2' => [
        'saveFormat'=>'U',
        'options'=>[
            'pluginOptions' => ['autoclose' => true,],
        ],                
    ],
]);
ActiveForm::end();

Option 2 – Using other ActiveForm widgets

If you are using the yii\bootstrap\ActiveForm or yii\widgets\ActiveForm, there is no inbuilt option in the widget, but you can easily render the horizontal layout using the following approach. Basically you set useAddons property to false, and setup the CSS classes for horizontal layout, within labelOptions, widgetContainer, and errorContainer as shown below:

<?php 
use yii\widgets\ActiveForm;
$form = ActiveForm::begin(['options'=>['class'=>'form-horizontal']]);
?>
<?= FieldRange::widget([
    'form' => $form,
    'model' => $model,
    'useAddons' => false,
    'label'=>'Enter date range',
    'labelOptions'=>['class'=>'col-sm-3'],
    'widgetContainer'=>['class'=>'col-sm-9'],
    'errorContainer'=>['class'=>'col-sm-offset-3 col-sm-9'],
    'attribute1' => 'from_date_1',
    'attribute2' => 'to_date_1',
    'type' => FieldRange::INPUT_WIDGET,
    'widgetClass' => DateControl::classname(),
    'widgetOptions1' => [
        'saveFormat'=>'U',
        'options'=>[
            'pluginOptions' => ['autoclose' => true,],
        ],                
    ],
    'widgetOptions2' => [
        'saveFormat'=>'U',
        'options'=>[
            'pluginOptions' => ['autoclose' => true,],
        ],                
    ],
]);?>
<?php ActiveForm::end(); ?>