[solved] 'class' => 'form-control' with jui\DatePicker using ActiveForm

Yii 2.0 General Discussions
1

Hi,

I am using jui\DatePicker widget within ActiveForm-widget like this:




<div class="musictitle-form">


    <?php $form = ActiveForm::begin(); ?>


    <?= $form->field($model, 'amount')->dropDownList(['100'=>'100 Euro','133'=>'133 Euro','200'=>'200 Euro'],['prompt' => '--Select--', 'options' => ['133'=> ['disabled' => true]]]) ?>

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

    <?= $form->field($model, 'id_currency')->textInput() ?>

    <div class="form-group">

        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

    </div>


    <?php ActiveForm::end(); ?>


</div>

The input field somehow looses its css class and therefore is malformatted (see screenshot).

Here is the html output with the missing class="form-control"




    <div class="musictitle-form">

      <form id="w0" action="/basic/web/musictitle/create?id_customer=3" method=

      "post" name="w0">

        <input type="hidden" name="_csrf" value=

        "TmRyeWYucnQ6KEEwC0oARicPCE8MGzk7FxYcEicbSxohUhQ2V0BDKw==">

        <div class="form-group field-musictitle-amount">

          <label class="control-label" for="musictitle-amount">Amount</label>

          <select id="musictitle-amount" class="form-control" name=

          "musictitle[amount]">

            <option value="">

              --Select--

            </option>

            <option value="100">

              100 Euro

            </option>

            <option value="133" disabled>

              133 Euro

            </option>

            <option value="200">

              200 Euro

            </option>

          </select>

          <div class="help-block"></div>

        </div>

        <div class="form-group field-musictitle-valid_to required">

          <label class="control-label" for="musictitle-valid_to">Valid

          To</label> <input type="text" id="musictitle-valid_to" name=

          "musictitle[valid_to]">

          <div class="help-block"></div>

        </div>

        <div class="form-group field-musictitle-id_currency required">

          <label class="control-label" for="musictitle-id_currency">Id

          Currency</label> <input type="text" id="musictitle-id_currency"

          class="form-control" name="musictitle[id_currency]">

          <div class="help-block"></div>

        </div>

        <div class="form-group">

          <button type="submit" class="btn btn-success">Create</button>

        </div>

      </form>

    </div>

How can I tell the datePicker-widget to set this class for the input field "valid_to"?

2

try this, in widget




'htmlOptions'=>[

                        'style'=>'width:250px;',

			'class'=>'form-control',

                     	]
3

Thank you but this doesn´t work, in Yii2, the proper option is called "options".

But with your help I could figure it out myself, this 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']]) ?>