Is there a user-friendly time_select for Rails 3? The default time_select form helper gives you hours[00-23], minutes[00-59] and optionally seconds[00-59]. A dropdown list of hours 0-23 is pretty frustrating for those of us who aren't on military time. A user-friendly solution would display hours 1-12 and an extra am/pm dropdown list.
Rails 3是否有用户友好的time_select?默认的time_select表单助手为您提供小时[00-23],分钟[00-59]和可选的秒[00-59]。 0-23小时的下拉列表对于我们这些没有上过军事时间的人来说非常令人沮丧。用户友好的解决方案将显示1-12小时和额外的上午/下午下拉列表。
Is there an option or a separate plugin to handle this? I can't be the first person to want this, but I haven't found any solutions.
有没有选项或单独的插件来处理这个?我不能成为第一个想要这个的人,但我没有找到任何解决方案。
Thanks!
谢谢!
5 个解决方案
#1
14
You can set :ampm option to true which will show the hours as: 12 PM, 01 AM .. 11 PM.
您可以将:ampm选项设置为true,将小时显示为:12 PM,01 AM .. 11 PM。
time_select 'game', 'game_time', {:ampm => true}
http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select
http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select
#2
1
I don't know of a build in helper for exactly what you want. I suggest you build one, and share it! You likely don't want the first item in the dropdown to be 12am either, so that should be a config option.
我不知道你正在想要什么的帮助器。我建议你建一个,分享吧!您可能不希望下拉列表中的第一项也是12am,因此应该是配置选项。
Also, if 12am is 0 or 24 should be configurable too.
此外,如果12am为0或24也应该是可配置的。
Here's a base using vanilla select_tag
:
这是使用vanilla select_tag的基础:
<%= f.select :your_attribute, [
["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]
], class:''%>
It displays 12hour time to your user, and posts a 24 hour integer to your server.
它向您的用户显示12小时的时间,并向您的服务器发布24小时整数。
Update
I needed one anyway, so I went ahead a wrote it.... In the view:
无论如何我需要一个,所以我继续写了一个....在视图中:
<%= am_pm_hour_select f, :your_method, start:3 %>
(Note the syntax is not f.helper
, but helper f, other_options
)
(注意语法不是f.helper,而是helper f,other_options)
In app/helpers/am_pm_form_helper.rb
:
在app / helpers / am_pm_form_helper.rb中:
module AmPmFormHelper
#pass start:Fixnum in the options hash to set the first drop down selection
def am_pm_hour_select(object, method, options = {}, html_options = {})
select_options = [ ["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]]
unless options[:start].nil?
shift_if_needed = Proc.new{|hour, start| hour<start ? hour+24 : hour}
select_options.sort!{|x, y| shift_if_needed.call(x.last,options[:start]) <=> shift_if_needed.call(y.last, options[:start]) }
end
object.select(method, select_options, options = {}, html_options = {})
end
end
#3
0
for this kind of purposes i recommend using jQuery UI. it's way more user friendly
出于这种目的,我建议使用jQuery UI。它更方便用户使用
这是一个链接
#4
0
One simple thing you could do is convert the military 0..23 to standard 12am,1am,2am..10pm,11pm.
你可以做的一件简单的事情是将军事0..23转换为标准的上午12点,凌晨2点,晚上10点,晚上11点。
This works well for my situation - I'm usually just picking the hour - but it's not ideal, I admit, with the am/pm in the hour drop down.
这适用于我的情况 - 我通常只是选择一小时 - 但我承认,这不是理想的,因为下午的上午/下午。
= javascript_tag "$$('#event_start_at_4i option').each(function(option) { option.update(convert_hour(option.innerHTML)) })"
Then in Javascript (this can probably be cleaner)
然后在Javascript(这可能更干净)
function convert_hour(hour_string) {
if (hour_string.substring(0,1) == 0) {
hour_string = hour_string.substring(1);
}
// Funny '08' parses to 0, but '07' parses to 7. Removing leading 0 above fixes.
var mh = parseInt(hour_string)
if (!isNaN(mh)) {
var nh = mh % 12
if (nh == 0) { nh = 12 }
if (mh < 12) {
nh = nh + 'am'
} else {
nh = nh + 'pm'
}
return nh
}
return hour_string
}
#5
0
I just had this same problem, and I saw this post so I thought I'd give my answer :
我刚刚遇到同样的问题,我看到这篇文章,所以我想我会给出答案:
module DateTimeSelectorExtensions
def self.included(base)
base.send(:include, InstanceMethods)
base.send(:alias_method_chain, :select_hour, :twelve_hour_time)
end
module InstanceMethods
def select_hour_with_twelve_hour_time
return select_hour_without_twelve_hour_time(@datetime, @options) unless @options[:twelve_hour].eql? true
if @options[:use_hidden] || @options[:discard_hour]
build_hidden(:hour, hour)
else
select_options = []
0.step(23, 1) do |value|
if value == 0 && @options[:midnight]
text = @options[:midnight].eql?(true) ? 'midnight' : @options[:midnight]
elsif value == 12 && @options[:noon]
text = @options[:noon].eql?(true) ? 'noon' : @options[:noon]
else
text = "#{value == 12 ? 12 : (value / 12 == 1 ? value % 12 : value)}#{value <= 11 ? ' AM' : ' PM'}"
end
tag_options = { :value => value }
tag_options[:selected] = "selected" if hour == value
select_options << content_tag(:option, text, tag_options)
end
select_options.rotate!(@options[:offset].to_i)
select_options.unshift(@options[:prompt]) if @options[:prompt].present?
build_select(:hour, (select_options.join("\n") + "\n").html_safe)
end
end
end
end
ActionView::Helpers::DateTimeSelector.send(:include, DateTimeSelectorExtensions)
You use it as such :
你这样使用它:
select_hour Time.now, :twelve_hour => true, :offset => 6, :prompt => "--", :midnight => true, :noon => "high noon"
#1
14
You can set :ampm option to true which will show the hours as: 12 PM, 01 AM .. 11 PM.
您可以将:ampm选项设置为true,将小时显示为:12 PM,01 AM .. 11 PM。
time_select 'game', 'game_time', {:ampm => true}
http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select
http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select
#2
1
I don't know of a build in helper for exactly what you want. I suggest you build one, and share it! You likely don't want the first item in the dropdown to be 12am either, so that should be a config option.
我不知道你正在想要什么的帮助器。我建议你建一个,分享吧!您可能不希望下拉列表中的第一项也是12am,因此应该是配置选项。
Also, if 12am is 0 or 24 should be configurable too.
此外,如果12am为0或24也应该是可配置的。
Here's a base using vanilla select_tag
:
这是使用vanilla select_tag的基础:
<%= f.select :your_attribute, [
["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]
], class:''%>
It displays 12hour time to your user, and posts a 24 hour integer to your server.
它向您的用户显示12小时的时间,并向您的服务器发布24小时整数。
Update
I needed one anyway, so I went ahead a wrote it.... In the view:
无论如何我需要一个,所以我继续写了一个....在视图中:
<%= am_pm_hour_select f, :your_method, start:3 %>
(Note the syntax is not f.helper
, but helper f, other_options
)
(注意语法不是f.helper,而是helper f,other_options)
In app/helpers/am_pm_form_helper.rb
:
在app / helpers / am_pm_form_helper.rb中:
module AmPmFormHelper
#pass start:Fixnum in the options hash to set the first drop down selection
def am_pm_hour_select(object, method, options = {}, html_options = {})
select_options = [ ["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]]
unless options[:start].nil?
shift_if_needed = Proc.new{|hour, start| hour<start ? hour+24 : hour}
select_options.sort!{|x, y| shift_if_needed.call(x.last,options[:start]) <=> shift_if_needed.call(y.last, options[:start]) }
end
object.select(method, select_options, options = {}, html_options = {})
end
end
#3
0
for this kind of purposes i recommend using jQuery UI. it's way more user friendly
出于这种目的,我建议使用jQuery UI。它更方便用户使用
这是一个链接
#4
0
One simple thing you could do is convert the military 0..23 to standard 12am,1am,2am..10pm,11pm.
你可以做的一件简单的事情是将军事0..23转换为标准的上午12点,凌晨2点,晚上10点,晚上11点。
This works well for my situation - I'm usually just picking the hour - but it's not ideal, I admit, with the am/pm in the hour drop down.
这适用于我的情况 - 我通常只是选择一小时 - 但我承认,这不是理想的,因为下午的上午/下午。
= javascript_tag "$$('#event_start_at_4i option').each(function(option) { option.update(convert_hour(option.innerHTML)) })"
Then in Javascript (this can probably be cleaner)
然后在Javascript(这可能更干净)
function convert_hour(hour_string) {
if (hour_string.substring(0,1) == 0) {
hour_string = hour_string.substring(1);
}
// Funny '08' parses to 0, but '07' parses to 7. Removing leading 0 above fixes.
var mh = parseInt(hour_string)
if (!isNaN(mh)) {
var nh = mh % 12
if (nh == 0) { nh = 12 }
if (mh < 12) {
nh = nh + 'am'
} else {
nh = nh + 'pm'
}
return nh
}
return hour_string
}
#5
0
I just had this same problem, and I saw this post so I thought I'd give my answer :
我刚刚遇到同样的问题,我看到这篇文章,所以我想我会给出答案:
module DateTimeSelectorExtensions
def self.included(base)
base.send(:include, InstanceMethods)
base.send(:alias_method_chain, :select_hour, :twelve_hour_time)
end
module InstanceMethods
def select_hour_with_twelve_hour_time
return select_hour_without_twelve_hour_time(@datetime, @options) unless @options[:twelve_hour].eql? true
if @options[:use_hidden] || @options[:discard_hour]
build_hidden(:hour, hour)
else
select_options = []
0.step(23, 1) do |value|
if value == 0 && @options[:midnight]
text = @options[:midnight].eql?(true) ? 'midnight' : @options[:midnight]
elsif value == 12 && @options[:noon]
text = @options[:noon].eql?(true) ? 'noon' : @options[:noon]
else
text = "#{value == 12 ? 12 : (value / 12 == 1 ? value % 12 : value)}#{value <= 11 ? ' AM' : ' PM'}"
end
tag_options = { :value => value }
tag_options[:selected] = "selected" if hour == value
select_options << content_tag(:option, text, tag_options)
end
select_options.rotate!(@options[:offset].to_i)
select_options.unshift(@options[:prompt]) if @options[:prompt].present?
build_select(:hour, (select_options.join("\n") + "\n").html_safe)
end
end
end
end
ActionView::Helpers::DateTimeSelector.send(:include, DateTimeSelectorExtensions)
You use it as such :
你这样使用它:
select_hour Time.now, :twelve_hour => true, :offset => 6, :prompt => "--", :midnight => true, :noon => "high noon"