My Flatiron School team, Crystal, Tim and Tyler, and I recently presented our group project, Jane’s Lunch, at a NYC on Rails MeetUp. Jane’s Lunch is a web application that makes lunch delivery for group orders easy and fun.
I worked on a small piece of our Groups controller and some of the basic forms for creating and editing groups. This post is part one of two. In part one, I’m explaining how I installed a timepicker for the group forms. In part two, I’ll explain how I created a custom form helper to normalize the states input for user addresses.
Our group form requires users to select a designated lunch time. We wanted to normalize the time data so that we wouldn’t have problems parsing different time formats (e.g. “1:30PM” vs. “1:30 p.m.” vs. “13:30”). A timepicker would solve this issue. I found Bootstrap Timepicker, a timepicker built by @jdewit for use with Twitter Bootstrap.
To install the gem, I added this line to our Gemfile:
Next, I added this line to install the CSS for Bootstrap Timepicker:
*= require bootstrap-timepicker
//= require bootstrap-timepicker
In the view for our group form, I added the following:
Here’s a breakdown to explain the block of code above: Make sure to use an id not a class for the input selector that timepicker calls. I initially made lunch_time another class for the input instead of an id and it did not work.
I was wary of using an input form helper, so I just used regular HTML and mixed it in with the erb format. However, I wanted to make sure that my input name would be passed along with the rest of the group data in the params hash, so I used my browser inspector to check the name format for other inputs that used the rails form helpers. The names were set to ‘group[attribute_name]’ so that’s the format I followed for the timepicker input.
My timepicker() call would not work without the document.ready.
I set the configurations for timepicker based on the documentation.
The timepicker is a little buggy if you do not set a defaultTime. In some cases, the timepicker will show NaN:NaN if you don’t have any defaultTime set.
If the defaultTime, is only set to “12:00”, then the timepicker will always show “12:00,” even if the user has already set a lunch time.
The code fix above lets us set the timepicker to show the lunch time previously specified by the user or to show “12:00” if the user has not yet set it.