React-table-time-picker NPM

react-table-time-picker

npm.io

Description

Time picker represented in table form

Dependencies

React.JS
Moment.JS

Installation

npm run install --save react-table-time-picker

Usage

import React, { useState } from 'react';
import { render } from 'react-dom';
import moment from 'moment';
import TimePicker from 'react-table-time-picker';

function App() {
  return (
    <div>
      <TimePicker
        attachElement={(
          <input />
        )}
      />
    </div>
  );
}
render(<App />, document.getElementById('root'));

API

Name	Type	Default	Description
zIndex	Number	1	css z-index
maxWidth	Number	undefined	css max-width
maxHeight	Number	undefined	css max-height
position	'top','right','bottom','left'	medium	position of the time picker relative to its attach element
defaultValue	`moment`,`moment`	moment(), moment()	moment instance of begin time and end time
onValueChange	Function	() => {}	call back when both start time and end time are selected,two-tuple `[moment,moment]` which represents start and end time will be passed as arguments
size	'small','medium','big'	medium	size of the time picker
width	Number	according to size	if you are not satisfied with the preset width according to size props,custom it with this prop
height	Number	according to size	if you are not satisfied with the preset height according to size props,custom it with this prop
fontSize	Number	according to size	if you are not satisfied with the preset fontSize according to size props,custom it with this prop
attachElement	HTMLElement	-	the attachment for the time picker
originColor	CSS Color	#66ccff	color of the table cell
includedColor	CSS Color	rgba(102, 204, 255, 0.5)	color of the table cell when included between the begin time and end time
selectedColor	CSS Color	#458bad	color of the table cell when selected as begin time or end time
confirmModal	Boolean	true	whether to pop up a confirm modal when begin time and end time are both selected
className	String	empty string	className of the time picker wrapper element, note that this prop is designed to help detecting the propagation of events produced inside the time picker
hourStep	Number	1	hour interval option
minuteStep	Number	1	minute interval option