# react-time-period-picker

> Simple react component to select multiple time ranges

Latest version **1.0.3** (published 2019-08-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-time-period-picker
pnpm add react-time-period-picker
yarn add react-time-period-picker
bun add react-time-period-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-08-03 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Sojin antony |
| Maintainers | sojin.antony01 |
| Keywords | Time ranges, Time periods, react time period, react time period picker, react time period selector, react time range picker, time period picker |

## Links

- npm: https://www.npmjs.com/package/react-time-period-picker
- Repository: https://github.com/sojinantony01/react-time-period-picker
- Homepage: https://github.com/sojinantony01/react-time-period-picker#readme
- Issues: https://github.com/sojinantony01/react-time-period-picker/issues
- npm.io page: https://npm.io/package/react-time-period-picker

## Dependencies (2)

- [antd](https://npm.io/package/antd.md) ^3.16.6
- [moment](https://npm.io/package/moment.md) ^2.24.0

## Recent versions

- 1.0.3 (latest) — 2019-08-03
- 1.0.2 — 2019-07-06
- 1.0.1 — 2019-07-06
- 1.0.0 — 2019-07-06
- 0.1.9 — 2019-07-06
- 0.1.8 — 2019-07-06
- 0.1.7 — 2019-06-07
- 0.1.6 — 2019-04-30
- 0.1.5 — 2019-04-30
- 0.1.4 — 2019-04-30
- 0.1.3 — 2019-04-30
- 0.1.2 — 2019-04-30
- 0.1.1 — 2019-04-30
- 0.1.0 — 2019-04-30

## README

#React time period picker 
Simple react component to select multiple time ranges

## Getting Started

Package allows to select certain time ranges or periods.

```
data = {
    {start: "03:06", end: "03:10"},
    {start: "03:11", end: "03:18"},
    ...
}
```
![alt text](https://raw.githubusercontent.com/sojinantony01/react-time-period-picker/master/public/img/Screenshot%20from%202019-06-08%2000-42-59.png)

![alt text](https://raw.githubusercontent.com/sojinantony01/react-time-period-picker/master/public/img/Screenshot%20from%202019-07-06%2014-02-23.png)

```
import React, { Component } from 'react'
import Time from 'react-time-period-picker'
import  './react-time-period-picker/dist/time.css'
class App extends Component {

  constructor(props) {
      super(props);
      this.state = {
       
      };
  }
  onOpeningsChange(e) {
    this.setState({openings:e});
}
  render() {
    return (<div>
      <Time
        onChange={this.onOpeningsChange.bind(this)}
        data={this.state.openings}
        />
                            
    </div>)
  }
}
export default App;
```
Use your on css for better UI
## props

| Prop | Description | Default
| --- | --- | -- |
| data | List of time ranges (Array of objects with start and end times)  | Array [] |
| canOverlap | Allow to overlap time ranges | false |
| className | --- | ""
| invalidOverlapText | Invalid message on Overlap | Time cannot be overlaped |
| equalRangeText | invalid message in equal time periods | Time cannot be equal | 
## Acknowledgments
*antd
*moment

---
_Source: https://npm.io/package/react-time-period-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._