首页 文章

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

提问于
浏览 次
0

试图在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

3 回答

  • 0

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

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

    ->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”将在下一个版本中出现，并“猜测我在想什么并做到这一点”

    回复于
  • 4

    以下是需要使用自定义模板的人员的更完整示例 .

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

相关问题