react-advanced-timefield
v3.7.0
Published
Advanced react time input field
Downloads
584
Maintainers
Readme
react-advanced-timefield
Advanced react time input field. Based out of the Simple React time input field.
Differences with react-simple-timefield
- 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
Installation
npm install --save react-advanced-timefield
#for React <16 use: npm install --save react-advanced-timefield@1
Usage
import TimeField from 'react-advanced-timefield';
...
<TimeField
value={time} // {String} required, format '00:00' or '00:00:00'
onChange={(event, value) => {...}} // {Function} required
input={<MyCustomInputElement />} // {Element} default: <input type="text" />
colon=":" // {String} default: ":"
showSeconds // {Boolean} default: false
showMillis // {Boolean} default: false
/>
Real world example
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 (
<TimeField value={time} onChange={this.onTimeChange} />
);
}
}
Run demo:
For running demo locally, replace:
import TimeField from '../';
// to
import TimeField from '../src';
in demo/index.tsx
file.
# run development mode
cd demo
npm run dev
Build:
npm test
npm run format
npm run build
License
MIT License. Free use and change.