GuidesComponentsMeasurement

MeasurementList.DateRange

Navigate fixed week, month, or year ranges

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

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.

<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.

Last updated on