TimeframeControls
Date-range picker for financial reporting pages — supports year, month, and week granularity via connected selects.
Date-range picker for financial reporting pages — supports year, month, and week granularity via connected selects.
import { TimeframeControls } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
hint | Optional | string | — | — |
onReset | Optional | VoidFunction | — | — |
showResetButton | Optional | boolean | — | — |
isWeekSelectVisible | Optional | boolean | — | — |
isMonthSelectVisible | Optional | boolean | — | — |
layout | Optional | "horizontal" | "stacked" | — | — |
dateRange | Optional | TimeframeControlsDateRange | — | — |
timeframeType | Optional | TimeframeTypeValue | null | — | — |
onRangeChange | Optional | TimeframeControlsOnRangeChange | — | — |
onTimeframeTypeChange | Optional | (type: TimeframeTypeValue) => void | — | — |
Usage
Controls for selecting a reporting time frame: year, month, and optional week picker.
| Component | Description |
|---|---|
TimeframeControls | Full time-frame picker: year, month, and optional week selection in horizontal or vertical layout. |
TimeframeWeekTreeContent | Hierarchical year → month → week tree used inside TimeframeControls. |
TimeframeControls Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
hint | string | no | — | Helper text below the controls. |
dateRange | DateRange | no | — | Current date range. |
isMonthSelectVisible | boolean | no | true | Show month selector. |
isWeekSelectVisible | boolean | no | true | Show week selector. |
onRangeChange | (range) => void | no | — | Called when the range changes. |
timeframeType | string | no | — | Active timeframe type. |
onTimeframeTypeChange | (type) => void | no | — | Called when timeframe type changes. |
layout | "horizontal" | "vertical" | no | "horizontal" | Layout direction. |
Examples
import { TimeframeWeekTreeContent } from '@tetherto/mdk-react-devkit'export const TimeframeWeekTreeContentExample = () => ( <div className="mdk-example-row"> <TimeframeWeekTreeContent timezone="UTC" selectedYear={2026} selectedMonth={4} /> </div>)import { TimeframeControls } from '@tetherto/mdk-react-devkit'export const TimeframeControlsExample = () => ( <div className="mdk-example-row"> <TimeframeControls onRangeChange={(range) => console.warn('range changed', range)} layout="horizontal" /> </div>)