|
Formatting a Text Field for Time
By: Bruce Bahlmann - Contributing Author (your
feedback
is important to us!)
In rails development, when creating web forms, you may run into a case where
the database field you are working with is of type "time" and you are
expecting to store a specific time like 23:00 (based on a 24 hour time) or
11:00 PM (for the same time based on a 12 hour time). In the database, this
generally looks like you would expect: 23:00:00 with the additional set of
zeros representing the seconds which can be optionally displayed. However if
you write this into a text form field, something not likely expected
happens. You get something like: "Sat Jan 01 23:00:00 UTC 2000"
Time type fields are very common actually, particularly if you are storing
range of time (i.e. from time x to time y). The following images show an
example of using such fields and if untreated, what you might end up seeing.
|
Stored in Database: |
How this is Displayed in an HTML Form: |
 |
 |
From an HTML perspective, these two input fields would appear normal as
well, leading an inexperienced rails developer to scratch their head in
wondering, what seems to be the problem.
<div class="field">
<label for="post_timeFrom">Timefrom</label>
<input id="post_timeFrom" name="post[timeFrom]" size="8" type="text" value="01:00:00" />
<label for="post_timeTo">Timeto</label>
<input id="post_timeTo" name="post[timeTo]" size="8" type="text" value="02:00:00" />
</div>
While there appears to many different solutions to this problem, not all
solutions are created equal. Also, from my experience, many just plain don't
work. So, what I found to be the best solution for me, was to use a jquery
module which not only solved the problem but also provided the greatest
flexibility.
You can obtain the most current version of this module from the following
site:
http://keith-wood.name/timeEntry.html
Alternatively,
you can download the version of this I used just in case this person's site
becomes unavailable.
jquery.timeentry.package-1.4.8.zipInstalling this jquery module
requires several steps, but to a rails developer (beginner or experienced),
it is easy to miss something so I've tried to keep this simple. First
install the spinner image (this is the image that you can use to change time
without typing). This is stored within the public/images directory.
public/images/
spinnerDefault.png
Install the javascript file. This is stored within the public/javascripts
directory.
public/javascripts/
jquery.timeentry.js
Install the stylesheet file. This is stored within the public/stylesheets
directory.
public/stylesheets/
jquery.timeentry.css
Ok, great, now one more installation step, but this one is less than
obvious. You need to hook up all these resources you installed so that they
will be properly loaded when you execute your program. There is probably a
more efficient way to do this, but for now I just put them in the main style
sheet for the application.
/app/views/layouts/application.htm.erb
<head>
<%= stylesheet_link_tag "styles" %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "jquery.timeentry" %>
<%= stylesheet_link_tag "jquery.timeentry" %>
<%= csrf_meta_tag %>
<% if content_for?(:javascript) %>
<script type="text/javascript">
$(document).ready(function() {
<%= yield(:javascript) %>
});
</script>
<% end %>
</head> Some important things to consider when looking at the
above. First, it is assumed that your ":defaults" javascript includes jquery.
Most recent versions of rails do this, but earlier versions do not. You
should check the source of your page to ensure it does. Also, notice that
the two timeentry resources follow the ":defaults" declaration. Since these do
require jquery and the items listed above are loaded in the order displayed,
you cannot load timeentry until after jquery is loaded - if you do, this
will not work!Once this is done, the jquery time module is fully
installed and ready to use in your code. Implementing it simply involves two
changes to any view resource you may want to use this module. Regardless
which one, the following must be added to the javascript loading for that
resource, or if you don't have this, you will need to add it on the top of
the particular view file.
<% content_for(:javascript) do %>
$('.inlineConfig').timeEntry({spinnerImage: '/images/spinnerDefault.png', ampmPrefix: ' '});
<% end %>
This line activates the timeentry jquery code, but also sends it special handling configuration. In this case, we define the location of where you stored the spinnerDefault.png image as well as the fact that you want to add a space between the time and AM/PM.
<div class="field">
<%= f.label :timeFrom %>
<%= f.text_field :timeFrom,
:value => (@post.timeFrom.blank? ? '' : @post.timeFrom.strftime("%I:%M %p")),
:size=>8,
:class=>"inlineConfig" %>
<%= f.label :timeTo %>
<%= f.text_field :timeTo,
:value => (@post.timeTo.blank? ? '' : @post.timeTo.strftime("%I:%M %p")),
:size=>8,
:class=>"inlineConfig" %>
</div>
The above configuration is for use with a 12 hour time (because we are
using AM/PM). For use with 24 hour time, you should use an "%H" instead of a
"%I" above. So the following
- "%H:%M" - for 24 hour time display
- "%I:%M %p" - for 12 hour time display
| Here is
how you should see a working result: |
 |
Can Birds-Eye.Net help you or your Company?
Receive your Birds-Eye.Net articles and white
papers hot off
the presses by adding our RSS feed to your reader.
|
|