Date/Time Range Selector Widget for Symfony

I needed to create a date/time widget for use in an sfForm in a symfony project I was working on, and unfortunately there’s not currently a widget that I could find to allow this. In this post I show how I solved this problem, creating a widget for selecting a date range, using the jquery date selector from sfFormExtraPlugin.

The end result looks like this:

DateTime Widget

The reason to create a widget for this is to allow for it to be reused across the site, and of course in other projects too. A similar widget for selecting date ranges already exists (sfWidgetFormDateRange) however it unfortunately doesn’t support having time widgets too. My sfWidgetFormDateTimeRange widget is based off this widget. Here’s the code, with comments removed:

As you can probably see from the code above, the concept is simple – our range widget is essentially a container around 4 other widgets which are provided as options. Allowing the definition of the enclosed widgets allows for extra flexibility, as the exact widgets used for the date and time selections can be defined when the widget is constructed.

Using the widget in a sfForm

The code below shows a simple example of how this widget can be used. I’ve added a little extra ‘fluff’ around it – to limit the minute drop down to 5 minute intervals, and defined a calendar icon for the jQuery pop-up activator.

Using the widget with the admin generator

In your model, it’s likely you’ll have a ‘startdate’ and ‘enddate’ field or similar – and as this single widget is for setting both of these fields, a little bit of extra work is needed in your form class. This code below shows using

and

to correctly setup the form from an object instance and save the values back to the model.

That is all that’s needed! The admin generator will call the methods correctly for you and editing should ‘just work’! The above is Doctrine specific, however modifying it for Propel or anything else should be reasonably simple.

Conclusion

I chose to write this post to demonstrate the flexibility of the sfForm system, and to show an example of a reasonably rich widget. This will be released as part of a plugin at some point.

When writing forms for your project, don’t be afraid to write widget classes that are domain specific. For example, for our internal systems at work, I created a TimicoWidgetFormAccountId widget, which originally was just providing a simple text input, with a specific class attribute for styling. Later, I simply needed to modify this widget to project AJAX style lookups of customers to help people fill in a customers Account ID if they didn’t know it. If I didn’t create this widget to start with, even though to start with it served little purpose, I’d have had to go back though many form classes and make alterations.

11 thoughts on “Date/Time Range Selector Widget for Symfony”

    1. Thanks for your comment.

      Yeah – my screenshot is pretty awful… I really do suck at design when it comes to UI’s, I’ll be the first to admit that, and my boss a close second 😉

      The way the output rendered is easily stylable, and it’s templated too – and it looks more interesting when you use it because you of course get the nice jQuery calender widget pop up.

  1. I need example to configure sfWidgetFormJQueryDate for Filters with date range, somebody help me please? Thank you!

  2. Thank you a lot ! I spent 2 days trying to do this !!
    This is really helpful so it is a good idea if you can submit it to symfony or as a plugin.
    Thanks again.

Leave a Reply

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