Toggle Calendar Icon Visibility in Power BI Date Slicer

In the Power BI March 2022 feature update, a new feature for the Date Slicer was introduced whereby the Date Slicer had a calendar icon right next to the dates by default. While this feature is designed to meet accessibility requirements, it cannot be customized in the formatting pane. Instead, it can only be customized by modifying the theme.

The new feature improves the look and accessibility of the slicer and the report. However, it should provide the option in the formatting pane to turn this feature on and off, without having to modify the theme file. It will make report developers’ lives easier.

This feature also introduced a bug 🐛. The date picker still allows users to pick both dates if they want to limit their choices by setting the Before or After option in the Date Slicer. 

Since I don’t want the user to be able to change the starting date, I chose “Before” from the dropdown above. Take a look at the next image to see how the slicer behaves incorrectly.

It is still possible for users to change the starting date by clicking the Calendar Icon, which should not be allowed. It is important to note that the starting date is disabled in the date entry field as expected.

 

By removing the calendar icon, you can prevent users from changing the starting date. Now we will look at the fix by adding a small JSON snippet within the theme file.

If you have already customized your theme then you can save the current theme otherwise, make a simple customization to enable exporting the current theme file. Power BI wouldn’t allow you to download the theme file if no customization is done.

I selected the current theme and modified the Card and KPI Font size, which will allow me to export the file.

Save the modified theme in a folder, the files is getting saved in JSON format

Open the saved theme file in an application like Notepad++, Notepad or any other application that can manage JSON files, I use Visual Studio Code.

If your theme file already has the element “visualStyles”: then you can add the following JSON snippet at the end within the element, otherwise include the complete code. Basically, the property hideDatePickerButton should be set to TRUE

{
    “name”:”Custom”,
         “visualStyles”:{
             “slicer”:{
                  “*”:{
                     “date”:
                          [
                             { “hideDatePickerButton”:true}
                          ]
                      }
                }
           }
}

Save the theme file and import it onto Power BI as by click on the  “Browse for themes”

In the date slicer, the Calendar Icon is no longer visible, and the dates cannot be modified when choosing Before or After. Hopefully, the Power BI team will fix this issue shortly and provide a way to enable/disable the calendar icon.

Here is the link to the Power BI update of March 2022: LINK 

Download PBIX & Theme file HERE

Hope this article/video was helpful to you? Please leave your comments, suggestions or questions in the comments. 

Cheers!

Spread the word