ruby-on-rails Active Admin日期过滤器日期格式自定义

bfrts1fy  于 2023-01-18  发布在  Ruby
关注(0)|答案(5)|浏览(163)

是否有简单的方法可以将ActiveAdmin日期筛选器的显示格式从默认ISO格式(yyyy-mm-dd)更改为其他格式?

gywdnpxw

gywdnpxw1#

除了覆盖js之外,您还可以为日期选择器提供额外的选项,如下所示:

= f.input :my_date, as: :datepicker, datepicker_options: { dateFormat: "mm/dd/yy" }
3npbholx

3npbholx2#

我修正的方式是这样的:

$ ->
  # reset format
  $('.datepicker:not(.hasDatepicker)').each ->
    if $(@).val().length > 0
      p = $(@).val().split('-')
      $(@).val("#{p[2]}-#{p[1]}-#{p[0]}")

  # change format
  $(document).on 'focus', '.datepicker:not(.hasDatepicker)', ->
    $(@).datepicker dateFormat: 'dd-mm-yy'

因此,首先将值从yyyy-mm-dd重置为yyyy-mm-dd,然后在选择器上设置正确的格式。
希望这能帮到什么人。
这在ActiveAdmin pre 1中使用just_datetime_picker gem时有效

knpiaxh1

knpiaxh13#

是的,有。我用js设置了日期时间选择器对象的选项

$(document).ready(function() {
  $(".datepicker").datepicker( "option", "dateFormat", 'D, d M yy' );

});

如果这样做,输入值将如下所示

Wed, 28 Nov 2012

http://docs.jquery.com/UI/Datepicker/formatDate此处是有关支持格式的手册

eoxn13cs

eoxn13cs4#

对于活动管理员筛选器..
在活动管理gem中,文件:应用程序/资产/javascript/active_admin/pages/application.js.coffee,您将看到:

$ ->
  $(document).on 'focus', '.datepicker:not(.hasDatepicker)', ->
    $(@).datepicker dateFormat: 'yy-mm-dd'

您可能需要修改焦点事件,例如(文件:应用程序/资产/java脚本/活动管理. js)。

$(document).ready(function(){
  $(document).on('focus', '.datepicker.hasDatepicker', function() {
    $(this).datepicker( "option", "dateFormat", "mm-dd-yy");
  });
});

或者删除事件并重新初始化日期选取器,例如:

$(document).ready(function(){

  // remove existing on focus events
  $._data( $(document)[0], 'events').focusin = null;

  // add new datepicker with format
  $('.datepicker').datepicker({dateFormat: 'mm-dd-yy'});

});
enxuqcxy

enxuqcxy5#

Nathan Bertram有一个很好的解决方案,但根据我的经验和其他人的评论,我觉得它需要一些阐述。它帮助我查看了这个输入的ActiveAdmin source以及。
ActiveAdmin在页面加载时会完全呈现日期选择器,因此尚未应用格式。这意味着初始值需要格式化为字符串。否则,在单击输入并选择日期之前,您可能会遇到格式错误。
我想到了两种解决方案:

我更喜欢I18 n方法,因为它使您能够保存格式以供重用
与Ruby/Rails相比,Datepicker小部件使用了不同的格式语法,请确保您选择的格式在两种语法中都是可行的。因此,请同时使用这两种语法:mm/dd/yy表示小工具,%m/%d/%Y表示初始值

Nathan的solution的修订版:

f.input :my_date, as: :datepicker, datepicker_options: { dateFormat: "mm/dd/yy" },
        input_html: { value: I18n.l(f.object.my_date, format: "%m/%d/%Y")}

在我的实际实现中,我创建了自己的Input,并以抽象的方式应用了格式。

我的解决方案:日期选择器输入的次要扩展

form do |f|
  # ...
  f.input :my_date, as: :datepicker, format: :admin_short, input_html: { value: f.object.my_date }
  # ...
end

app/inputs/datepicker_input.rb我是通过查看ActiveAdmin::Inputs::DatepickerInput的源代码得到这个想法的

class DatepickerInput < ActiveAdmin::Inputs::DatepickerInput
  def input_html_options
    super.tap { |hash| hash[:value] = I18n.l(hash[:value], format: format) }
  end

  private

  def datepicker_options
    super.tap do |hash|
      datepicker_date_format.then do |date_format|
        hash[:datepicker_options][:dateFormat] = date_format if date_format.present?
      end
    end
  end

  def datepicker_date_format
    I18n.t(format, scope: "date.formats.datepicker") # => "mm/dd/yy"
  end

  def format
    # allow for a fallback when a format is not provided
    options.fetch(:format, "m-d-yy") # => :admin_short
  end
end

config/locales/date_time.en.yml

en:
  date:
    formats:
      admin_short: "%m/%d/%Y"
      # datepicker format syntax will not work with I18n, here for reference
      datepicker:
        admin_short: "mm/dd/yy"

JS/JQuery格式语法在使用I18 n进行格式化时不起作用。

注意:我选择将JS/Jquery格式放在这个文件中,这样就可以很容易地将它们与Ruby/Rails格式进行比较,并允许以相同的方式保存它们,使匹配的格式共享格式键。
这就是这个函数的工作原理:

def datepicker_date_format
  I18n.t(format, scope: "date.formats.datepicker") # => "mm/dd/yy"
end

相关问题