textInput Layout destroyed by jui Datepicker in yii2 basic

Question

tried to use jui/Datepicker within an ActiveForm:

<?= $form->field($model, 'valid_to')->textInput()->widget(DatePicker::className(),['clientOptions' => ['defaultDate' => '2014-01-01'],'dateFormat' => 'yyyy-MM-dd']) ?>

It works fine but unfortunaltely, it destroys the layout of the inputFiel of yii2´s "basic" template like this: the label is no longer located on top of the field but on the left, the surrounding of the field won´t be colored in green / red after js validation.

Is there a property of DatePicker like "do not override input field css"? What´s the right thing to do to solve this?

Following doesn´t work:

Here is the yii2 code:

<?= $form->field($model, 'id_currency')->textInput() ?>
<?= $form->field($model, 'valid_to')->widget(DatePicker::className(),['class' => 'form-control','clientOptions' => ['defaultDate' => '2014-01-01'],'dateFormat' => 'yyyy-MM-dd']) ?>

Output HTML:

<div class="form-group field-license-id_currency required">
<label class="control-label" for="license-id_currency">Id Currency</label>
<input type="text" id="license-id_currency" class="form-control" name="license[id_currency]">

<div class="form-group field-license-valid_to required">
<label class="control-label" for="license-valid_to">Valid To</label>
<input type="text" id="license-valid_to" name="license[valid_to]">

class="form-control" is missing in the datePicker input Field.

d enkler · Accepted Answer · 2015-01-14 05:41:59Z

4

In the meantime I could figure it out with the help of yii-forum. Following code works:

<?= $form->field($model, 'valid_to')->widget(DatePicker::className(),['clientOptions' => ['defaultDate' => '1980-01-01'],'dateFormat' => 'yyyy-MM-dd' ,'options'=>['style'=>'width:250px;', 'class'=>'form-control']]) ?>

answered Jan 14, 2015 at 5:41

d enkler

517 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai P. · Accepted Answer · 2015-01-10 23:03:44Z

0

I do not think they work like that. First having

->textInput()->widget(

is redundant. You should be able to remove the ->textInput().

Also making the field turn red of green is easy. You can use the parent a div with

<div class="form-group **** required has-error">

or

<div class="form-group **** required has-success">

to make them any color you want.

You might be able to add the colors right away by adding to the config of it (not tested)

->widget(DatePicker::className(),['class' => 'form-control', 'clientOptions' => ['defaultDate' => '2014-01-01'],'dateFormat' => 'yyyy-MM-dd'])

the option "do not override input field css" will come in the next version together with "guess what I am thinking and do it"

answered Jan 10, 2015 at 23:03

Mihai P.

9,3673 gold badges41 silver badges50 bronze badges

1 Comment

d enkler Over a year ago

I think your last proposal is the thing I am missing but it doesn´t seem to work. I added the code in the question avove.

johnsnails · Accepted Answer · 2015-10-09 00:52:23Z

0

Here is a more complete example for people who need to use a custom template.

<?= $form->field($model, 'valid_to', ['template' => '<div class="col-xs-12 col-sm-12 col-md-6">{label}:{input}{error}{hint}</div>'])->widget(DatePicker::className(),['dateFormat' => 'yyyy-MM-dd' ,'options'=>['class'=>'form-control']]) ?>

answered Oct 9, 2015 at 0:52

johnsnails

1,98122 silver badges30 bronze badges

Collectives™ on Stack Overflow

textInput Layout destroyed by jui Datepicker in yii2 basic

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related