Skip to content
Stand with Ukraine flag

Date-range-navigator

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
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.

Widget Type
  • Static
Category
  • Controls

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

SettingDefaultEffect
Initial intervalWeekThe width of the window — hour, day, week, 2 weeks, month, 3 months or 6 months
Initial step sizeDayHow far each arrow press moves the window
Hide intervalOffRemoves the interval selector, fixing the window width
Hide step sizeOffRemoves the step selector, fixing the increment
Hide date range pickerOffRemoves the picker, leaving only the stepper
First day of the weekLocale defaultWhere a week-wide interval begins
Use session storageOffRemembers 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.