[Wiki] Managing different Bootstrap form layouts with yii2-field-range extension.

This wiki will explain how you can use the Field range extension with multiple Bootstrap form layouts (vertical or horizontal). You maybe aware, that the yii2-field-range extension enables you to easily setup ActiveField range fields with Bootstrap styling. You basically can setup two attributes joined together like a single field with combined validation error block.

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(); ?>