Integrate A Datetime Picker for Active Admin

Active Admin is a Ruby on Rails plugin that is used by majority of Rails developers for generating Admin pages. When working with ActiveAdmin, a major problem I faced was to integrate a datetime picker to the forms. Plenty of datepickers were available, but I wanted both date and time. It was quite difficult to make most “date and time pickers” work well with ActiveAdmin.

Here, I have described one that worked for me.

Read on to easily integrate a datetime picker to ActiveAdmin!!

Date N Time Picker Active Admin Ruby Gem

Github Repository: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin

Date picker (Default colour and icon)

Time picker (Default colour and icon)

Whyy Use this Gem???

Skip to How to integrate it into ActiveAdmin??

• It works !! 😀 🙈
• Easily customisable — You can change styles and colours used in the datetime picker to suit your website’s theme.
• Can change the Toggle Icon (Shown in the image) — You can change both the icons that you use to toggle to the time picker and back to the date picker. You can even add text or image in its place.

Toggle Icon

• Can disable certain dates — The gem provides a min date and max date option to disable certain dates.
• Can specify datetime formats that suit your project theme.
• Single line to remove the time picker if you only need the datepicker.

How to integrate it into ActiveAdmin??

Installation

Add this line to your application’s Gemfile:

gem 'date_n_time_picker_activeadmin'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install date_n_time_picker_activeadmin

Usage

Code Sample

f.input :column_name, as: :datetimepicker

CSS

In active_admin.scss, add the line,

@import date_n_time_picker_activeadmin

JS

In active_admin.js, add the line,

//= require date_n_time_picker_activeadmin

Et Voila! You have integrated your datetime picker!! 😀

Now, lets customise it… 😁

Customisations

Add a Minimum Date

Disables all dates before the specified minimum date.

f.input :column_name, as: :datetimepicker, datetimepicker_options: { min_date: Date.today }

Add a Maximum Date

Disables all dates after the specified maximum date.

f.input :column_name, as: :datetimepicker, datetimepicker_options: { max_date: Date.today }

Specify a date format

Displays selected datetime in the specified format.

f.input :column_name, as: :datetimepicker, datetimepicker_options: { format: "%mm-%dd-%yyyy %HH:%MM:%SS %P"}

Example

Consider selected date is 09 August 2021, 05:07:08 pm, then format would be %dd %B %yyyy, %hh:%MM:%SS %p

Exclude Timepicker

Hides the timepicker.

f.input :column_name, as: :datetimepicker, datetimepicker_options: { only_datepicker: true }

Customize CSS

To change the major colors, you can use the following SASS variables:

Please make sure to define these variables before importing the datetimepicker’s stylesheet.

For Example,

The active_admin.scss file, would look like this:

//make sure this comes first, before importing datetimepicker's stylesheet
$date-n-time-picker-primary-color: red;
@import "date_n_time_picker_activeadmin"

You can override the default styles in the datetime picker stylesheet in your own application’s stylesheet. You can find the default stylesheet here: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/blob/master/vendor/assets/stylesheets/datetimepicker.scss

Customise the Toggle Icon
To customize the toggle icon, create a .js file to store the following variables and require it before requiring datetimepicker’s javascript file:

For Example,

Define your own javascript file, say var.js and define the above variables there.

// var.js
var toggleTimeIcon = ‘<div>TIME</div’
var toggleCalendarIcon = ‘<div>CALENDAR</div>’

Then, in your active_admin.js file, import the javascript file you just created (here, var.js).

But most importantly, make sure to import it (var.js) before importing the datetimepicker’s javascript file.

// active_admin.js
//= require var.js //make sure this comes first, before requiring datetimepicker’s javascript file
//= require date_n_time_picker_activeadmin.js

That’s all folks! Hope it helped!

If you have any difficulties, feel free to contact me at josh.nikhitha@gmail.com.