我们不能回到过去,但我们可以重新格式化它:如何使用 Bootstrap 和 Ruby?

We Can't Go Back in Time, but We Can Reformat It: How to Using Bootstrap & Ruby?

我从 here 中提取了这段代码,但是当我点击日期输入表单时,日历没有弹出。我配置了 gem 'bootstrap-datepicker-rails' 并将必要的代码添加到 application.css (*= require bootstrap-datepicker) & application.js (//= require bootstrap-datepicker).

如果有人有任何解决此问题或提供任何替代方案的建议,我会洗耳恭听。我只是希望能够使用日历弹出菜单,以便人们可以为自己设定的目标选择截止日期。即使日历弹出窗口至少不起作用,我想要一个比默认日期选择表单更好的布局。

今天是我 24 岁生日,所以如果有人没有宿醉,请给我这份礼物。谢谢,新年快乐!

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) 
        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

_form.html.erb

<%= form_for(@goal) do |f| %>
  <% if @goal.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@goal.errors.count, "error") %> prohibited this goal from being saved:</h2>

      <ul>
      <% @goal.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="america">
<form>

  <div class="form-group">
    <%= f.text_field :name, class: 'form-control', placeholder: 'Enter Goal' %>
  </div>
    <div class="form-group">
        <label>Deadline:</label>
        <%= f.date_select :deadline %>
    </div>

<div class="america2">
  <%= button_tag(type: 'submit', class: "btn") do %>
  <span class="glyphicon glyphicon-plus"></span>
  <% end %>

  <%= link_to goals_path, class: 'btn' do %>
  <span class="glyphicon glyphicon-chevron-left"></span>
  <% end %>

  <%= link_to @goal, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn' do %>
  <span class="glyphicon glyphicon-trash"></span>
  <% end %>
</div>
  </form>
</div>
<% end %>

感谢您的宝贵时间。

我知道你不能将 f.date_select 与 bootstrap 日期选择器一起使用,而是使用 f.text_field.