DashboardDateRangePicker

Dashboard-friendly wrapper around the core `DateRangePicker` that speaks ` start, end ` epoch-millisecond timestamps instead of `Date` objects, so it drops s…

Dashboard-friendly wrapper around the core DateRangePicker that speaks { start, end } epoch-millisecond timestamps instead of Date objects, so it drops straight into useDashboardDateRange from @tetherto/mdk-react-adapter.

import { DashboardDateRangePicker } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`value`	Required	`DashboardDateRange`	—	Current range as `{ start, end }` epoch-millisecond timestamps.
`onChange`	Required	`(next: DashboardDateRange) => void`	—	Fires with the next `{ start, end }` window when the user applies a range.
`dateFormat`	Optional	`string \| undefined`	—	Display format. Defaults to `dd/MM/yyyy`.
`disabled`	Optional	`boolean \| undefined`	—	Disable the trigger.
`className`	Optional	`string \| undefined`	—	Optional class hook.

Usage

Dashboard wrapper around the core DateRangePicker. It speaks { start, end } epoch-millisecond timestamps so it drops straight into useDashboardDateRange from @tetherto/mdk-react-adapter without any intermediate Date <-> number plumbing in the page.

Notes

The wrapper ignores partial selections — onChange only fires once the user has picked both from and to and clicked Apply Range in the core picker.
The popover, presets, and styling all come from the core DateRangePicker. This wrapper exists only to adapt the value shape.

Example

/** * Runnable example for DashboardDateRangePicker. * * Demonstrates the `{ start, end }` timestamp shape — the same shape * `useDashboardDateRange` exposes from `@tetherto/mdk-react-adapter`. */import { DashboardDateRangePicker } from '@tetherto/mdk-react-devkit'import { useState } from 'react'export const DashboardDateRangePickerExample = () => {  const now = Date.now()  const [range, setRange] = useState({    start: now - 24 * 60 * 60 * 1000,    end: now,  })  return <DashboardDateRangePicker value={range} onChange={setRange} />}