On our latest project for McGill University’s Community Engagement Day we wanted to find a better way for event times to be entered and searched for by people using the site. We discovered timefield which provides a beautiful API alongside a timepicker widget that is missing from the regular Date field. What was missing was a proper integration into a views exposed filter field in order for the widget to appear. We’ll show you how we did this!
Create your content type & views
In Drupal 7, you will need to have a content type that contains your new timefield. Then create a new view with an appropriate output and include the Event Time filter, which should be exposed to visitors.
Modify the exposed filter in views
Besides modifying the settings that you require for the timefield you also need to make sure to set a proper variable in the section (shown below) which can be named pretty much anything you like.
$js_settings = array(‘filter-project-event-time’ => array(
Modify the actual form element
With that being said all is not lost. Simply modify your template.php code in your theme layer and add the following code.
You will need to modify the #id to match the appropriate field, but if you created the theme as indicated above chances are it matches directly. If you changed the filter name used for the settings before be sure to modify it in the code above as well since you need to set the proper CSS class name to match.
That’s it! If you clear your cache it should display the popup properly and start to enter the hour/minutes as you can within a content type!