样式化日期时间 symfony / bootstrap

Question

我将 Symfony 和 Bootstrap 用于个人项目。

我创建了一个带有“日期时间”字段的表单。 Twig 为我生成了几个输入（日、月、年、小时、分钟），但它并不是真正“用户友好”。

我想知道如何设置输入的样式以创建日期时间选择器，就像这里的那个：http://tarruda.github.io/bootstrap-datetimepicker/

这里有一些代码： - 表单类型：

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('dateStart');
        $builder->add('dateEnd');
    }

• 树枝：

  {{ form_widget(form.dateStart)}}
  {{ form_errors(form.dateStart) }}
  
  {{ form_widget(form.dateEnd)}}
  {{ form_errors(form.dateEnd) }}
  

我该怎么做？

谢谢你的回答

Answer 1

将字段widget 设置为“single_text”并将html5 选项设置为false：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('dateStart', 'datetime', array(
        'widget' => 'single_text', 
        'html5' => false,
    ));
   //...
}

在树枝模板上：

<div id="datetimepicker1" class="input-append date">
    {{ form_widget(form.dateStart, {attr: { 
        'data-format': "dd/MM/yyyy hh:mm:ss" },
    }) }}
    <span class="add-on"> 
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

当将 html5 选项设置为 false 时，它​​会避免使用原生日历 HTML 5，换句话说，它将导致输入 type="text" 而不是 inputtipe="datetime"。 来自 Symfony docs：

如果设置为 true（默认值），它将使用 HTML5 类型（日期、时间或日期时间）来呈现字段。当设置为 false 时，它​​将使用文本类型。 这在您想要使用自定义 JavaScript 数据选择器时很有用，这通常需要文本类型而不是 HTML5 类型。