Hez's Bloggity Blog

I recently ran across this helpful post on a Merb Datetime picker and it was good, that is until I wanted to use the JQuery Date picker. Well a bit of hacking later we have this:

<%= form_for @person %>
  <%= jquery_date_field :birth_date :label => 'Birthdate' %>
  <%= jquery_datetime_field :birth_date_and_time, :label => 'Birthdate and time' %>
<% end =%>

module Merb
  module GlobalHelpers
    # Jquery date picker
    module Merb::Helpers::Form
      def jquery_date_field(*args)
        if bound?(*args)
          current_form_context.jquery_bound_date_field(*args)
        else
          current_form_context.jquery_unbound_date_field(*args)
        end
      end

      def jquery_datetime_field(*args)
        if bound?(*args)
          current_form_context.jquery_bound_datetime_field(*args)
        else
          current_form_context.jquery_unbound_datetime_field(*args)
        end
      end

      module Builder
        class Base
          def jquery_bound_date_field(method, attrs = {})
            name = control_name(method)
            update_bound_controls(method, attrs, nil)
            jquery_unbound_date_field({:name => name}.merge(attrs))
          end

          def jquery_bound_datetime_field(method, attrs = {})
            name = control_name(method)
            update_bound_controls(method, attrs, nil)
            jquery_unbound_datetime_field({:name => name}.merge(attrs))
          end

          def jquery_unbound_date_field(attrs)
            if attrs[:name] =~ /\[(.*)\]/
              date = @obj.send($1)
            end
            date ||= attrs[:value] || Time.now

            date_attrs = attrs.merge(
                :class => 'jquery_date_picker',
                :value => date.to_date.to_s,
                :name => attrs[:name].to_s + '[date]',
                :id => attrs[:id] + '_input',
                :label => attrs[:label]
            )
            hidden_attrs = attrs.merge(
                :value => '',
                :label => nil
            )
            unbound_text_field( date_attrs ) +
              unbound_hidden_field( hidden_attrs.merge(:name => attrs[:name].to_s + '[year]', :id => attrs[:id] + '_year', :value => date.year) ) +
              unbound_hidden_field( hidden_attrs.merge(:name => attrs[:name].to_s + '[month]', :id => attrs[:id] + '_month', :value => date.month) ) +
              unbound_hidden_field( hidden_attrs.merge(:name => attrs[:name].to_s + '[day]', :id => attrs[:id] + '_day', :value => date.day) ) +
              "<script type=\"text/javascript\">
              $(function() {
                  $(\"##{date_attrs[:id]}\").datepicker({
                    dateFormat: 'yy-mm-dd',
                    onSelect: function(dateText, inst) {
                      var myDatesSplit = $(\"##{attrs[:id]}_input\")[0].value.split( '-' );
                      $(\"##{attrs[:id]}_year\")[0].value = myDatesSplit[0];
                      $(\"##{attrs[:id]}_month\")[0].value = myDatesSplit[1];
                      $(\"##{attrs[:id]}_day\")[0].value = myDatesSplit[2];
                    }
                  });
                });
              </script>"
          end

          def jquery_unbound_datetime_field(attrs)
            if attrs[:name] =~ /\[(.*)\]/
              date = @obj.send($1)
            end
            date ||= attrs[:value] || Time.now

            hour_attrs = attrs.merge(
              :class => "date hour",
              :selected => date.hour.to_s,
              :name => attrs[:name].to_s + '[hour]',
              :id => attrs[:id] + '_hour',
              :collection => (0..24).map{|i|[i, i.to_s]},
              :label => nil
            )

            minute_attrs = attrs.merge(
              :class => "date minutes",
              :selected => date.min.to_s,
              :name => attrs[:name].to_s + '[min]',
              :id => attrs[:id] + '_min',
              :collection => %w[00 05 10 15 20 25 30 35 40 45 50 55].map{|i|[i.to_i, i]},
              :value_method => :first,
              :text_method => :last,
              :label => nil
            )

            jquery_unbound_date_field(attrs) + ' ' + unbound_select(hour_attrs) + ':' + unbound_select(minute_attrs)
          end
        end
      end
    end
    # end Jquery date picker
  end
end