React-Time-Range-Select

React time range select with validation and powered with hooks.

Installation

npm install react-time-range-select --save

Dependencies

• React.JS
• Moment.JS

Usage

import TimeRangeSelect from "./react-time-range-select";

class HomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startTime: "2019-10-05T01:48:00.000Z",
      endTime: "2019-10-05T03:48:00.000Z"
    };
  }

  changeStartTime = value => {
    this.setState({ startTime: value });
  };

  changeEndTime = value => {
    this.setState({ endTime: value });
  };

  render() {
    return (
      <TimeRangeSelect
        startTime={this.state.startTime}
        endTime={this.state.endTime}
        mode24Hours
        onChangeStart={this.changeStartTime}
        onChangeEnd={this.changeEndTime}
      />
    );
  }
}
export default Home;

Component Props

| Property | Type | Default | Description | |:---|:---|:---|:---| | startLabel | string | "Start Time" | Text label that appears before the start time select. | | endLabel | string | "End Time" | Text label that appears before the end time select. | | startTime | string | undefined | A moment ISO 8601 time string for start time. | | endTime | string | undefined | A moment ISO 8601 time string for end time. | | mode24Hours | bool | false | Display 12 hour or 24 hour time. | | className | string | undefined | It's for handling custom styling of the component. | | minuteIncrement | Number | 30 | Defines the increments in time that should appear in the select. Increments must be one of these 1, 2, 5, 10, 15, 20, 30, 60 minutes. | | sameIsValid | boolean | true | If both the start and end times are the same. | | onClick | function | undefined | Function that is called when one of the time select options is clicked. | | onChange | function | undefined | Function that is called when one of the values in the time select changes. | | showErrors | boolean | true | Display an error message when the input times are invalid. | | equalTimeError | string | "Please enter a valid time. Start and End times cannot be the same." | Error 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 showing when the selected end time is before the start time.| | onStartTimeClick | function | undefined | Function that is called when the start time select is clicked. | | onStartTimeChange | function | undefined |Function that is called when the start time select value is changed. | | onEndTimeClick | function | undefined | Function that is called when the end time select option is clicked. | | onEndTimeChange | function | undefined |Function that is called when the end time select value is changed. |

License

MIT