Rails 3.1 text_field 表单助手和 jQuery datepicker 日期格式答案

【问题标题】：Rails 3.1 text_field form helper and jQuery datepicker date formatRails 3.1 text_field 表单助手和 jQuery datepicker 日期格式
【发布时间】：2011-11-12 08:11:37
【问题描述】：

我的 Rails 视图中有一个表单字段，如下所示：

<%= f.text_field :date, :class => "datepicker" %>

JavaScript 函数将该类的所有输入字段转换为 jQueryUI 日期选择器。

$(".datepicker").datepicker({
                dateFormat : "dd MM yy",
                buttonImageOnly : true,
                buttonImage : "<%= asset_path('iconDatePicker.gif') %>",
                showOn : "both",
                changeMonth : true,
                changeYear : true,
                yearRange : "c-20:c+5"
            })

到目前为止一切顺利。我可以编辑记录，并将日期正确地保存到数据库。我的问题是当我想再次编辑记录时。当表单从记录中预填充时，它以“yyyy-mm-dd”格式显示。 javascript 仅格式化在 datepicker 控件中选择的日期。有什么方法可以格式化从数据库中检索到的日期？我可以在哪个阶段执行此操作？

谢谢，丹妮。

以下讨论后的更多细节，我的表单分布在两个文件中，一个视图和一个部分。这是视图：

<%= form_tag("/shows/update_individual", :method => "put") do %>
    <% for show in @shows %>
        <%= fields_for "shows[]", show do |f| %>
            <%= render "fields", :f => f %>
        <% end %>
    <% end %>
    <%= submit_tag "Submit"%>
<% end %>

这是_fields 部分视图：

<p>
    <%= f.label :name %>
    <%= f.text_field :name %>
</p>

<p>
    <%= f.date %>
    <%= f.label :date %>
    <%= f.text_field :date, :class => "datepicker" %>
</p>

控制器代码：

def edit_individual
    @shows = Show.find(params[:show_ids])
  end

我在environment.rb中添加了以下内容：

Date::DATE_FORMATS.merge!(
  :default => "%d %B %Y"
)

现在，当我在视图中使用 @show.date 时，它会显示正确的格式，但表单助手仍在显示原始格式。

【问题讨论】：

标签： jquery jquery-ui ruby-on-rails-3.1

【解决方案1】：

JQuery 日期选择器不会格式化预先填充的日期。
您需要通过使用带有文本字段的格式化日期而不是具有默认“yyyy-mm-dd”格式的原始日期来处理它。

示例 -

<%= f.text_field :date, :class => "datepicker", :value => @model.date.strftime("%d %m %Y") %>

更多例子@Rails date format in a text_field

【讨论】：

是的，我意识到了这一点，但我不确定如何格式化从数据库中出来的日期...
添加了一个例子。在帮助器或模型端会有更优雅的方法来处理它。
我收到一个错误，因为 @date 为零。如何获取表单助手当前引用的记录？
@date 就是一个例子。您可能需要使用模型对象“@model.date”。在使用 strtime 方法之前需要检查 nil。向执行上述操作的模型本身添加了 formatteddate 方法。
我试过@model，但没用，我得到了undefined method date' 用于#<:helpers::formbuilder:0x000001052b5f38>`。也试过@model_instance无济于事...

【解决方案2】：

已解决：按照上面 Jayendra 的建议，我通过 :value => show.date。它不起作用的原因是因为我没有从父视图传入show 对象。我更改了 render 行以包含它 - 父视图现在看起来像这样：

<%= form_tag("/shows/update_individual", :method => "put") do %>
    <% for show in @shows %>
        <%= fields_for "shows[]", show do |f| %>
            <%= render "fields", :f => f, :show => show %>
        <% end %>
    <% end %>
    <%= submit_tag "Submit"%>
<% end %>

【讨论】：

【解决方案3】：

我最终做的是创建一个普通的文本输入，并使用 ISO 格式的日期和其他信息预填充它以将其标记为日期输入（例如，rel="date"）。

在客户端，我有 JavaScript 来创建一个新的隐藏输入，该输入采用原始字段的名称（因此覆盖它，为了更好地衡量，我还删除了原始字段的 name 属性）。日期选择器附加到原始字段，并使用 altField/altFormat 将隐藏字段与 ISO 日期同步。

// used in jQuery's .each
function create_datepicker_for(_, el) {
  var e = $(el),
      mirror,
      date;

  // attach a hidden field that mirrors the proper date
  mirror = $('<input type="hidden"></input>')
           .prop('name', e.prop('name'))
           .insertAfter(e);

  if (e.val()) { date = new Date(e.val()); }

  e
  .prop('name', '')       /* make sure this is not sent to the application */
  .datepicker({
    altField: mirror,     /* "mirror" is the hidden field */
    altFormat: 'yy-mm-dd' /* you do not want anything but ISO */
  });

  if (date) { e.datepicker('setDate', date) }
}

这似乎使所有内容保持同步，向应用程序发送正确的日期格式，并且降级与任何人预期的一样。

【讨论】：

【解决方案4】：

如果您使用的是 mysql 数据库，您可以在查询本身中格式化日期。

示例代码

     date_format(date_field,"%d %m %y")

【讨论】：