# MeasurementList.DateRange

Canonical page: https://docs.ovok.com/native-sdk/guide/components/measurement/date-range

`DateRange` displays the range beginning at `startDate` and provides previous/next controls. It does not filter a list itself; use `onDateChange` to query or filter the app's data.

```tsx
<MeasurementList.DateRange
  startDate={startDate}
  variant="week"
  disabledNext={false}
  onDateChange={({ startDate, endDate }) => setRange({ startDate, endDate })}
/>
```

Props:

- `startDate`: required date string.
- `variant`: required `"week" | "month" | "year"`.
- `disabledPrevious` and `disabledNext`: disable the matching control.
- `onDateChange`: receives ISO `startDate` and `endDate` values.
- `style` and `testID`: container props.

The end is calculated by adding one unit and subtracting one day, then moving to the end of that day. A week is therefore a seven-day range from the supplied start; a month or year is a duration from that start, not necessarily a calendar-month/year boundary. Changing the variant triggers `onDateChange` for the current start date.