How to make a custom date filter not based on a field

Was wondering if you could help me create a custom date filter that is not based on any existing field (I want to use it as a parameter setter)?

I used some information from here, Date Filter, One Calendar only or force end date and I was able to create one, but the one it created was a vanilla daterangepicker instead of the one that Arcadia uses (with the pre-configured ranges, and styling).

I know I should be adding some classes like datetime-picker-filter-widget somewhere… but I cant seem to figure out where to make this work…
Note, I have created a Custom Style for it.

Thank you in advance

@fernie To add the dateranges you need to do two things:

  1. Update the JS to include additional parameters:
  2. override the CSS

1) JS changes

You can read more here: http://www.daterangepicker.com/#config
But essentially you need to add a property called “ranges” as shown below:

 $('#' + arcapi.chartId() + " input.picklist-textbox").daterangepicker(
                {
                      "singleDatePicker": true,
                      ranges: {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                      },
                      "startDate": "03/14/2019",
                      "endDate": "03/20/2019"
                },

2) CSS changes

.daterangepicker > .ranges  {
   float: right !important;
   display: block !important;
}

.daterangepicker.opensright .ranges, 
.daterangepicker.single .ranges, 
.daterangepicker.single .calendar  {
   float: right !important;
}

Together they will give you a date picker like so:

image

You know… I went to that page and did not scroll down far enough.
Thank you Shaun for the help! :heart_eyes:

By the way, I tried hiding the magnifying glass icon from the text box by doing this in the CSS:

.input-group-addon {
display: none;
}

But the text box size is not occupying the whole filter widget as if the icon doesn’t exist. :frowning:

I found the div for that text box with classes “picklist-textbox form-control” with a style for .input-group .form-control as width: 100%
so that should be OK… but then I saw the div above it, with a class of “input-group”, that it looks like could be what’s limiting the size of the text box.
I couldn’t find the property to make the size of the text box expand.

Am I looking at the right places?
How should I set that text box’s width to fill up the filter widget after I hid the magnifier icon? :thinking:

@fernie I think you also need this:

.widget-content .input-group {
    width: 100%;
}

Ugh :+1:t4:, you da man!
CSS question… Do I need to reference .widget-content? Why not just do .input-group?

Also, I just tried your example for the date and I see that it is still not the Arcadia date version because when I choose to select a range, it doesnt give me the variables “.start” and “.end” like it does when I choose a Date variable for a filter out of the box.

How would I make it so this parameter filter “implements” the behavior of the Arcadia date filter?

@fernie is your goal date “range” or single date? the custom style you used is meant for single date selections.

I went ahead and changed “singleDatePicker”: true to false.

But my goal is to have a date filter for parameter to behave just like a date filter for date field.

@fernie I think you need a completely different custom style to have a date “range” with start & end parameters.

Here’s a custom style you need to apply to one visual in the dashboard. It will set parameters “customdate.start” and “customdate.end” as shown in the screenshot:

CSS

daterangepicker > .ranges  {
float: right !important;
display: block !important;
}

.daterangepicker.opensright .ranges, .daterangepicker.single .ranges, .daterangepicker.single .calendar  {
float: right !important;
}

.custom-control {
border: solid 1px #e6e6e6;
transition: all 0.2s ease-in-out;
border-radius: 3px;
padding: 0.3em 0.4em;
overflow: visible;
height: 4.6em;
min-width: 200px;
background-color: #f8f8f8;
}

JS

return function() {

var f = function() {};

f.version = "1";

f.disableDraw = function() {
    return false;
};


// HTML to create filter 
f.html = '<li class="custom-control arc-viz-container " data-arc-classnames=""> \
</div>\
  <div class="selected-control-wrapper">\
    <div class="selected-control-title">\
      <i class="fa fa-list"></i> <span class="base_field">Custom Date</span>\
    </div>\
    <div class="picklist-list-wrapper dropdown-menu" role="menu">\
      <div>\
        <div class="line-separator" style="display: none;"></div>\
      </div>\
    </div>\
     <input id="customdatepicker" type="text" style="width:100%;" > \
  </div>\
</li>'

f.afterDraw = function() {

    console.log("");
    console.log("INFO: ===> -----------------------------------------------------");
    console.log("INFO: ===> | Applying custom style |");
    console.log("INFO: ===> -----------------------------------------------------");

    // check to see if there is a daterangpicker already assigned to the filter
   
   
   // Need to append to the filter area at top of dashboard
    var $sel = $('ul.control-list');
    
    // Does the custom date filter exist?
    var $q = $sel.find('#customdatepicker');

    if ($q.length > 0) {
        console.log("***Already have date picker skip creating****");
        return;
    }

    // Otherwise, add one
    $sel.append(f.html);
    
    
    var params = arcapi.getParameters();
    console.log(params["customdate.start"]);
    console.log(params["customdate.end"]);
    
    
    var startdate = params["customdate.start"] || '2019-01-01';  // DEFAULT START DATE
    var enddate = params["customdate.end"]  || '2019-03-19';     // DEFAULT END DATE
    
    
    // setting dashboard parameters to default value if none exists
    var param = {};
    param["customdate.start"] = startdate;
    param["customdate.end"] = enddate;
    arcapi.sendParameters(param);
    
    console.log(startdate);
    $("#customdatepicker").attr("value", startdate + '-' + enddate);

        console.log("INFO: ===> Adding a daterangepicker to the filter's input search box...")
        $('#customdatepicker').daterangepicker(
                {
                      "singleDatePicker": false,
                      ranges: {
                          'Today': [moment(), moment()],
                          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                          'This Month': [moment().startOf('month'), moment().endOf('month')],
                          'Year start': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                      },
                      "startDate": startdate,
                      "endDate": enddate,
                      "showCustomRangeLabel": false,
                       "format": "YYYY-MM-DD",
                      
                },
                function(start, end, label) {
                    console.log('New date selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                
                    var param = {};
                param["customdate.start"] = start.format('YYYY-MM-DD') ;
                param["customdate.end"] = end.format('YYYY-MM-DD') ;
                arcapi.sendParameters(param);
                }
            );

};

return f;

 }();