I am trying to make the text box of jui DatePicker in Yii2 look more like the other text boxes, by adding 'form-control' to the class name of the input control, when rendered.
I tried using clientOptions like this...
'clientOptions' => [ 'class' => 'form-control' ]
'clientOptions' => [ 'className' => 'form-control' ]
...and also as widget options, but am unable to figure this out.
Compared to Bootstrap Datetimepicker, the jui one looks really ugly.
Any ideas how I can add a class or make it look like other textboxes?
I have a simple datepicker, no fancy formattings, but am using it in my model.
Figured it out. It was simply...
'options' => ['class' => 'form-control']
It may be given like this.
<?= $form->field($model, 'client_name')->widget(
\yii\jui\AutoComplete::classname(),
[
'options' => ['class' => 'form-control'],
'clientOptions' => [
'source' => ['USA', 'RUS'],
],
]
)?>
I came across the same problem but
'options' => ['class' => 'form-control']
did not work for me. I resulted to using the CHtml argument called $htmlOptions which is basically an array that holds the attributes of the HTML element and it worked for me.
'htmlOptions'=>array('class'=>'form-control')
Related
I have a Yii2 active form which includes a field with datepicker. My form is using following attributes:
<?php $form = ActiveForm::begin([
'id' => 'campaign-form',
'enableClientValidation' => true,
'fieldConfig' => [
'options' => ['class' => 'gg-create-group'],
'labelOptions' => ['class' => null],
],
'options' => [
'autocomplete' => 'off',
'enctype' => 'multipart/form-data',
],
]);
?>
I have a field using jquery datepicker, the issue is each time I click on the arrows to navigate through the months in the calendar, client validation is triggered an a error is shown:
I need to stop the error message if the calendar is open and I am using the calendar navigation.
I know I can turn off client validation using:
enableClientValidation => false
But I want to keep client validation. I am wondering if Yii javascript script: $yiiform has an option to do that?
I found a solution. I can use validationOnBlur, if I set it to false on specific field it fixes the issue.
<?php echo $form->field($model, 'client_end_date',
['validateOnBlur' => false])->textInput(['readonly' => 'readonly']); ?>
In the grid view (Kartik) I would like to make any text in the text field of the filter (from previous filtering) to be selected as if I had double clicked it with mouse. So I can type a new filtering without the need to double click the field first to be able to immediately overwrite the previous value. I've searched, found nothing, tried intuitively like this, don't work:
[
'attribute' => 'numbern',
'filterInputOptions' => [
'class' => 'form-control',
'autofocus' => true,
'selected' => true,
],
],
Can you please point me into the right direction? Thanks!
Maybe some extra javascript like this (not tested)...
[
'attribute' => 'numbern',
'filterInputOptions' => [
'class' => 'form-control',
'autofocus' => true,
'onFocus' => 'this.select()',
],
],
I'm use Typeahead by Kartik.
<?= $form->field($model, 'id_operation')->widget(Typeahead::className(), [
'pluginOptions' => ['highlight'=>true],
'dataset' => [
[
'local' => \app\models\Operation::find()->asArray()->all(),
'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')",
'display' => 'name',
]
]
]) ?>
Need return value id . But select autocomplete by column name.
Help, please
Read here about a solution, it's not possible directly and you should probably change to select2 with specific configuration to achieve your goal.
https://github.com/kartik-v/yii2-widgets/issues/202
I'm using CakePHP Form helper to create form input fields. When a user edit an item, it will pre-fill the fields with data. I use v-model on each input field to make sure data is correctly populated.
It's all good for the textboxes as data is bound correctly. But for <select> fields, v-model doesn't seem to work. I've tried using default property for the Form->input() but no help. Here's some code:
<div class="fields">
<?= $this->Form->input('email', [
'label' => __('Email'),
'type' => 'email',
'v-model' => 'emailModel',
'placeholder' => __('Required'),
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
<?= $this->Form->input('status', [
'label' => __('Status'),
'type' => 'select',
'default' => '{{userStatus}}',
'options' => [
1 => 'Active',
2 => 'Inactive'
],
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
</div>
The email textbox has correct data filled, but not for the status selectbox. But if I replace {{userStatus}} with, for example, 2, it will set the default option to Inactive, even though {{userStatus}} itself has value 2.
How do I go about solving this?
I am new to VueJS but I came across the same question. The VueJS documentation states:
v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.
https://v2.vuejs.org/v2/guide/forms.html#Basic-Usage
Therefore, you need to assign your data.userStatus with your default value.
var vm = new Vue({
el: '#app',
data: {
statusModel: 2 // The default value goes here
}
});
PHP Side:
<div class="fields">
<?= $this->Form->input('email', [
'label' => __('Email'),
'type' => 'email',
'v-model' => 'emailModel',
'placeholder' => __('Required'),
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
<?= $this->Form->input('status', [
'label' => __('Status'),
'type' => 'select',
'v-model' => 'statusModel',
'options' => [
1 => 'Active',
2 => 'Inactive'
],
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
</div>
Hope this helps.
Is it possible to set certain options as selected in yii2 select2 widget from jquery. The widget is not initialised through js but it is bound to model attribute in form. Any help would be appreciated
Code:
echo $form->field($model, 'news_tags')->widget(Select2::classname(), [
'data' => ArrayHelper::map(app\models\Topics::findAll(['status' => 1]), 'tp_id', 'title'),
'options' => ['multiple' => true, 'placeholder' => 'Select Tags ...'],
'pluginOptions' => [
'tags' => false,
'allowClear' => true
],
])->label(FALSE);
I am trying to use an ajax call and on succes i want to add some tags from clientside.
As is presented in docs https://select2.github.io/examples.html#programmatic
you can use following code:
$("#form-field").val("5").trigger("change");
and it will select option, that has id 5