https://github.com/activeadmin-plugins/active_admin_date_range_preset
Preset links for ActiveAdmin date_range inputs
https://github.com/activeadmin-plugins/active_admin_date_range_preset
Last synced: about 2 months ago
JSON representation
Preset links for ActiveAdmin date_range inputs
- Host: GitHub
- URL: https://github.com/activeadmin-plugins/active_admin_date_range_preset
- Owner: activeadmin-plugins
- License: mit
- Created: 2015-06-04T13:57:28.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T09:05:45.000Z (over 3 years ago)
- Last Synced: 2025-06-28T19:20:45.737Z (6 months ago)
- Language: Ruby
- Size: 99.6 KB
- Stars: 10
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://badge.fury.io/rb/active_admin_date_range_preset)
[](https://badge.fury.io/js/@activeadmin-plugins%2Factive_admin_date_range_preset)
# 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:
```ruby
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`:
```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`:
```javascript
import '@activeadmin-plugins/active_admin_date_range_preset';
```
Add the following line into `app/assets/stylesheets/active_admin.scss`:
```css
@import '@activeadmin-plugins/active_admin_date_range_preset';
```
Your sidebar filters should now have link "Set Range"
## Usage
in New/Edit formtastic forms:
```ruby
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
```ruby
filter :time_start, as: :date_time_range
```
In active_admin.js
Add following lines to JavaScript
```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.
```javascript
$(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
```javascript
$('.any_jquery_selector').date_range_ext_preset({
setting_name: "setting_value"
});
```
Example how to set global settings. Write it before $(document).on('ready')
```javascript
$.fn.date_range_ext_preset.defaults.setting_name = "setting_value"
```
You can set global defaults in your active_admin.js like this:
```javascript
# 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:
```javascript
$.fn.date_range_ext_preset.defaults.hours_offset = +3
// or
$.fn.date_range_ext_preset.defaults.hours_offset = -3
```
### Addition ranges
```javascript
$(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))
}
]
});
});
```