Skip to main content

Buttons to Set the Date Bar

The Mango date bar controls the time range displayed by charts and tables on a dashboard page. By default, users must interact with a date picker dropdown to change the time range. You can simplify this experience by adding preset buttons that set the date bar to common ranges like "Today," "This Month," or "Year to Date" with a single click.

How It Works​

The dateBar.preset property accepts a string that represents a predefined time range. Setting this value via ng-click immediately updates the date bar and all components on the page that are bound to it. You can place these buttons anywhere in your custom page HTML.

Example Code​

Add the following code to your custom dashboard page. The md-button components use Angular Material styling and the ng-click directive to set the date bar preset.

<div layout="column" layout-gt-sm="row" layout-align="end center">
    <div layout>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='DAY_SO_FAR'">
            TODAY
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='MONTH_SO_FAR'">
            THIS MONTH
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='PREVIOUS_MONTH'">
            LAST MONTH
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='YEAR_SO_FAR'">
            YEAR
        </md-button>
    </div>
</div>

Available Presets​

The following preset strings are recognized by the date bar:

Preset StringTime Range
DAY_SO_FARMidnight today to now
WEEK_SO_FARStart of the current week to now
MONTH_SO_FARFirst of the current month to now
PREVIOUS_MONTHFirst to last day of the previous month
YEAR_SO_FARJanuary 1 to now
PREVIOUS_DAYYesterday, full day
PREVIOUS_WEEKPrevious full week

Customization Tips​

  • Change the button style by replacing md-accent md-hue-3 with other Angular Material theme classes such as md-primary or md-warn.
  • Add additional buttons for custom presets or combine with the dateBar.from and dateBar.to properties for completely custom date ranges.
  • Use layout-gt-sm="row" to display buttons in a row on larger screens and stack them on mobile devices.
  • Tutorials Index — Browse all developer tutorials
  • Date Bar — Built-in Mango date bar component for time range selection