Simple_form: HH : MM : AM/PM time select, in 3 select boxes?

Created on 3 Dec 2015  路  3Comments  路  Source: heartcombo/simple_form

I can't believe there is no information about this in google at all, let alone just in simpleform. I get why the default for time_select is to output in military time (most of the world uses this). But, pass in the ampm option and it is formatted like: HH PM : MM, with the AM/PM included in the first select box.

This bewilders me as to why someone would program it like that. I've never seen this, ever, at least not in the USA. Is this a normal design pattern in other countries? It certainly is not in the USA.

I just want my time select to be like HH (blank padded, like 3 or 12, not 03) : MM : AM/PM - in 3 separate select boxes.

time

But I rest my case as to the rails core - back to simpleform: Is there a way to output a time select in that format?

Most helpful comment

I was able to accomplish this manually (without simpleform) with the following code (if the form object is 'derp'):

<div class="timepicker">
  <select class="hour form-control" name="derp[hour]">
    <%= options_for_select((1..12).to_a, @derp.time ? @derp.time.strftime('%l').to_i : nil) %>
  </select>
  <span class="colon">:</span>
  <select class="minute form-control" name="derp[minute]" >
    <%= options_for_select(['00', '15', '30', '45'], @derp.time ? @derp.time.strftime('%M').to_i : nil) %>
  </select>
  <select class="meridiem form-control" name="derp[meridiem]" >
    <%= options_for_select(['AM', 'PM'], @derp.time ? @derp.time.strftime('%p') : nil) %>
  </select>
</div>

Then in the derp model:

attr_accessor :hour, :minute, :meridiem

after_validation :parse_time

def parse_time
  if hour and minute and meridiem
    self.time = DateTime.parse("#{hour}:#{minute}#{meridiem}") 
  end
end

I would obviously love to have simple_form output this with just <%= f.input :time %>. Would be way cleaner!

All 3 comments

I was able to accomplish this manually (without simpleform) with the following code (if the form object is 'derp'):

<div class="timepicker">
  <select class="hour form-control" name="derp[hour]">
    <%= options_for_select((1..12).to_a, @derp.time ? @derp.time.strftime('%l').to_i : nil) %>
  </select>
  <span class="colon">:</span>
  <select class="minute form-control" name="derp[minute]" >
    <%= options_for_select(['00', '15', '30', '45'], @derp.time ? @derp.time.strftime('%M').to_i : nil) %>
  </select>
  <select class="meridiem form-control" name="derp[meridiem]" >
    <%= options_for_select(['AM', 'PM'], @derp.time ? @derp.time.strftime('%p') : nil) %>
  </select>
</div>

Then in the derp model:

attr_accessor :hour, :minute, :meridiem

after_validation :parse_time

def parse_time
  if hour and minute and meridiem
    self.time = DateTime.parse("#{hour}:#{minute}#{meridiem}") 
  end
end

I would obviously love to have simple_form output this with just <%= f.input :time %>. Would be way cleaner!

Agreed 鈥撀營 ran into the same issue and came to a similar solution. I think the underlying problem is that simple_form relies rails' datetime view helpers, which are... awkward for the most part.

Thanks for posting your solution and saving me some time. It's absolutely crazy the way ampm: true behaves. The time input should be fully customizable in Rails, just like the date is.

Was this page helpful?
0 / 5 - 0 ratings