样式化日期时间 symfony / bootstrap

Question

我正在使用 Symfony 和 Bootstrap 进行个人项目。

我创建了一个带有字段 "datetime" 的表单。 Twig 为我生成了几个输入（日、月、年、小时、分钟），但它不是真的 "user friendly"。

我想知道如何设置输入样式以创建日期时间选择器，就像这里的那个：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 as "single_text" and 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，换句话说，它会导致输入类型="text" 而不是输入 tipe="datetime"。来自 Symfony docs:

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

样式化日期时间 symfony / bootstrap

Styling datetime symfony / bootstrap

css

php

datetime

symfony

twitter-bootstrap