Skip to main content
Version: v1.0.0

Time ranges

TimeRangePicker picks a start and an end time: opening hours, a shift, quiet hours. Both ends show their time as each platform does: Start and End rows on iOS, as in Calendar, with the wheels opening under the row you tap; large time boxes on Material and side-by-side cards on the web, with an arrow and the range's length between them. One TimePicker edits the end that's chosen, as wheels, a clock dial or a list, the same as TimePicker in each design.

import { TimeRangePicker, TimeRangePickerField, TimeRangePickerSheet } from '@elik56a/react-native-pickers';
Loading…
<>
  <TimeRangePicker value={hours} onChange={setHours} minuteInterval={15} />
  <Text style={{ textAlign: 'center', marginTop: 8 }}>{formatTimeRange(hours)}</Text>
</>

Try the props​

Platform
display
format
minuteInterval
minDuration
<TimeRangePicker
  value={hours}
  onChange={setHours}
  minuteInterval={15}
  minDuration={60}
/>

How the ends move​

  • Moving the start carries the end along, keeping the length, as calendar apps do: a 9:00 – 17:00 shift moved to 10:00 becomes 10:00 – 18:00.
  • Moving the end changes the length, within minDuration and maxDuration (in minutes). An end past either is pulled back to it.
  • An end before the start runs into the next day, as in 22:00 – 07:00. The end is then a Date on the following day, so end - start is the length, and the picker and the field show it with +1.
  • allowOvernight={false} keeps the range within the start's day: an end before the start is moved to minDuration after it, and a start moved late in the day shortens the range to end by midnight.
Loading…
<>
  <TimeRangePicker
    value={quiet}
    onChange={setQuiet}
    minuteInterval={30}
    minDuration={60}
    maxDuration={12 * 60}
    startLabel="From"
    endLabel="Until"
  />
  <Text style={{ textAlign: 'center', marginTop: 8 }}>
    Do not disturb {formatTimeRange(quiet)} · {hours} h
  </Text>
</>

getTimeRangeSeconds(range) gives the length, into the next day for an overnight range, and formatTimeRange(range, { format, locale }) the text, such as 9:00 AM – 5:00 PM or 22:00 – 07:00 +1.

In a sheet or a field​

TimeRangePickerSheet keeps a draft and calls onConfirm with the range on Done. TimeRangePickerField is the form field: it shows the confirmed range and opens the sheet, a dropdown on the web, as the other picker fields do, with error, helperText, required and clearable.

Platform
presentation
display
format
<TimeRangePickerField
  label="Opening hours"
  placeholder="Set hours"
  minuteInterval={15}
  value={hours}
  onConfirm={setHours}
/>
<TimeRangePickerField
  label="Opening hours"
  placeholder="Set hours"
  minuteInterval={15}
  value={hours}
  onConfirm={setHours}
/>

Accessibility​

The two ends are a radio group named "Start or end", and each end reads its label and time, such as "End 07:00 +1". The time picker below it has TimePicker's accessibility.

Props​

TimeRangePicker takes every TimePicker prop except value, defaultValue, onChange and onValueChanging, such as display, format, minuteInterval and minTime / maxTime, which apply to both ends. Plus:

PropTypeDefaultDescription
valueTimeRange ({ start: Date; end: Date })—The range (controlled). The end is on the start's day, or the next day for an overnight range.
defaultValueTimeRangefrom now, for an hourInitial range when uncontrolled. The hour is kept within minDuration and maxDuration.
onChange(range: TimeRange) => void—Fires when the user moves either end.
minDurationnumber0Shortest range, in minutes.
maxDurationnumber—Longest range, in minutes.
allowOvernightbooleantrueLet the end run into the next day.
startLabel / endLabelstring'Start' / 'End'The ends' labels.

TimeRangePickerSheet takes the same props, with onConfirm(range) in place of onChange and without defaultValue, plus the sheet props such as visible and onClose. TimeRangePickerField takes the sheet's props and the field props.

Related​