react-timepicker-c
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

react-timepicker-c

A simple timepicker component for ReactJS also supports custom time input

NPM JavaScript Style Guide

Demo

Install

npm install --save react-timepicker-c

Usage

import * as React from 'react'
 
import TimePicker from 'react-timepicker-c'
 
class Example extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      timeValue: ''
    }
  }
 
  handleTimeChange = (timeValue) => {
    this.setState({
      timeValue 
    })
  } 
 
  render () {
    return (
        <TimePicker
          minTime = '1:00am'
          maxTime =  '4:30pm'
          onChange={this.handleTimeChange}
          timeValue={this.state.timeValue}
          name="timeField"
        />
    )
  }
}

Props

Common props you may want to specify include:

  • name - generate an HTML input with this name, containing the current value (optional)
  • onChange - subscribe to change events
  • minTime - specify the starting time e.g 1:00am (optional)
  • maxTime - specify the maximum time e.g 5:00pm (optional)
  • timeValue - control the current value
  • hasTimeError - boolean value to handle custom error validation (optional)
  • interval - specify the interval between the time options e.g 30 - will represent 30 mins (optional)

Controllable Props

You can control the following props by providing values for them. If you don't, React-timepicker-c will manage them for you.

  • timeValue / onChange - specify the current value of the control

If you don't provide these props, you can set the initial value of the state they control:

Methods

React-timepicker-c exposes a public method:

  • onChange() - Subscribe to change events.

License

MIT © nosisky

Package Sidebar

Install

npm i react-timepicker-c

Weekly Downloads

6

Version

1.1.2

License

MIT

Unpacked Size

1.5 MB

Total Files

9

Last publish

Collaborators

  • nosisky