如何在Symfony表单中添加bootstrap datetimepicker

时间:2017-01-21 16:07:01

标签: twitter-bootstrap symfony datepicker

我正在尝试在我的Symfony表单中使用http://eonasdan.github.io/bootstrap-datetimepicker/

我补充说:

<link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker-standalone.min.css') }}">
<link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">

<script type="text/javascript" charset="utf8" src="{{ asset('assets/js/jquery-3.1.1.min.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset('assets/js/moment.min.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}"></script>

但现在我不知道如何更改表单类型以使用datepicker

我尝试过这样的事情并且无法正常工作

->add('date', DateTimeType::class, array(
'required' => true,
'widget' => 'single_text',
'attr' => [
    'class' => 'form-control input-inline datetimepicker',
    'data-provide' => 'datetimepicker',
    'html5' => false,
],
))

有人可以帮助我吗?

4 个答案:

答案 0 :(得分:2)

假设文档http://symfony.com/doc/current/reference/forms/types/date.html#rendering-a-single-html5-textbox。 你的代码似乎很好。你在控制台中有任何错误吗?

答案 1 :(得分:0)

我不确定这是否是唯一的问题,但是您可能需要将DateTimeType :: class更改为texttype :: class。

我希望这会有所帮助! 祝你好运

答案 2 :(得分:0)

您应该将 html5 键/值从 attr 移动到 options :

->add('date', DateTimeType::class, array(
'required' => true,
'widget' => 'single_text',
'html5' => false,
'attr' => [
    'class' => 'form-control input-inline datetimepicker',
    'data-provide' => 'datetimepicker',
],
))

答案 3 :(得分:-1)

我面临着同样的问题。 Symfony中Datetime类型的默认Form-Component会呈现另一组输入字段。

引导方法需要一个“正常”输入字段,并将DateTime呈现为字符串。因此,您必须使用 TextType :: class 为了在实体中使用DateTime,我添加了EntityTransformer来处理在sting和DateTime之间的读写操作转换。

您可以这样做:

$builder->get( 'from' )->addModelTransformer( new CallbackTransformer(
    function ( $date ) {
        return $date->format( 'd.m.Y H:i' );
    },
    function ( $date ) {
        return new \DateTime( $date );
    }
) );