2

我正在尝试让引导日期时间选择器与我的 rails 程序一起使用。这是我正在使用的表格，它使用的是简单表格：

 <%= simple_form_for(@event, html: {class: "form-horizontal"}) do |f| %>
  <%= f.error_notification %>

    <%= f.input :title %>
        <script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      pickTime: false
    });
  });
</script>
    <%= f.input :date, as: :custom %>
    <%= f.input :description, as: :text, input_html: {rows: "5"} %>

  <div class="form-actions">
    <%= f.button :submit, class: "btn btn-primary" %>
  </div>
<% end %>

这是简单形式的 :custom 定义

  def input
text_field_options = input_html_options.dup
hidden_field_options = input_html_options.dup

text_field_options[:id] = "datetimepicker1"
text_field_options[:class] = 'input-append date form-horizontal'
text_field_options['data-date-format'] = I18n.t('date.datepicker')

hidden_field_options[:id] = "#{attribute_name}_hidden"

return_string =
  "#{@builder.text_field(attribute_name, text_field_options)}\n" +
  "#{@builder.hidden_field(attribute_name, hidden_field_options)}\n"
return_string = '<div id="datetimepicker1" class="input-append date form-horizontal">
<input data-format="MM/dd/yyyy" type="text">
<span class="add-on">
  <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-calendar">
  </i>
</span>

' return return_string.html_safe end

在我的事件控制器中，我有这个命令来记录事件的值。

Rails.logger.info ("debug:" + @event.to_yaml)

当我运行表单以创建事件并检查日志时，这就是我所看到的：

debug:--- !ruby/object:Event

属性：id：标题：starky me salsa 描述：salsa me swiftly 位置：日期：出席类型：group_size：created_at：updated_at：user_id：1

标题+描述很好，但日期：是空白的。您可能提出的任何建议将不胜感激，我对此很陌生，而且我正在为此苦苦挣扎大约 2 天，我最近才弄清楚如何进行日志记录，这让我可以在这里追踪它。谢谢。

4

2 回答 2

1

我刚刚在这里用 rails、simple_form 和 bootstrap datepicker 回答了一个类似的问题

我在下面的工作实现中包含了我的答案：

我还需要让它工作并支持不使用以美国为中心的日期格式的多个语言环境，例如：日期格式为 dd/mm/yyyy 的 en-AU（澳大利亚）。

问题

Rails 期望日期格式yyyy-mm-dd来自浏览器，但您希望在用户的区域设置中显示日期。虽然日期控件允许您指定显示格式，但它不允许您单独指定要发送回服务器的格式。

解决方案

构建一个隐藏的输入字段，将正确的格式发送回您的 Rails 服务器。我使用自定义 simple_form 输入控件来执行此操作，该控件构建日期选择器输入字段和隐藏字段，并在输入控件更改时使用一些 javascript 转换为 rails 日期。

结果是您可以在 rails 中有一个不错的引导日期选择器，并将其与 simple_form 一起使用，如下所示：

<%= f.input :date, as: :bootstrap_datepicker %>

或者使用长日期格式：

<%= f.input :date, as: :bootstrap_datepicker, input_html: { format: :long } %>

执行

创建或编辑以下文件：

宝石文件

gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'

config/locales/en-AU.yml

en-AU:
  date:
    datepicker:
      default: "dd/mm/yyyy"
      long: "dd MM, yyyy"
    formats:
      default: ! '%d/%m/%Y'
      long: ! '%d %B, %Y'

config/locales/en-US.yml

en-US:
  date:
    datepicker:
      default: "mm/dd/yyyy"
      long: "MM dd, yyyy"
    formats:
      default: "dd/mm/yyyy"
      long: ! '%B %d, %Y'

应用程序/资产/样式表/application.css.scss

@import "bootstrap-responsive";
@import "bootstrap-datepicker";

应用程序/资产/javascripts/application.js.coffee

#= require bootstrap
#= require bootstrap-datepicker
#= require bootstrap-datepicker-rails

或者，app/assets/javascripts/application.js

//= require bootstrap
//= require bootstrap-datepicker
//= require bootstrap-datepicker-rails

应用程序/资产/javascripts/bootstrap-datepicker-rails.js.coffee

$ ->
  # convert bootstrap-datepicker value to rails date format (yyyy-mm-dd) on our hidden field
  $(document).on 'changeDate', '.bootstrap-datepicker', (evt) ->
    rails_date = evt.date.getFullYear() + '-' + ('0' + (evt.date.getMonth() + 1)).slice(-2) + '-' + ('0' + evt.date.getDate()).slice(-2)
    $(this).next("input[type=hidden]").val(rails_date)

应用程序/输入/bootstrap_datepicker_input.rb

class BootstrapDatepickerInput < SimpleForm::Inputs::Base
  def input
    text_field_options = input_html_options.with_indifferent_access
    format =  text_field_options.delete(:format)
    hidden_field_options = text_field_options.dup
    hidden_field_options[:class] = text_field_options[:class].dup # so they won't work with same array object
    hidden_field_options[:id] = "#{attribute_name}_hidden"
    text_field_options[:class] << 'bootstrap-datepicker'
    text_field_options[:type] = 'text'
    text_field_options[:value] ||= format_date(value(object), format)
    set_data_option text_field_options, 'date-format', I18n.t(format, scope: [:date, :datepicker], default: :default)
    default_data_option text_field_options, 'provide', 'datepicker'

    return_string =
      "#{@builder.text_field(attribute_name, text_field_options.to_hash)}\n" +
      "#{@builder.hidden_field(attribute_name, hidden_field_options.to_hash)}\n"
    return return_string.html_safe
  end

protected

  def default_data_option(hash, key, value)
    set_data_option(hash,key,value) unless data_option(hash, key)
  end

  def data_option(hash, key)
    hash[:data].try(:[],key) || hash["data-#{key}"]
  end

  def set_data_option(hash, key, value)
    hash[:data].try(:[]=,key,value) || (hash["data-#{key}"] = value)
  end

  def value(object)
    object.send @attribute_name if object
  end

  def format_date(value, format=nil)
    value.try(:strftime, I18n.t(format, scope: [ :date, :formats ], default: :default))
  end
end
于 2013-09-26T02:44:04.750 回答
0

首先，这部分：

return_string =
  "#{@builder.text_field(attribute_name, text_field_options)}\n" +
  "#{@builder.hidden_field(attribute_name, hidden_field_options)}\n"

被跳过，因为您接下来重新定义了变量：

return_string = '<div id="datetimepicker1" class="input-append date form-horizontal">
<input data-format="MM/dd/yyyy" type="text">
<span class="add-on">
  <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-calendar">
  </i>
</span>'

具有适当属性的文本输入不会呈现，因此在您提交时不会发布任何内容。

此外，如果您要组合这两个值并呈现它们，它将导致两个元素具有相同的 id (datepicker1)。

于 2013-05-02T09:18:03.813 回答