How to lock date filter ranges for end-users with default or custom date ranges

By default any field with date or timestamp values will be presented with as a Date Picker when added as a Filter Widget to a dashboard:

40%20PM

Date filter widgets also have several options for setting date ranges, including Fixed Dates, Relative Dates, and Quick buttons for fixed date ranges:

48%20PM

Instead of giving end users options to set their date ranges, it may be desirable to fix the date ranges to control filtering paths. This can be achieved by using the “Quick buttons” option in the filter dropdown, and by also applying some custom CSS to the filter widget.

Step 1: Set the filter widget to use Quick Buttons

38%20PM

Step 2: Set custom CSS to hide the filter option dropdown. This can be set inside the settings of the filter widget.

32%20AM

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

Step 3: Filter ranges should now be locked without an option for the user to select other filter options from the dropdown menu:

20%20AM

At this time you can also select other custom date ranges that you might have already created using the Custom Dates feature:

26%20PM

Once a custom date range is created it can be set within the Filter widget settings:

56%20PM

06%20PM

After saving and closing the settings menu, you should now see the Filter widget updated with the custom date range buttons:

15%20PM

1 Like

CSS provided as below worked for hiding the buttons:

.datetime-picker-filter-widget .input-group-addon {
display: none;
}

1 Like