Posts Tagged type

datepicker with custom types in symfony 2.1

Hey guys
So we recently have started working on a new project and I’m still learning things about symfony2
Each time I learn something about it I love it more and more
So yesterday(It’s 3:17 AM right now :D) I tried to created a date type that works with jquery datepicker and let us chose different format(For I18N)
I will tell you what you should do
First you need to create a file in yourBundle/Form/Type called DateType
The content of this file is going to be like this

public function buildForm(FormBuilderInterface $builder, array $options) {

$javascriptFormat = str_replace(array('yyyy', 'MM', 'dd'), array('yy', 'mm', 'dd'), $options['format']);

$builder->setAttribute('javascript_format', $javascriptFormat);

public function setDefaultOptions(OptionsResolverInterface $resolver)
'format' => 'yyyy/MM/dd',
'widget' => 'single_text'

'format' => 'string'

public function buildView(FormView $view, FormInterface $form, array $options)
$view->set('javascript_format', $form->getAttribute('javascript_format'));


Look for word “your” to see what you need to change
So basically we make a type that is child of date type(since in getParent we return date type name)
Next thing is to make some customization in form themes
You must read this part of documentation in symfony2 site
How to customize Form Rendering

So now you have a file in your-bundle/Resources/views/Form/fields.html.twig
Add this code to it

{% block date_widget %}
{% spaceless %}
{% if widget == 'single_text' %}
{% set attr = attr|merge({'data-date-format': javascript_format}) %}
{{ block('form_widget_simple') }}
{% else %}

{{ date_pattern|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
'{{ day }}': form_widget(,
})|raw }}

{% endif %}
{% endspaceless %}
{% endblock date_widget %}

It’s the same code as the one used in symfony core but with 1 more line which inject an attribute to the field to know what the format of the date is

The next step is to add your_date type to the services
I only have the yaml format so for xml you should use yaml to xml

class: your-bundle\Form\Type\DateType
- { name: form.type, alias: your_date }

In the layout or somewhere in your template you need to add this code

$(document).ready(function() {
$('[data-date-format]').each(function() {
numberOfMonths: 1,
dateFormat: $(this).attr('data-date-format'),
showButtonPanel: true

Now you’re all done
You can use your_date in the builder like this

public function buildForm(FormBuilderInterface $builder, array $options)
->add('beginDate', 'your_date', array('format' => 'dd/yyyy/MM'))
->add('endDate', 'your_date')


In the future I might add the data transformer so it could be even used for Persian calendar date
Have fun
P.S: I didn’t enter the details because I’m really tired so if you have any question about any part don’t hesitate to ask


, , , , ,

Leave a comment