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:


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


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


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


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


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


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



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


1 Like

CSS provided as below worked for hiding the buttons:

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

1 Like