yii2 basic中jui Datepicker破坏的textInput布局答案

【问题标题】：textInput Layout destroyed by jui Datepicker in yii2 basicyii2 basic中jui Datepicker破坏的textInput布局
【发布时间】：2015-01-10 22:04:24
【问题描述】：

尝试在 ActiveForm 中使用 jui/Datepicker：

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

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

是否有 DatePicker 的属性，例如“不要覆盖输入字段 css”？解决这个问题的正确做法是什么？

以下不起作用：

这里是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]">

datePicker 输入字段中缺少 class="form-control"。

【问题讨论】：

标签： jquery datepicker yii2

【解决方案1】：

与此同时，我可以在 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']]) ?>

【讨论】：

【解决方案2】：

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

->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'])

“不覆盖输入字段 css”选项将在下一个版本中与“猜我在想什么，然后去做”一起出现

【讨论】：

我认为您的最后一个建议是我所缺少的，但它似乎不起作用。我在上面的问题中添加了代码。

【解决方案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']]) ?>

【讨论】：