
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
react-time-range
Advanced tools
A simple react component for selecting start and end time ranges, with validation.
If you need to adjust days and months, and not specifically time, you can pass in your own calendar components as children so that they appear beside each of the time selector drop-downs.
npm install react-time-range
import TimeRange from 'react-time-range';
import moment from 'moment';
<TimeRange
startMoment={this.state.startTime}
endMoment={this.state.endTime}
onChange={this.returnFunction}
/>
Property | Type | Default | Description |
---|---|---|---|
use24Hours | bool | false | Select drop-downs display 12 hour or 24 hour time. |
startLabel | string | "Start:" | Text label that appears before the start time select drop-down. |
endLabel | string | "End:" | Text label that appears before the end time select drop-down. |
startMoment | string | undefined | A moment ISO 8601 time string representing the start time. |
endMoment | string | undefined | A moment ISO 8601 time string representing the end time. |
minuteIncrement | Number | 30 | Defines the increments in time that should appear in the drop-down menus. Increments must be one of the following 1, 2, 5, 10, 15, 20, 30, 60 minutes. |
sameIsValid | boolean | true | If both the start and end times are the same, this may or may not be considered a valid time range. |
className | string | undefined | Prop for handling custom styling of the component. |
onClick | function | undefined | Return function that is called when one of the time drop-down menus is clicked. |
onChange | function | undefined | Return function that is called when one of the values in the time drop-down menu changes. |
showErrors | boolean | true | Display an error message when the input times are considered invalid. |
equalTimeError | string | "Please enter a valid time. Start and End times cannot be equal." | Error string that is rendered when both start and time values are the same, and this is considered invalid when sameIsValid={true} |
endTimeError | string | "Please enter a valid time. End time cannot be before start time." | Error string that is rendered when the selected end time occurs before the start time. |
onStartTimeClick | function | undefined | Return function that is called when the start time drop-down menu is clicked. |
onStartTimeChange | function | undefined | Return function that is called when the start time drop-down value is changed. |
onEndTimeClick | function | undefined | Return function that is called when the end time drop-down menu is clicked. |
onEndTimeChange | function | undefined | Return function that is called when the end time drop-down value is changed. |
FAQs
A flexible time range selector for React
The npm package react-time-range receives a total of 950 weekly downloads. As such, react-time-range popularity was classified as not popular.
We found that react-time-range demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.