react-time-selection

A simple time picker based on react-dates and react-timepicki

Install

npm install --save react-time-selection

Usage

import React, { Component } from "react";
import ReactTimeSelection from "react-time-selection";

class Example extends Component {
  render() {
    return <ReactTimeSelection />;
  }
}

Or for 24 hour (Military) Time

import React, { Component } from "react";
import ReactTimeSelection from "react-time-selection";

class Example extends Component {
  render() {
    return <ReactTimeSelection isMilitaryTime />;
  }
}

Controlled Component

import React, { Component } from "react";
import TimeSelection from "react-time-selection";

export default class App extends Component {
  state = {
    time: "10 : 00 AM"
  };
  render() {
    const { time } = this.state;
    return (
      <div>
        <TimeSelection
          value={time}
          onTimeChange={time => this.setState({ time })}
        />
      </div>
    );
  }
}

Props

isMilitaryTime: PropTypes.bool,
placeholder: PropTypes.string,
value: PropTypes.string,
onTimeChange: PropTypes.func,
onChange: PropTypes.func, // handles change of input element
inputClass: PropTypes.string, // classes to style input element

License

MIT © cjellerHypur