I use the select2 widget from kartik:
echo $form->field($model, 'person_ids')->widget(Select2::classname(), [
'data' => [1 => 'test1', 2 => 'test2'],
'theme' => Select2::THEME_KRAJEE_BS5,
'hideSearch' => true,
'options' => [
'multiple' => true
],
'pluginOptions' => [
'allowClear' => true
],
])->label('Personal');
The rendering of the search field is wrong - it intends the selected options. Any ideas how to fix this?
Related
It is necessary that in the field listBoxt, there was a placeholder, something like "Select a role for the user", i.e. message that the user sees without selecting anything in the listbox. But this should include the option 'prompt' => 'remove the role' so that the user can remove the role through the drop-down list.
Is it possible to do this through the standard Yii functional without resorting to JS?
echo $form->field($model, 'additionalRoles', [
'options' => [
'class' => 'form-group',
],
])->listBox($additionalRoles, [
'class' => 'form-control j-multi-select2',
'prompt' => 'Select additional role',
]);
For example: https://jsfiddle.net/8e7avn2d/1/
<?=
$form->field($model, 'additionalRoles', [
'options' => [
'class' => 'form-group',
],
])
->listBox($additionalRoles, [
'class' => 'form-control j-multi-select2',
'prompt' => [
'text' => "Select additional role",
'options' => [
'disabled' => true,
'selected' => true,
'hidden' => true,
]]
]);
?>
to achieve your example you should use dropDownList instead of listBox
echo $form->field($model, 'additionalRoles', [
'options' => [
'class' => 'form-group',
],
])->dropDownList($additionalRoles, [
'class' => 'form-control j-multi-select2',
'prompt' => 'Select additional role',
]);
How can i make this input type with number. I mean when the page is opened in mobile phone, it'll be open the number keyboard.
[
'class'=>'kartik\grid\EditableColumn',
'headerOptions' => ['style' => 'width:10%', 'class'=>'text-center'],
'editableOptions'=>[
'asPopover' => false,
'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
// Change here:
'editableValueOptions'=>['type'=>'number']
],
'attribute'=>'quantity',
'label'=>'Quantity',
],
EDIT ->> add 'editableValueOptions'=>['type'=>'number']
Use editableValueOptions. As the documentation says:
editableValueOptions: array, the HTML attributes for the editable value displayed.
[
'class'=>'kartik\grid\EditableColumn',
'headerOptions' => ['style' => 'width:10%', 'class'=>'text-center'],
'editableOptions'=>[
'asPopover' => false,
'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
// Change here:
'editableValueOptions'=>['type'=>'number']
],
'attribute'=>'quantity',
'label'=>'Quantity',
],
'attribute' => 'quantity',
'class' => 'kartik\grid\EditableColumn',
'editableOptions'=>[
'valueIfNull' => 'not set',
'inputType' => \kartik\editable\Editable::INPUT_HTML5,
'options' => [
'type' => 'number',
'min' => '0.5',
'step' => '0.5',
],
],
You should use options array as shown above
In my model I use DateValidation
['date_birthday', 'date', 'format' => 'd.m.yy', 'min' => '01.01.1900', 'max' => date('d.m.yy'), 'tooSmall'=>'The date is from past. Try another','tooBig' => 'The date is from future. Try another', 'message' => 'Try to input the date'],
In view I call the widget
<?php echo $form->field($modelForm, 'date_birthday')->widget(\kartik\date\DatePicker::classname(), [
'type' => \kartik\date\DatePicker::TYPE_COMPONENT_APPEND,
'pickerButton' => false,
'options' => [
'placeholder' => '',
],
'pluginOptions' => [
'format' => 'dd.mm.yyyy',
'autoclose' => true,
'showMeridian' => true,
'startView' => 2,
'minView' => 2,
]
]) ?>
It checks for min and max dates, but show no error message. I think its because of different date formats in model and view. How to fix it?
If you submit form you will see error messages. According to this issue https://github.com/yiisoft/yii2/issues/7745 yii2 have not client-side validations of date
You can enable ajax validation. Add in create and update action before if statement
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
return ActiveForm::validate($model);
}
And add use yii\widgets\ActiveForm; on the top of controller class. In your _form.php file enable ajax for whole form
<?php $form = ActiveForm::begin([
'enableAjaxValidation' => true,
]); ?>
, or for the field only
<?php echo $form->field($model, 'date_birthday', ['enableAjaxValidation' => true])->widget(\kartik\date\DatePicker::classname(), [
...
Also, you can add plugin options for limit date with startDate and endDate (https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate)
<?php echo $form->field($model, 'date_birthday', ['enableAjaxValidation' => true])->widget(\kartik\date\DatePicker::classname(), [
'type' => \kartik\date\DatePicker::TYPE_COMPONENT_APPEND,
'pickerButton' => false,
'options' => [
'placeholder' => '',
],
'pluginOptions' => [
'format' => 'dd.mm.yyyy',
'autoclose' => true,
'showMeridian' => true,
'startView' => 2,
'minView' => 2,
'startDate' => '01.01.1900',
'endDate' => date('d.m.Y'),
]
]) ?>
I am using kartik datepicker extension http://demos.krajee.com/widget-details/datepicker in Yii2.
Issue :
If I use this with custom id for input it does not show show model validations
echo kartik\date\DatePicker::widget([
'model' => $objPatientModel,
'form'=>$objActiveForm,
'attribute' => 'date_of_birth',
'options' => ['placeholder' => 'Enter birth date ...', 'id' => 'patient_dob'], **// with id clientside validations for model does not work**
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'endDate' => date('d-m-Y'),
]
]);
While below code works
echo kartik\date\DatePicker::widget([
'model' => $objPatientModel,
'form'=>$objActiveForm,
'attribute' => 'date_of_birth',
'options' => ['placeholder' => 'Enter birth date ...'],**//id is not used here**
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'endDate' => date('d-m-Y'),
]
]);
But I want to use custom id .Any suggestions ?
You have to override the selectors, example:
$form->field($model, 'comment', ['selectors' => ['input' => '#myCustomId']])
->textarea(['id' => 'myCustomId']);?>
See https://github.com/yiisoft/yii2/issues/7627
<?=
$form->field($model, 'sales_date')->widget(DateControl::classname(), [
'name' => 'sales_date',
'value' => date('d-m-Y h:i:s'),
'type' => DateControl::FORMAT_DATETIME,
'autoWidget' => true,
'displayFormat' => 'php:d-m-Y h:i:s',
'saveFormat' => 'php:Y-m-d h:i:s',
'saveOptions' => [
'type' => 'hidden',
'form' => 'sales-form-red',
],
])
?>
by using the following option you can add extra form tag to input
'saveOptions' => [
'type' => 'hidden',
'form' => 'sales-form-red',
'class' => 'sales_date',
]
In my case out was
<input type="hidden" id="sales-sales_date" name="Sales[sales_date]" form="sales-form-red">
check by using link
Date Control Demo
I'm using kartik's typeahead widget for Yii2 in a view:
echo \kartik\typeahead\Typeahead::widget([
'name' => 'serial_product',
'options' => [
'placeholder' => 'Filter as you type ...',
'autofocus' => "autofocus"
],
'scrollable' => TRUE,
'pluginOptions' => [
'highlight' => TRUE,
'minLength' => 3
],
'dataset' => [
[
'remote' => Url::to(['transfers/ajaxgetinventoryitemsnew']) . '?search=%QUERY',
'limit' => 10
]
],
'pluginEvents' => [
"typeahead:selected" => "function(obj, item) { add_item(item.id); return false;}",
],
]);
How can i get the number of loaded suggestions after the remote dataset is retrieved to execute a javascript function like:
displaynumber(NUMBEROFSUGGESTIONS);
After checking through the source of kartiks widget i came up with the following solution:
echo \kartik\typeahead\Typeahead::widget([
'name' => 'serial_product',
'options' => [
'placeholder' => 'Filter as you type ...',
'autofocus' => "autofocus",
'id' => 'serial_product'
],
'scrollable' => TRUE,
'pluginOptions' => [
'highlight' => TRUE,
'minLength' => 3
],
'dataset' => [
[
'remote' => [
'url' => Url::to(['transfers/ajaxgetinventoryitemsnew']) . '?search=%QUERY',
'ajax' => ['complete' => new JsExpression("function(response)
{
jQuery('#serial_product').removeClass('loading');
checkresult(response.responseText);
}")]
],
'limit' => 10
]
],
'pluginEvents' => [
"typeahead:selected" => "function(obj, item) { checkresult2(item); return false;}",
],
]);
where response.responseText is containing the response from server (json).
function checkresult(response) {
var arr = $.parseJSON(response);
console.log(arr.length);
}
With this function i can get then count of suggestions delivered from server.