react-simple-timefield alternatives and similar libraries
Based on the "Date / Time picker" category.
Alternatively, view react-simple-timefield alternatives based on common mentions on social networks and blogs.
-
react-date-picker
A date picker for your React app. -
react-nice-dates
A responsive, touch-friendly, and modular date picker library for React. -
react-datepicker2
react datepicker component.(include persian jalaali calendar) -
react-timezone-select
🌐 An extremely usable and dynamic React timezone selector -
date-range-picker
⚛️📆 Flexible React date range picker calendar with no dependencies. -
r-date-picker
Base on react high customize date picker component -
jQWidgets Scheduler
Feature complete Scheduling library.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-simple-timefield or a related project?
README
react-simple-timefield
Simple React time input field, check out demo.
Installation
npm install --save react-simple-timefield
#for React <16 use: npm install --save react-simple-timefield@1
Usage
import TimeField from 'react-simple-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" />
inputRef={(ref) => {...}} // {Function} input's ref
colon=":" // {String} default: ":"
showSeconds // {Boolean} default: false
/>
Real world example
import TimeField from 'react-simple-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} />
);
}
}
Migrate version 2.x to version 3.x
There is a breaking change in version 3.
The onChange
callback property will be called with two arguments.
// Before:
<TimeField onChange={(value) => console.log(value)} />
// After:
<TimeField onChange={(event, value) => console.log(event, value)} />
Contributing
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 install
npm install --only=dev
npm run dev
Build:
npm install
npm install --only=dev
npm test
npm run format
npm run build
License
MIT License. Free use and change.
*Note that all licence references and agreements mentioned in the react-simple-timefield README section above
are relevant to that project's source code only.