Question

尝试在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”。

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

Answer 2

我不认为他们这样做。首先有

->textInput()->widget(

是多余的。您应该能够删除 - ＆gt; 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”将出现在下一个版本中，并“猜测我在想什么并做到这一点”

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

textInput布局在yii2 basic中被jui Datepicker销毁

3 个答案: