Symfony 2 - How to remove the default date picker of the Date Field Type?

Question

In my formType I use the following to render my Date Field Type.

$builder->add('date_naissance', 'date', array(
            'input'  => 'datetime',
            'widget' => 'single_text',
        ));

Here belox how it is rendered. My problem is that i want to use a jquery picker and the thing is that the input seems to contain already by default some ugly widget to select the date. My question is simple. How can I get reed of that default date picker. Thank you in advance for your replies. Cheers. Marc

enter image description here

If this is still bothering you please check the updated answer for the most elegant solution: http://stackoverflow.com/a/14362310/744975 — Andrew Atkinson, Mar 24 '16 at 11:15

score 13 · Answer 1 · edited May 23 '17 at 12:31

Edit, since symfony 2.6

You can now use the html5 field option like:

->add('date', DateType::class, ['html5' => false]);

This will remove the html5 type="date" on the form view.

It is a HTML5 datepicker. the html will have

type="date"

which is output by symfony by default, as it should.

Chrome will see this and do the datepicker,

Some ideas to resolve your issue:

Change the format in the form builder:

$builder->add('date_created', DateType::class, array( 'widget' => 'single_text'));

Read more here: http://symfony.com/doc/current/reference/forms/types/date.html#format
Remove browser datepicker: https://stackoverflow.com/a/11470344/744975
Override the browsers datepicker with one from another javascript library: https://jqueryui.com/datepicker/ (My preferred option)

score 9 · Answer 2 · answered Mar 23 '15 at 03:12

Starting from symfony 2.6 you can set 'html5' => false in order to disable HTML5 type.

Example:

$builder->add('establishment_date', 'date', array(
        'label'   => 'Establishment date',
        'widget'  => 'single_text',
        'html5'   => false,
));

score 5 · Answer 3 · answered Feb 21 '13 at 17:37

5

Simply change default type to text inside twig:

{{form_widget(dateField, {'type':'text'})}}

answered Feb 21 '13 at 17:37

valdas.mistolis

1,313
13
14

score 4 · Accepted Answer · answered Jan 16 '13 at 15:10

4

That's not really a problem coming from Symfony. I don't have that kind of datepicker when I generate my date fields. Check your page in different browsers and/or check for some bundles you may have implemented, that generate this field.

answered Jan 16 '13 at 15:10

Schwierig

712
5
9

1

I there. Thank you for trying to help. Your answer was a good hint. I tried rendering the page using Safari and not Chrome and that ugly date picker disapeared. I have to figure out now if it is really coming from Chrome and if yes how to remove that... – Marc Jan 16 '13 at 15:19

score 0 · Answer 5 · answered Aug 02 '13 at 14:51

You can do that by overriding the form_widget_simple in a twig theme (see http://symfony.com/doc/current/cookbook/form/form_customization.html)

{% block form_widget_simple %}
{% spaceless %}
    {% set type = type|default('text') == 'date' ? 'text' : type|default('text') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{% endblock form_widget_simple %}

Symfony 2 - How to remove the default date picker of the Date Field Type?

5 Answers5