yii2 basic中jui Datepicker销毁的textInput布局

Question

试图在 ActiveForm 中使用 jui/Datepicker：

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

它工作正常但不幸的是，它破坏了 yii2 的 "basic" 模板的 inputFiel 布局，如下所示：标签不再位于字段顶部，而是位于左侧，经过 js 验证后，字段的周围不会被着色为绿色/红色。

有没有像"do not override input field css"这样的属性DatePicker？解决这个问题的正确做法是什么？

以下无效：

这里是yii2代码：

<?= $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']) ?>

输出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" 在 datePicker 输入字段中缺失。

Answer 1

我不认为他们是那样工作的。首先有

->textInput()->widget(

是多余的。您应该能够删除 ->textInput()。

让字段从绿色变成红色也很容易。您可以将父 div 与

一起使用

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

或

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

让它们变成你想要的任何颜色。

您可以通过添加到它的配置（未测试）来立即添加颜色

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

选项"do not override input field css"将与"guess what I am thinking and do it"

一起出现在下一个版本中

Answer 2

在此期间，我可以在 yii-forum 的帮助下解决这个问题。以下代码有效：

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

Answer 3

这里有一个更完整的示例，供需要使用自定义模板的人使用。

<?= $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']]) ?>

yii2 basic中jui Datepicker销毁的textInput布局

textInput Layout destroyed by jui Datepicker in yii2 basic

jquery

datepicker

yii2