active_admin_date_range_preset

Preset links for ActiveAdmin date_range inputs in sidebar filters in forms

This is how it looks like

Installation

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

Using assets via Sprockets

JS asset //= require active_admin_date_range_preset

CSS @import "active_admin_date_range_preset";

Using assets via Webpacker (or any other assets bundler) as a NPM module (Yarn package)

Execute:

$ npm i @activeadmin-plugins/active_admin_date_range_preset

Or

$ yarn add @activeadmin-plugins/active_admin_date_range_preset

Or add manually to package.json:

"dependencies": {
  "@activeadmin-plugins/active_admin_date_range_preset": "0.3.1"
}

and execute:

$ yarn

Add the following line into app/assets/javascripts/active_admin.js:

import '@activeadmin-plugins/active_admin_date_range_preset';

Add the following line into app/assets/stylesheets/active_admin.scss:

@import '@activeadmin-plugins/active_admin_date_range_preset';

Your sidebar filters should now have link "Set Range"

Usage

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' }

Using with ActiveAdminDatetimepicker

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"

Custom usage

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.

Global and local settings

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

date_to_human_readable

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

show_time

value: true/false

default: false

If true then will show date and time, usually it will be 00:00:00

hours_offset

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

Addition ranges

$(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))
            }
        ]
    });

});