Advanced react time input field
npm install react-advanced-timefieldAdvanced react time input field. Based out of the Simple React time input field.




- Added milliseconds support with showMillis property
- Removed 24 hour limit (new limit is 99)
- Added up/down arrow support to increase or decrease based on cursor position
- Added className property to receive css classes
- Added TypeScript compatibility
bash
npm install --save react-advanced-timefield#for React <16 use: npm install --save react-advanced-timefield@1
`Usage
`jsx
import TimeField from 'react-advanced-timefield';
...
value={time} // {String} required, format '00:00' or '00:00:00'
onChange={(event, value) => {...}} // {Function} required
input={ } // {Element} default:
colon=":" // {String} default: ":"
showSeconds // {Boolean} default: false
showMillis // {Boolean} default: false
/>
`Real world example
`jsx
import TimeField from 'react-advanced-timefield';class App extends React.Component {
constructor(...args) {
super(...args);
this.state = {
time: '12:34'
};
this.onTimeChange = this.onTimeChange.bind(this);
}
onTimeChange(event, time) {
this.setState({time});
}
render() {
const {time} = this.state;
return (
);
}
}
`#### Run demo:
For running demo locally, replace:
`javascript
import TimeField from '../';
// to
import TimeField from '../src';
`
in demo/index.tsx file.`bash
run development mode
cd demo
npm run dev
`#### Build:
`bash
npm test
npm run format
npm run build
``