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


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:


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;


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 class="selected-control-wrapper">\
    <div class="selected-control-title">\
      <i class="fa fa-list"></i> <span class="base_field">Custom Date</span>\
    <div class="picklist-list-wrapper dropdown-menu" role="menu">\
        <div class="line-separator" style="display: none;"></div>\
     <input id="customdatepicker" type="text" style="width:100%;" > \

f.afterDraw = function() {

    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****");

    // Otherwise, add one
    var params = arcapi.getParameters();
    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;
    $("#customdatepicker").attr("value", startdate + '-' + enddate);

        console.log("INFO: ===> Adding a daterangepicker to the filter's input search box...")
                      "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') ;


return f;