In one of our apps, the requirement was having a datetime field which will allow user/admin to select date and time in active admin.

So the very first option which I had that was to use existing gem,

http://github.com/saepia/just-datetime-picker

But this gem doesn't seem to be maintained since last year, so this option was ruled out!

The next option was creating DateTimePicker manually using

gem "jquery-ui-rails"

and then adding .js and .css.scss files in active-admin, this solution was also not working for me!

We found one gem

  gem 'pickadate-rails'

documentation can be found here, https://github.com/veracross/pickadate-rails
Using this no need to add .js and .css files in your assets folder manually, gem provides all files through assets pipeline
below are the steps which I followed to get it working,

in active_admin.js.coffee

  //= require pickadate/picker
  //= require pickadate/picker.date
  //= require pickadate/picker.time

in active_admin.scss

  @import "pickadate/classic";
  @import "pickadate/classic.date";
  @import "pickadate/classic.time";

You can choose the theme for the date-picker and the time-picker (default or classic which can be seen here http://amsul.ca/pickadate.js/)

in active-admin model

  f.input :column_name, as: :string

As on one field only one picker function can be used, which will either give date as an output or time as an output, whereas our requirement was to have both date as well as time on single column

So I created a dummy column in model using

attr_accessor :dummy_column_name

which will accept time from user, so in my active-admin model, I wrote

  f.input :`column_name`, as: :string
  f.input :`dummy_column_name`, as: :string

Then in active_admin.js called pickadate() and pickatime() for columns

  $(document).ready(function(){
    $("#column_name_id").pickadate();
    $("#dummy_column_name_id").pickatime();
  });

Now all I needed is to combine both values in one column and display that column on active admin page

For that

  • I wrote a private controller method in active admin model
  • and updated the value of params hash in it,
  • then I used before_action callback for create and update method

so that whenever admin creates new record or edits the existing record by selecting date and time separately, the create/update method will get date and time values combined through params only

In active admin model,

controller do
  before_action :some_method, only: [:create, :update]

  def some method
    param[:column_name] += param[:dummy_column_name]
  end
end