Symfony Form/Symfony2/Twitter Bootstrap

Symfony2 Forms with Bootstrap 3 : Datepicker for date field

Posted on by Anis Ahmad / 22 Comments

Symfony2 Forms have a rich set of field types and many defined widgets for rendering fields. But still we may need a different representation of a field. For example, in a web application of today we cannot think of a date field without a datepicker.

Symfony2 Forms don’t have any built in widget for rendering a date field with a datepicker. But, Symfony Form’s customization options are so flexible that, actually there is nothing to be worry about. Just in few minutes, using a simple trick, we can turn our date filed into a datepicker. In this post, I am going to share the trick with an example.

Datepicker vs Symfony Form's default date widget

To demonstrate this idea, first we need a rendered Symfony Form with a date field. If you don’t have it already, please quickly go through Step 1 and Step 2 of previous post about Symfony2 Forms. We’ll now discuss about how to render the date field with a datepicker instead of 3 dropdowns. It’s just 3 tasks.

NoteAlthough we are discussing only date field here, same idea can be implemented for datetime or any other field that we want to render with a javascript widget.

Step 1. Include a JavaScript Datepicker

Let’s choose a beautiful javascript datepicker first. For our example, I am choosing bootstrap-datepicker. It’s lightweight, easy to use and looks cool with twitter bootstrap. Because of rich data-api, it’s very easy to use with Symfony Forms.

So, if you don’t already have any other javascript datepicker included, let’s include this library –

  1. Download this library from github.
  2. Place it in Resources/public/plugins/ directory of your Bundle or in /app.
  3. Include the js/bootstrap-datepicker.js and css/datepicker.css files of this plugin in your layout.

See how to do it if you’ve any confusion.

Step 2. Render the date field as text input

Just add the following options to date filed –

  1. // ->add('dueDate', 'date')
  2. ->add('dueDate', 'date', ['widget' => 'single_text', 'format' => 'dd-MM-yyyy'])

Now the dueDate field will be rendered as a text input. And, after submission of the form, Symfony will expect the date as dd-MM-yyyy (this is the default) format. For more information on valid formats, see Date/Time Format Syntax.

Step 3. Instantiate datepicker with this text input

This step may vary based on the javascript widget we are using. For our case, bootstrap-datepicker provides data-attributes for instantiating and configuring datepicker on a target element. Let’s set proper attributes on our dueDate field –

  1. // ->add('dueDate', 'date', ['widget' => 'single_text', 'format' => 'dd-MM-yyyy'])
  2. ->add('dueDate', 'date', [
  3.     'widget' => 'single_text',
  4.     'format' => 'dd-MM-yyyy',
  5.     'attr' => [
  6.         'class' => 'form-control input-inline datepicker',
  7.         'data-provide' => 'datepicker',
  8.         'data-date-format' => 'dd-mm-yyyy'
  9.     ]
  10. ]

Here, using the data-provide attribute we are instructing to instantiate a datepicker on this text field and using data-date-format to set the date format to Symfony’s expected pattern. If you change the date format, remember to change data-date-format attribute and format options respectively. Check the full list of configuration options. You’ll surely be amazed with the completeness of option set.

NoteIf your datepicker library do not provide data-attributes like this example, you can use the datepicker class (we’ve set in line 6) to select dueDate field in javascript.

We’re Done! It was easy, right?

, , ,
Anis Ahmad

22 Comments

  1. Pingback: Symfony Forms with Bootstrap 3 : Rendering a help block | Anis Ahmad's Blog

    1. Thanks 🙂
      Yes, you can add time using the same technique. You just need to choose a plugin that supports date-time picker which have similar data-attributes for setting options. Otherwise, you have to configure and activate it from javascript.
      BTW, this bootstrap datepicker don’t support time.

      Reply
  5. Pingback: Symfony Forms and Bootstrap Datetimepicker - Programming and Technology

  8. Hi Anis, I am running to a couple of issues:
    1- I don’t get the mouse hover effect on single cell, though the entire row turns grey on mouse hover.
    2- When I click outside the calendar it doesn’t get closed, precisely it will close only if I click on the upper or lower empty area of the calendar. It won’t close if I click on the empty area on the right side of the calendar.
    3- How can I add a calendar icon next to the selected date?

    Thanks

    Reply

  10. Hi, thanks for the explanation.
    One question,
    how can I set the default date into the datepciker to current date, for example?
    Thanks

    Reply

  11. hello thx for this clear tuto , but i got this problem: Parse Error: syntax error, unexpected ‘[‘ (in line 2 in your example) , any idea plz ?

    Reply

  12. Hey,

    How do I change the starting date, for over 18 limitation [first available date for selection should be today – 18 years]?
    While at it, how do I limit the end date [lets say for 120 years]?

    Thanks

    Reply

  13. Thanks, it worked perfectly. But now I need to implement a bootstrap timepicker in a symfony form? I looked for but I didn´t found nothing. Can anyone help me?? Thanks so much.

    Reply

  14. Thanks for this post.
    For Symfony3 is necessary add this code:
    use Symfony\Component\Form\Extension\Core\Type\DateType;

    And change this code:

    ->add(‘fechaInicio’, DateType::class, array(
    ‘label’ => ‘Fecha de Inicio’,
    ‘widget’ => ‘single_text’,
    ‘attr’ => array(
    ‘class’ => ‘form-control input-inline datepicker’,
    ‘data-provide’ => ‘datepicker’,
    ‘data-date-format’ => ‘yyyy-mm-dd’
    )
    )
    )

    Regards

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *