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

回答1:

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" }

回答2:

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

回答3:

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

回答4:

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

});