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
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.
- 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.