symfony2 - datetime picker - combine form types into one

Question

I am looking to create a re-usable datetime picker in symfony2. The idea is it will consist of 3 separate input parameters. I will update the question with complete info so other people can use my findings.

{text input} {select hour} {select time}

The question is how do I create a custom re-usable form that combines 3 inputs into one.

I have attached a screenshot to give an idea of what im trying to achive

the symfony docs
http://symfony.com/doc/current/cookbook/form/create_custom_field_type.html#creating-a-template-for-the-field

Answer 1

You can simply use the jquery.datetime picker to show a datetime picker or just one of them(date or time).

i recently made on one of my website.

$builder->add('dateheure', 'datetime', array('date_widget' => "single_text", 'time_widget' => "single_text"));

and call jquery, datetime css and js on your page:

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

and then active datetimepicker on your fields:

$(function(){
    $("#form_dateheure input").each(function(){
        $(this).attr("readonly","readonly");
    });
    $('#form_dateheure_date').datetimepicker({
        format: "Y-m-d",
        timepicker: false,
        datepicker: true,
    });
    $('#form_dateheure_time').datetimepicker({
        format: "H:i",
        timepicker: true,
        datepicker: false,
        step:5
    });
});