Combine datetime picker with active_admin

Use existing gem...

See https://github.com/saepia/just-datetime-picker

...or do it manually

• Datetime picker plugin requires jQuery-UI.

  • ref: Adding a Timepicker to jQuery UI Datepicker

• Use gem "jquery-ui-rails"

  • bundle install
  • In app/assets/javascripts/active_admin.js, add //=require jquery.ui.all
  • In app/assets/stylesheets/active_admin.css.scss, add /*= require jquery.ui.all */

• Use Datetime picker plugin

  • Copy jquery-ui-timepicker-addon.js to /app/assets/javascripts/
  • Create /app/assets/stylesheets/jquery-ui-timepicker-addon.css provides at page footer.
  • In app/assets/javascripts/active_admin.js, add //=require jquery-ui-timepicker-addon
  • In app/assets/stylesheets/active_admin.css.scss, add /*= require jquery-ui-timepicker-addon.css */

In active_admin, change the column use

:as => datepicker TO :as => :string, :input_html => {:class => "hasDatetimePicker"}

For example:

• before: f.input :start_at, :as => :datepicker
• after: f.input :start_at, :as => :string, :input_html => {:class => "hasDatetimePicker"}

You may also be required to specify the following within your model to enable MetaSearch to act as a string on DateTime fields: search_methods :<field_name>_contains

In app/assets/javascripts/active_admin.js, add the block shown below

$(document).ready(function() {
  jQuery('input.hasDatetimePicker').datetimepicker({
    dateFormat: "dd/mm/yy",
    beforeShow: function () {
      setTimeout(
        function () {
          $('#ui-datepicker-div').css("z-index", "3000");
        }, 100
      );
    }
  });
});

There are some css hack in app/assets/stylesheets/jquery-ui-timepicker-addon.css.

/* css hack for jquery-ui datepicker */
#ui-datepicker-div {
	width: 202px;
}
#ui-datepicker-div .ui-state-active {
	border: 1px solid #7E7783;
	background: #5F5964;
	font-weight: bold;
	color: white;
	outline: none;
}
#ui-datepicker-div .ui-datepicker-header a {
	margin-top: 8px;
}
#ui-datepicker-div .ui-datepicker-header a span {
	display: block;
}


/* css for timepicker */
.ui-timepicker-div dl { 
	text-align: left;
	color: #5E6469;
}
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }