Date Filter, One Calendar only or force end date

Hi,
In Date filter widget, it comes with 2 calendars for start and end. Can we have only one calendar or force the end date to be similar to start date?
Thank you very much.

@Stima_Livingpresent not currently possible. Would have to use custom style/extension to achieve this along with custom filter expressions.


Steps

  1. Add a custom filter
    image

  2. Change the display setting to “textbox parameter

  3. Specify parameter output name:

  4. Apply the custom style

  5. Now you will see single date parameter being set, which you can then use with custom filter expressions within visuals:

    [Date] = '<<daterange>>'
    


Custom Style

return function() {

var f = function() {};
 
f.version = "1";

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

f.afterDraw = function() {

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

    // check to see if there is a daterangpicker already assigned to the filter
    var drp = $('#' + arcapi.chartId() + " input.picklist-textbox").data('daterangepicker');
    if (drp === undefined) {
        // add a daterangpicker to the filter's input search box
        console.log("INFO: ===> Adding a daterangepicker to the filter's input search box...")
        $('#' + arcapi.chartId() + " input.picklist-textbox").daterangepicker(
                {
                    "format": "YYYY-MM-DD",
                    "singleDatePicker": true,
                    "showDropdowns": true,
                    "startDate": "2018-03-15",
                    "endDate": "2018-03-15",
                    "minDate": "2010-01-01",
                    "maxDate": "2020-12-31"
                },
                function(start, end, label) {
                    console.log('New date selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                }
            )
            ;
    }
    //drp = $('#' + arcapi.chartId() + " input.picklist-textbox").data('daterangepicker');
    //console.log(drp);
};

return f;
}();
4 Likes

Hi, Thank you very much. It works fine. Btw, I have to remove ` in the first 2 lines else everything works perfectly!

@Stima_Livingpresent great! and thanks for note, I have corrected the code now.

Hi Shaun,

Thank you!! it works perfectly, I have one additional question, is there any option to show a different date format in the regular date filters? for example instead of YYYY-MM-DD show MM-DD-YYYY

Thanks!!!

filterscreen|690x424

@Carlos_Bocanegra you can specify that in the custom style, by specifying a different “format” string – “MM-DD-YYYY” as shown below.

...
 $('#' + arcapi.chartId() + " input.picklist-textbox").daterangepicker(
                    {
                        "format": "MM-DD-YYYY",
                        "singleDatePicker": true,
                        "showDropdowns": true,
//                        "parentEl": '#' + arcapi.chartId() + " input.picklist-textbox",
                        "startDate": "03-15-2018",
                        "endDate": "03-15-2018",
                        "minDate": "01-01-2010",
                        "maxDate": "12-31-2020"
                    }, 
...

Thank you Shaun it woks for the custom filter, but what about for a dimension based filter, you chose a date range, is it possible to display it in this format for both start and end dates? the idea of using it based on a dimension is that you can limit the user input for date avoiding having dates with nulls values.

@Carlos_Bocanegra for the regular date range filter, we do not support custom display format. It will always be of the format yyyy-mm-dd

For custom format display, you would need to use the custom style / Javascript.

You need to change the setting to show range picker instead:

                         "singleDatePicker": false,

That will give you the custom display format you specify:

1 Like

Thank you!! will try both approaches