Preset links for ActiveAdmin date_range inputs in sidebar filters in forms
This is how it looks like
Add this line to your application's Gemfile:
gem 'active_admin_date_range_preset'
And then execute:
$ bundle install
Or install it yourself as:
$ gem install active_admin_date_range_preset
Include assests:
JS asset
//= require active_admin_date_range_preset
CSS
@import "active_admin_date_range_preset";
Your sidebar filters should now have link "Set Range"
in New/Edit formtastic forms:
f.input :date_from, as: :date_time_picker, wrapper_html: { class: 'datetime_preset_pair', data: { show_time: 'true' } }
f.input :date_to, as: :date_time_picker
Input can be "as :string" or any other type compatible with "input type=text" Main point is to set for first input-pair wrapper-class
wrapper_html: { class: 'datetime_preset_pair' }
input name('date_from' and 'date_to') can be named whatever your need
By default inputs are filled with date("yyyy-mm-dd"). If you need time add
data: { show_time: 'true' }
If you use GEM https://github.com/activeadmin-plugins/active_admin_datetimepicker and want apply this plugin to filter-inputs for this gem you need:
First apply ActiveAdminDatetimepicker to any filters your need
filter :time_start, as: :date_time_range
In active_admin.js
Add following lines to JavaScript
$(document).on('ready', function(){
$('form.filter_form div.filter_date_time_range').date_range_ext_preset();
});
Now all you "date_time_range" inputs has button "Set range"
You can assign "Set range" almost to any input-text-pair filters/forms. For example, you have complex form where input-pairs are not close to each other and not standard.
$(document).on('ready', function(){
$('.any_jquery_selector').date_range_ext_preset({
lteq_input: '.jquery_selector_to_first_input',
gteq_input: '.jquery_selector_to_second_input'
});
});
".any_jquery_selector" is pointed to place where button "Set range" will appear. Set lteq_input and gteq_input to point to inputs if they not near main selector.
There are several settings, which can be set globally or locally.
Example how to set settings for only specific inputs
$('.any_jquery_selector').date_range_ext_preset({
setting_name: "setting_value"
});
Example how to set global settings. Write it before $(document).on('ready')
$.fn.date_range_ext_preset.defaults.setting_name = "setting_value"
You can set global defaults in your active_admin.js like this:
# End date will be full-day, not next.
# Today true : 2015-06-12 - 2015-06-12
# Today false: 2015-06-12 - 2015-06-13
$.fn.date_range_ext_preset.defaults.date_to_human_readable = true
# Display time
# Today: 2015-06-12 00:00:00 - 2015-06-13 00:00:00
# Today with human_readable=true: 2015-06-12 00:00:00 - 2015-16-12 23:59:59
$.fn.date_range_ext_preset.defaults.show_time = true
value: true/false
default: false
This options changes second date to include full date-time of the day, like normal human thinks about time ranges. Today true : 2015-06-12 - 2015-06-12 Today false: 2015-06-12 - 2015-06-13
When normal human say "2015-06-12" hi means "2015-06-12 23:59:59" But default behavior in programming is "2015-06-12" = "2015-06-12 00:00:00" Be careful with this options. Cause if you change it to "true" you will also need to change your server-side scripts to search "humanize-way".
value: true/false
default: false
If true then will show date and time, usually it will be 00:00:00
values: positive or negative integer
default: 0
To work correctly this plugin needs to detect current date-time. And it uses UTC. But if you need your local timezone or some other time-shift, your can set this option:
Example:
$.fn.date_range_ext_preset.defaults.hours_offset = +3
// or
$.fn.date_range_ext_preset.defaults.hours_offset = -3
$(document).on('ready', function(){
$('.filter_form .filter_date_range').date_range_ext_preset({
date_to_human_readable: true, # affects last day
add_range: [
{
title: 'Last 30 days',
// date_to_human_readable affects end-date, sow must do this:
start: new Date(new Date().setDate(new Date().getDate() - 29)),
end: new Date(new Date().setDate(new Date().getDate() + 1))
}
]
});
});