HotDateRails

There are time/date/datetime picker gems already, but I couldn't find one that worked for what I needed. This one includes helpers for date, time and datetime pickers. It also takes into account the way Ruby doesn't parse certain American-friendly dates so it passes along hidden fields with the values expected by rails. When updating the values they are "localized" using the locale file to get them into the format expected by the picker.

• Add gem 'hot_date_rails' to Gemfile
• run bundle install
• make sure application.js contains the following (and that the assets are available to be referenced)
  • //= require jquery
  • //= require jquery-ui
  • //= require jquery_ujs
• In application.js add //= require hot_date_rails
• In application.css add *= require hot_date_rails

form_object.hd_label(name, content_or_options=nil, options=nil, &block)
#takes the same arguments as the Rails label_tag method

form_object.hd_picker(name, options={}, locale_format=nil, cls=nil)

hd_picker_tag(field_name, value=nil, cls="datepicker", options={}, locale_format=nil)

• name - a symbol representing the form field. Note that by default the ID attribute of the generated fields will be randomized to make certain it is unique. If needed you can specify the ID as an html option. See the Example Tag Helper Calls section.
• options - see the Form Helper Options section below
• locale_format - the name of a strftime format specified under the corresponding branch in the locale file. Use this when specifying :date_format and/or :time_format. This is necessary to synchronize the format strings used for the date/time pickers with Ruby's strftime format directives.
  • A base set of locale_formats are included for english and custom formats can be added.
• value - the initial value of the input (hd_picker_tag only)
• cls - the css class name for the picker object created. This is used solely for the purpose of attaching the correct type of picker to the field. (To specify your own css classes just for formatting you can add them to the options hash.) Valid values are "datepicker", "timepicker" and "datetimepicker". When not specified hd_picker gets this from the type of the column specified.* **

* The only good reason for setting this parameter is if you have a datetime field and you want the field to just show the date or just show the time

** If you do specify the cls parameter keep in mind that you will probably need to add another format under the correct branch in the locale file and specify that format in the locale_file parameter

<!--Using just default values-->
<%= form_for @schedule do |f| %>
<table>
	<tr>
		<td><%= f.hd_label :birthday %></td>
		<td><%= f.hd_picker :birthday %></td><!-- date -->
	</tr>
	<tr>
		<td><%= f.hd_label :lunchtime %></td>
		<td><%= f.hd_picker :lunchtime %></td><!-- time -->
	</tr>
	<tr>
		<td><%= f.hd_label :apocalypse %></td>
		<td><%= f.hd_picker :apocalypse %></td><!-- datetime -->
	</tr>
</table>
<% end %>

<%= form_for @schedule do |f| %>
<table>
	<tr>
		<td><%= f.hd_label :alarm_setting %></td>
		<td><%= f.hd_picker :alarm_setting, { :time_format => "HH:mm:ss", :hd_opts => { :hour_grid => "12" } }, :w_seconds %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :suppertime %></td>
		<td><%= f.hd_picker :suppertime, { :time_format => "h:mm tt" }, :lc_merid %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :beer_oclock, "Time for beer: " %></td>
		<td><%= f.hd_picker :beer_oclock, { :time_format => "h:mm TT" }, :uc_merid %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :christmas %></td>
		<td><%= f.hd_picker :christmas, { :date_format => "MM d, yy" }, :full_month %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :easter %></td>
		<td><%= f.hd_picker :easter, { :date_format => "DD MM d, yy", html: { style: "width: 200px;", data: { microdata: "a value" } } }, :full_day_month %></td>
	</tr>
</table>

<%= form_for @schedule do |f| %>
<table>
	<tr>
		<td><%= f.hd_label :birthday %></td>
		<td><%= f.date_picker :birthday %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :lunchtime %></td>
		<td><%= f.time_picker :lunchtime %></td>
	</tr>
	<tr>
		<td><%= f.hd_label :apocalypse %></td>
		<td><%= f.datetime_picker :apocalypse %></td>
	</tr>
</table>
<% end %>

<%= form_tag(filtered_schedules_path, method: :get) do %>
	<%= hd_picker_tag :start_date, (@start_date || Date.today - 1.month) %><!-- datepicker is default -->
	to
	<%= hd_picker_tag :end_date, (@end_date || Date.today), "datetimepicker" %><!-- using datetimepicker -->
<% end %>

<%= form_tag(filtered_schedules_path, method: :get) do %>
	<!-- to override randomized id attribute -->
	<%= hd_picker_tag :important_date, @important_date, "datepicker", html: { id: "important_date" } %>
<% end %>

• :date_format - datepicker format string
  • default: "mm/dd/yy"
• :time_format - timepicker format string
  • default: "HH:mm"
• :html - attributes to be added to the input field
• :hd_opts - options to be applied to the picker object

* alt_time_format should be overridden when you need more precision than minutes for a datetime picker (e.g. "HH:mm:ss")

• There are six default values that can be overridden globally. To do so add a block similar to the following in your config/environment.rb file somewhere after the Rails.application.initialize! call*:

HotDateRails.config do |config|
  config.control_type = "slider" #or "select"
  config.hour_grid = "12"
  config.minute_grid = "15"
  config.second_grid = "30"
  config.date_format = "MM d, yy"
  config.time_format = "h:mm tt"
end

* Note that if you override the date and/or time format you should also edit the corresponding entries in your locale file(s)

en:
  date:
    formats:
      default: "%m/%d/%Y"
      full_month: "%B %-d, %Y"
      full_day_month: "%A %B %-d, %Y"
  time:
    formats:
      default: "%H:%M"
      datetime: "%m/%d/%Y %H:%M"
      datetime_w_seconds: "%-m/%-e/%Y %H:%M:%S"
      w_seconds: "%H:%M:%S"
      lc_merid: "%-l:%M %P"
      uc_merid: "%-l:%M %p"

If you're dynamically adding inputs to the DOM using the helpers (possibly for a modal dialog) you must call the Window.bindHDPickers() function.

$( "#modal_dialog" ).load("/schedules/1/edit-in-modal", ->
    Window.bindHDPickers()
)

rspec spec --order random

• This gem makes use of the jQuery Timepicker Addon

• Add convenience methods for common formats
• Add method that accepts both a picker format and a strftime format so custom locale formats don't need to be added by the user