Open jitchavan opened 8 years ago
+1
Here is simple class that I wrote to wrap jquery-timpicker:
import React, { Component } from 'react';
import jQuery from 'jquery';
require('../../../node_modules/jquery-timepicker/jquery.timepicker.js');
export default class TimePicker extends Component {
constructor(props) {
super(props);
this.state = {
minTime: props.minTime || '6',
maxTime: props.maxTime || '23',
interval: props.interval || 15,
defaultTime: props.defaultTime || '10',
startTime: props.startTime || '6',
};
this.timepicker = {};
this.onChange = this.onChange.bind(this);
}
onChange(value) {
this.setState({
value,
}, () => {
const { onChange } = this.props;
if (typeof onChange === 'function') {
this.props.onChange(value);
}
});
}
componentDidUpdate() {
const {
minTime,
maxTime,
interval,
defaultTime,
startTime,
} = this.state;
jQuery(this.timepicker).timepicker({
timeFormat: 'HH:mm',
interval,
minTime,
maxTime,
defaultTime,
startTime,
dynamic: true,
dropdown: true,
scrollbar: true,
change: (value) => {
this.onChange(value);
},
});
}
componentWillReceiveProps(nextProps) {
this.setState({
defaultTime: nextProps.defaultTime,
});
}
componentDidMount() {
const {
minTime,
maxTime,
interval,
defaultTime,
startTime,
} = this.state;
jQuery(this.timepicker).timepicker({
timeFormat: 'HH:mm',
interval,
minTime,
maxTime,
defaultTime,
startTime,
dynamic: false,
dropdown: true,
scrollbar: true,
change: (value) => {
this.onChange(value);
},
});
}
render() {
return (
<input
className="timepicker"
ref={(timepicker) => { this.timepicker = timepicker; }}
/>
);
}
}
TimePicker.propTypes = {
minTime: React.PropTypes.string,
maxTime: React.PropTypes.string,
interval: React.PropTypes.number,
defaultTime: React.PropTypes.string,
startTime: React.PropTypes.string,
onChange: React.PropTypes.func,
};
This is a big item for me as well. If possible, we'd like to import it as an ES6 module.
Hi we are looking for same functionality in react component. do you have any plan soon to do it in react.
Thanks.