Bootstrap Form Helpers Widget library allows you to use the amazing collection of jQuery plugins created by
Vincent Lamanna and help you build better looking forms., (*1)
Installation
The preferred way to install this extension is through composer., (*2)
Either run, (*3)
php composer.phar require "2amigos/yii2-bootstrap-form-helpers-library" "*"
or add, (*4)
"2amigos/yii2-bootstrap-form-helpers-library" : "*"
to the require section of your application's composer.json
file., (*5)
Usage
The library comes with the following widgets:, (*6)
- ColorPicker
- CountryPicker
- CurrencyPicker
- DatePicker
- FontPicker
- FontSizePicker
- GoogleFontPicker
- LanguagePicker
- NumberInput
- PhoneInput
- Select
- Slider
- StatePicker
- TimePicker
- TimeZonePicker
Pickers are Select
are DropDownLists that have pretty much work the same in terms of usage. So, the following examples
shows how to use an input and a DropDownList. I am sure you will figure out how to make use of the others until we have
written the proper documentation site for all our extensions., (*7)
// using Select Widget, the custom select HTML element of the library
dosamigos\formhelpers\Select::widget([
'model' => $model,
'attribute' => 'attributeName',
'items' => [
'1' => 'One option',
'2' => 'Another option'
],
// for all possible client options, please see
// http://bootstrapformhelpers.com/select/#jquery-plugins
'clientOptions' => [
'filter' => 'true' // boolean must be as a string
]
]);
// using the NumberInput
dosamigos\formhelpers\NumberInput::widget([
'model' => $model,
'attribute' => 'updated_at',
// not required if we use it with yii\bootstrap\ActiveForm
'options' => ['class' => 'form-control'],
// for all possible client options, please see
// http://bootstrapformhelpers.com/number/#jquery-plugins
'clientOptions' => [
'min' => 20,
'max' => 40
]
]);
// (remember that you can also use the following format)
use dosamigos\formhelpers\NumberInput;
$form->input($model, 'attribute')->widget(NumberInput::className(),['clientOptions' => ['min' => 20, 'max' => 40]]);
// using the DatePicker with a selected language
dosamigos\formhelpers\DatePicker::widget([
'model' => $model,
'attribute' => 'updated_at',
'language' => 'es_ES',
'clientOptions' => [
'format' => 'm/d/y',
]
]);
// using the CurrencyPicker with flags
dosamigos\formhelpers\CurrencyPicker::widget([
'model' => $model,
'attribute' => 'updated_at',
// important! if we don't use the custom select HTML we won't see the flags
'selectBox' => true,
'clientOptions' => [
'flags' => 'true',
]
])
For further information regarding the multiple options for the different plugins please visit
its website, (*8)
, (*9)
Web development has never been so fun!
www.2amigos.us, (*10)