react-native-business-hours-picker

A React Native datetime picker with customisable hour ranges (e.g. 8am–8pm), minute intervals, and always-visible wheel UI.

Install

npm install react-native-business-hours-picker

Usage

import BusinessHoursPicker from 'react-native-business-hours-picker';

<BusinessHoursPicker
  initialDate={new Date()}
  minHour={8}
  maxHour={20}
  minuteInterval={5}
  onSet={(date) => console.log('Selected:', date)}
  itemTextStyle={{ fontSize: 18, color: '#333', fontFamily: 'Courier' }}
  selectedIndicatorStyle={{ backgroundColor: '#eee' }}
  allowPastDates={false}
/>

Props

| Prop | Type | Required | Description | |------------------------|----------|----------|-------------| | initialDate | Date | No | Defaults to current date/time | | minHour | number | No | Earliest hour to allow (24h format, e.g. 8 = 8am) | | maxHour | number | No | Latest hour to allow (e.g. 20 = 8pm) | | minuteInterval | number | No | Time interval between selectable minutes (e.g. 5) | | onSet | function(Date) | Yes | Called every time the picker changes | | itemTextStyle | object | No | Custom styles for the picker text items | | daysAhead | number | No | Number of days to display in the date wheel (default: 90). When allowPastDates is true, this represents days before and after today (total range: 2 × daysAhead + 1) | | allowPastDates | boolean | No | If true, allows selection of past dates. The date wheel will show daysAhead days before today and daysAhead days after today (default: false) | | selectedIndicatorStyle | object | No | Custom style for the selected indicator background |

Demo