CODEWITHSUNDEEP
ruby-on-railsrubydateactiveadmin
Toby Hede
Toby Hede

Reputation: 37133

Active Admin date filter date format customisation

Is there simple way to change the ActiveAdmin date filter display format from the default ISO format (yyyy-mm-dd)?

Upvotes: 5

Views: 6872

Answers (5)

SMAG
SMAG

Reputation: 798

Nathan Bertram has a good solution, but I feel like it needs some exposition based on my experience and the comments of others. It helped me to look at the ActiveAdmin source for this Input as well.

ActiveAdmin does completely render the Datepicker on page load so that formatting has not been applied yet. This means that the initial value needs to be formatted as a string. Otherwise you may have the wrong format until you click on the input and select a date.

There are 2 solutions that come to mind:

I prefer the I18n approach because it gives you the ability to save formats for reuse

the Datepicker widget uses a different formatting syntax as compared to Ruby/Rails, make sure that you pick a format that is possible in both syntaxes. Hence the use of both: mm/dd/yy for the widget and %m/%d/%Y for the initial value

A revision of Nathan's 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")}

In my actual implementation of this I created my own Input and applied the format in an abstracted way.

My Solution: A minor extension of the Datepicker 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 I got the idea for this looking at the source for 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 format syntax will not work in formatting with I18n.

NOTE: I chose to put the JS/Jquery formats in this file so that they can be easily compared with the Ruby/Rails formats and to allow them to be saved in the same way with matching formats sharing the format key.

thats what makes this function work:

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

Upvotes: 0

Nathan Bertram
Nathan Bertram

Reputation: 1099

Instead of overwriting the js you can provide extra options to the datepicker like this:

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

Upvotes: 12

Rene Weteling
Rene Weteling

Reputation: 524

The way i fixed is is like this:

$ ->
  # 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'

So first reset the value from yyyy-mm-dd to yyyy-mm-dd, than set the correct format on the picker.

Hope this helps someone.

This works in ActiveAdmin pre 1 with the just_datetime_picker gem

Upvotes: 1

Eric London
Eric London

Reputation: 351

For Active Admin filters..

In the Active Admin gem, file: app/assets/javascripts/active_admin/pages/application.js.coffee, you'll see:

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

You might have to revise the on focus event, for example (file: app/assets/javascripts/active_admin.js).

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

Or perhaps remove the events and re-initialize datepickers, for example:

$(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'});

});

Upvotes: 0

Fivell
Fivell

Reputation: 11929

Yes, there is. I did it with setting options for datetime picker object with js

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

});

if you do this, input values will look like

Wed, 28 Nov 2012

http://docs.jquery.com/UI/Datepicker/formatDate here is manual about supported formats

Upvotes: 0

Related Questions