Skip to content
This repository

Use existing gem...

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

...or do it manually

  • Datetime picker plugin requires jQuery-UI.

  • 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; }
Something went wrong with that request. Please try again.