Form Input Helpers
DatePicker is a widget that allows us, mere Yii developers, to make use of the great bootstrap datepicker plugin developed by eyecon
Its use is pretty straightforward:
<div class="input-append">
<?php $this->widget('yiiwheels.widgets.datepicker.WhDatePicker', array(
'name' => 'datepickertest',
'pluginOptions' => array(
'format' => 'mm/dd/yyyy'
)
));
?>
<span class="add-on"><icon class="icon-calendar"></icon></span>
</div>
For more information about the plugin and its options, please visit dan grossman bootstrap daterangepicker
<div class="input-append">
<?php $this->widget(
'yiiwheels.widgets.daterangepicker.WhDateRangePicker',
array(
'name' => 'daterangepickertest',
'htmlOptions' => array(
'placeholder' => 'Select date'
)
)
);
?>
For more information about the plugin and its options, please visit bootstrap datetimepicker docs site .
<div class="input-append">
<?php $this->widget(
'yiiwheels.widgets.datetimepicker.WhDateTimePicker',
array(
'name' => 'datetimepickertest',
)
);
?>
The following is the JQuery File Upload plugin from blueimp. Due to the amount of doubts and requests on how to use this plugin, I decided to create two versions: one basic and the other advanced (or regular).
The basic one is the easiest one to use. Just wrap the widget with the appropriate HTML, setup the
pluginOptions as required and voilá... done.
Sorry but to create the file that will handle the upload is out of the scope of this docs. If you wish to know more about this fantastic plugin, visit JQuery File Upload website. Also, this first example may not work due to the issue of having multiple file upload widgets on the same page. If you wish to implement this feature then follow the instructions on Multipe file upload widgets wiki.
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Select files...</span>
<?php
$this->widget(
'yiiwheels.widgets.fileupload.WhBasicFileUpload',
array(
'name' => 'basicuploadtest',
'uploadAction' => $this->createUrl('site/upload'),
'pluginOptions' => array(
'dataType' => 'json',
'done' => 'js:function(e, data){
$.each(data.result.files, function(i, file){
$("<p/>").text(file.name).appendTo("#bfiles");
});
}',
'progressall' => "js:function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#bprogress .bar').css(
'width',
progress + '%'
);
}"
)
)
);
?>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="bprogress" class="progress progress-success progress-striped">
<div class="bar"></div>
</div>
<!-- The container for the uploaded files -->
<div id="bfiles" class="files"></div>
<div class="clearfix"></div>
</div>
This is the same plugin as above but with its full UI.
<?php
$this->widget(
'yiiwheels.widgets.fileupload.WhFileUpload',
array(
'name' => 'fileuploadui',
'url' => $this->createUrl('site/upload', array('type' => 'fine')),
'multiple' => true,
)
);
?>
We also included another uploader: FineUploader. It is not the original version but it does good work too.
<?php
$this->widget('yiiwheels.widgets.fineuploader.WhFineUploader', array(
'name' => 'fineuploadtest',
'uploadAction' => $this->createUrl('site/upload', array('fine' => 1)),
'pluginOptions' => array(
'validation'=>array(
'allowedExtensions' => array('jpeg', 'jpg')
)
)
));
?>
A set of very useful plugins, brought to you by Vincent La Manna
SelectBox
Countries
Country Read Only
States (ES)
State Ready Only (US, State: CA)
Phone Must be wrapped on a form
Languages
Languages Read Only
Timezones
Google Fonts
DatePicker
TimePicker
Fonts
Font Sizes
<div class="row">
<div class="col-md-3">
<p>SelectBox</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhSelectBox',
array(
'name' => 'selectboxtest',
'value' => 3,
'data' => array(
'2amigos',
'just',
'rocks',
'yiiwheels'
)
)
);
?>
</div>
<div class="col-md-3">
<p>Countries</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhCountries',
array(
'name' => 'countrytest',
'value' => 'US',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'country' => 'US',
'language' => 'es_ES',
'flags' => true
)
)
);
?>
</div>
<div class="col-md-3">
<p>Country Read Only</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhCountries',
array(
'name' => 'countrytestreadyonly',
'value' => 'US',
'readOnly' => true,
'pluginOptions' => array(
'country' => 'US',
'flags' => true
)
)
);
?>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>States (ES)</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhStates',
array(
'name' => 'statetest',
'value' => 'CA',
'useHelperSelectBox' => true,
'country' => 'ES',
'pluginOptions' => array(
'filter' => true
)
)
);
?>
</div>
<div class="col-md-3">
<p>State Ready Only (US, State: CA)</p>
<strong><?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhStates',
array(
'name' => 'statetestreadyonly',
'value' => 'CA',
'readOnly' => true,
'country' => 'US',
)
);
?></strong>
</div>
<div class="col-md-3">
<p>Phone <small>Must be wrapped on a form</small></p>
<form>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhPhone',
array(
'name' => 'phonetest',
'value' => '5555555555',
'format' => '+1 (ddd) ddd-dddd',
'htmlOptions' => array(
'class' => 'form-control'
)
)
);
?>
</form>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Languages</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhLanguages',
array(
'name' => 'languagesdropdown',
'value' => 'en_US',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'language' => 'en_US',
'flags' => true,
'available' => 'es_ES,en_US,de_DE'
)
)
);
?>
</div>
<div class="col-md-3">
<p>Languages Read Only</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhLanguages',
array(
'name' => 'languages',
'value' => 'es_ES',
'readOnly' => true,
'pluginOptions' => array(
'language' => 'es_ES',
'flags' => true,
)
)
);
?>
</div>
<div class="col-md-3">
<p>Timezones</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhTimezones',
array(
'name' => 'timezones',
'value' => 'US',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'country' => 'US',
'timezone' => 'America/Denver'
)
)
);
?>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Google Fonts</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhGoogleFonts',
array(
'name' => 'googlefonts',
'value' => 'Lato',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'family' => 'Lato'
)
)
);
?>
</div>
<div class="col-md-3">
<p>DatePicker</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhDatePickerHelper',
array(
'htmlOptions' => array('class' => 'input-medium'),
'name' => 'datepicker',
'value' => '2000-01-01'
)
);
?>
</div>
<div class="col-md-3">
<p>TimePicker</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhTimePickerHelper',
array(
'htmlOptions' => array('class' => 'input-medium'),
'name' => 'timepicker',
'value' => '08:00'
)
);
?>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Fonts</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhFonts',
array(
'name' => 'fonts',
'value' => 'Helvetica',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'family' => 'Helvetica'
)
)
);
?>
</div>
<div class="col-md-3">
<p>Font Sizes</p>
<?php
$this->widget(
'yiiwheels.widgets.formhelpers.WhFontSizes',
array(
'name' => 'fontsizes',
'value' => '14',
'useHelperSelectBox' => true,
'pluginOptions' => array(
'family' => '14'
)
)
);
?>
</div>
</div>
Cool plugin to add masked inputs to your form. More information on http://igorescobar.github.io/jQuery-Mask-Plugin/
<div class="row">
<div class="col-md-6">
<label>Date</label>
<?php $this->widget(
'yiiwheels.widgets.maskinput.WhMaskInput',
array(
'name' => 'maskdatetest',
'mask' => '11/11/1111',
'htmlOptions' => array('placeholder' => '11/11/1111', 'class' => 'form-control'),
)
);?>
</div>
<div class="col-md-6">
<label>Time</label>
<?php $this->widget(
'yiiwheels.widgets.maskinput.WhMaskInput',
array(
'name' => 'masktimetest',
'mask' => '00:00:00',
'htmlOptions' => array('placeholder' => '00:00:00', 'class' => 'form-control'),
)
);?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>IP</label>
<?php $this->widget(
'yiiwheels.widgets.maskinput.WhMaskInput',
array(
'name' => 'maskiptest',
'mask' => '0ZZ.0ZZ.0ZZ.0ZZ',
'htmlOptions' => array('placeholder' => '0ZZ.0ZZ.0ZZ.0ZZ', 'class' => 'form-control'),
'pluginOptions' => array(
'translation' => array('Z' => array(
'pattern' => "js:/[0-9]/",
'optional' => true
))
)
)
);?>
</div>
<div class="col-md-6">
<label>Phone</label>
<?php $this->widget(
'yiiwheels.widgets.maskinput.WhMaskInput',
array(
'name' => 'maskphoneustest',
'mask' => '(999) 999-9999',
'htmlOptions' => array('placeholder' => '(999) 999-9999', 'class' => 'form-control input-medium'),
)
);?>
</div>
</div>
Useful plugin to enter money amounts.
<div class="input-group">
<span class="input-group-addon">$</span>
<?php $this->widget(
'yiiwheels.widgets.maskmoney.WhMaskMoney',
array(
'name' => 'maskmoneytest',
'htmlOptions' => array(
'class' => 'form-control'
)
)
);?>
</div>
Bootstrap multiselect included. Check its Site to find out about its configuration options.
<?php
$this->widget('yiiwheels.widgets.multiselect.WhMultiSelect', array(
'name' => 'multiselecttest',
'data' => array(
'2amigos', 'consultation', 'group', 'llc'
)
));
?>
Included the Select2 on roids plugin of Igor Vaynberg. The following is a simple example of the amount of possible features that this plugin can do. For further information on its use, please visit plugin docs.
<?php
$this->widget('yiiwheels.widgets.select2.WhSelect2', array(
'asDropDownList' => false,
'name' => 'select2test',
'pluginOptions' => array(
'tags' => array('2amigos','consulting', 'group', 'rocks'),
'placeholder' => 'type 2amigos',
'width' => '40%',
'tokenSeparators' => array(',', ' ')
)));
?>
<?php $this->widget('yiiwheels.widgets.switch.WhSwitch', array(
'name' => 'switchbuttontest'
));?>
Nice timepicker helper. For more information, please visit Bootstrap TimePicker
<?php $this->widget(
'yiiwheels.widgets.timepicker.WhTimePicker',
array(
'name' => 'timepickertest'
)
);?>
Do not get confused, this is not the regular bootstrap typeahead. This is bootstrap typehead.js on roids :)
The following example, does not show its full potential. Check the examples on their site for more information.
<?php $this->widget('yiiwheels.widgets.typeahead.WhTypeAhead', array(
'name' => 'typeaheadtest',
'pluginOptions' => array(
'name' => 'test',
'local' => array(
'2amigos', 'matt', 'tabin', 'antonio', 'ramirez'
)
)
));?>