Thursday, October 25, 2012

sf2 input type date - disable native datepicker

Newer versions of the Google Chrome browser (and perhaps Firefox will follow) implement their own datepicker on input fields with type="date". This seems to be some new fancy HTML5 feature, but correct me if I'm wrong. If you are using jQuery datepicker throughout your whole project for example, you suddenly have two datepickers on that input field.

There is no possibility to turn off the native datepicker with additional attributes. You are left with three solutions to your problem:

  1. Use modernizr to detect this feature and only enable jQuery datepickers, if not present:
  2. Prevent standard event handling on this kind of input types: which I don't think is a good solution!
  3. Render all form fields of type date with type="text" in symfony2. To enable this globally, register a global form theme in your config.yml as described in the Symfony2 documentation. My form theme consists of the following Twig code: This overwrites form_widget_simple and checks for the registered field type before setting it for the input field. If it finds 'date' it is overwritten with 'text'. Very nice and quick solution in my opinion, hope that helps you.