Date-range-navigator
The date-time stepper to change the time window of the dashboard. The change affects all widgets that use the dashboard time window.
Who it’s for
Anyone reviewing a dashboard period by period — stepping back through last week’s shifts, comparing this month against the previous one, walking a day at a time through an incident. The built-in time window picker jumps to a period; this control steps through them.
What it does
The Date-range-navigator changes the dashboard’s time window with a stepper, moving the whole board forward or back by a fixed increment. Set to a week-long interval stepping by a day, the arrows shift every widget on the dashboard one day at a time while keeping the seven-day window, and a date range picker is available for jumping somewhere specific.
- Stepping, not jumping — the interval stays the same size while it moves, which is what makes period-to-period comparison possible.
- The change applies to the whole dashboard, so every widget using the dashboard time window follows in step.
- Interval and step size are separate: a week-wide window can step by a day, an hour or another week.
- A date range picker is included for going somewhere specific, and can be hidden where only stepping is wanted.
- The selected range can persist in session storage, so a reader returning to the dashboard resumes where they were.
- The first day of the week is configurable, which matters for weekly reporting in different regions.
- The Date-range-navigator only sets the window: widgets configured with their own fixed time window ignore it.
How to set up
Data keys
The Date-range-navigator takes no datasource and no data keys — it drives the dashboard’s time window. The default configuration carries a leftover demo datasource, which can be removed.
Interval and step
| Setting | Default | Effect |
|---|---|---|
| Initial interval | Week | The width of the window — hour, day, week, 2 weeks, month, 3 months or 6 months |
| Initial step size | Day | How far each arrow press moves the window |
| Hide interval | Off | Removes the interval selector, fixing the window width |
| Hide step size | Off | Removes the step selector, fixing the increment |
| Hide date range picker | Off | Removes the picker, leaving only the stepper |
| First day of the week | Locale default | Where a week-wide interval begins |
| Use session storage | Off | Remembers the selected range between visits |
Confirm that the widgets on the dashboard actually use the dashboard time window. A widget configured with its own window will not move, and a board where half the widgets step and half do not is worse than one where none do.
How to customize
- To fix the review period — set the Initial interval and turn on Hide interval, so readers step through a period they cannot accidentally resize.
- To fix the increment — set the Initial step size and turn on Hide step size.
- To make it a pure stepper — turn on Hide date range picker.
- To match regional reporting — set the First day of the week.
- To resume where the reader left off — turn on Use session storage.
- To simplify the picker — turn on the one-panel and auto-confirm options, or show the template list for common ranges.
- To reduce clutter — turn on Hide labels once the controls are self-explanatory.
Tips
- Fix the interval and let only the step vary on a review dashboard. The comparison is only valid while the window stays the same size, and an interval selector left visible invites the one change that invalidates it.
- Turn on session storage for any dashboard people return to during a shift. Without it every visit starts at the default window, and the reader repeats the same navigation each time they come back.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.