Styling datetime symfony / bootstrap

Question

I am using Symfony and Bootstrap for a personnal project.

I created a form with a field "datetime". Twig generates me several inputs (day, month, year, hour, minute) but it's not really "user friendly".

I would like to know how I can styling the input to create a datetimepicker, like the one here : http://tarruda.github.io/bootstrap-datetimepicker/

Here some code : - FormType :

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

• Twig :

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

How could I do that ?

Thanks for you answers

Answer 1

Set field widget as "single_text" and html5 option to false:

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

On twig template:

<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>

When setting html5 option to false it avoid native calendar HTML 5 to be used, in other words it'll cause a input type="text" rather input tipe="datetime". From Symfony docs:

If this is set to true (the default), it'll use the HTML5 type (date, time or datetime) to render the field. When set to false, it'll use the text type. This is useful when you want to use a custom JavaScript datapicker, which often requires a text type instead of an HTML5 type.