Rails 4 x Bootstrap 3：将日期时间选择器与日期时间 select 助手集成

Question

在我的 Rails 4 应用程序中，我使用默认的 Rails 表单和 Bootstrap 3.

我正在尝试将标准 datetime select 助手替换为 bootstrap3-datetimepicker-rails:

我发现 this tutorial by Dave Hulihan 解释了如何覆盖默认的 Rails 表单助手，但这是针对 Rails 3 应用程序的：

# Add to config/initializers/form.rb or the end of app/helpers/application_helper.rb
module ActionView
  module Helpers
    class FormBuilder 
      def date_select(method, options = {}, html_options = {})
        existing_date = @object.send(method) 
        formatted_date = existing_date.to_date.strftime("%F") if existing_date.present?
        @template.content_tag(:div, :class => "input-group") do    
          text_field(method, :value => formatted_date, :class => "form-control datepicker", :"data-date-format" => "YYYY-MM-DD") +
          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
        end
      end

      def datetime_select(method, options = {}, html_options = {})
        existing_time = @object.send(method) 
        formatted_time = existing_time.to_time.strftime("%F %I:%M %p") if existing_time.present?
        @template.content_tag(:div, :class => "input-group") do    
          text_field(method, :value => formatted_time, :class => "form-control datetimepicker", :"data-date-format" => "YYYY-MM-DD hh:mm A") +
          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
        end
      end
    end
  end
end

这种方法在 Rails 4 中是否仍然有意义？

——————

更新：我已将以上代码添加到新的 config/initializers/form.rb 文件中。

我的日期时间字段已在浏览器中更新：

但是日期时间选择器还没有工作。

这是我认为的代码：

<div class="field">
  <%= f.label :date, "DATE & TIME" %>
  <%= f.datetime_select :date %>
</div>

我在这里错过了什么？

——————

Answer 1

在 Dave Hulihan 本人的宝贵帮助下，这就是我最终所做的。

在config/initializers/form.rb中：

module ActionView
  module Helpers
    class FormBuilder 
      def date_select(method, options = {}, html_options = {})
        existing_date = @object.send(method) 
        formatted_date = existing_date.to_date.strftime("%F") if existing_date.present?
        @template.content_tag(:div, :class => "input-group") do    
          text_field(method, :value => formatted_date, :class => "form-control datepicker", :"data-date-format" => "YYYY-MM-DD") +
          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
        end
      end

      def datetime_select(method, options = {}, html_options = {})
        existing_time = @object.send(method)
        existing_time ||= Time.now
        formatted_time = existing_time.to_time.strftime("%A, %B %d %Y %I:%M %p") if existing_time.present?
        @template.content_tag(:div, :class => "input-group") do    
          text_field(method, :value => formatted_time, :class => "form-control datetimepicker", :"data-date-format" => "dddd, MMMM DD YYYY hh:mm A") +
          @template.content_tag(:span, @template.content_tag(:span, "", :class => "glyphicon glyphicon-calendar") ,:class => "input-group-addon")
        end
      end
    end
  end
end

然后，在 app/assets/javascripts/posts.coffee:

$(document).ready ->
  $('.datetimepicker').datetimepicker()

现在，日期时间选择器非常有用。

Rails 4 x Bootstrap 3：将日期时间选择器与日期时间 select 助手集成

Rails 4 x Bootstrap 3: integrating datetime picker with datetime select helper

datetime

ruby-on-rails

datetimepicker

twitter-bootstrap

ruby-on-rails-4