Vulcan/packages/vulcan-ui-bootstrap/lib/components/forms/Time.jsx
2019-01-24 18:01:53 +09:00

61 lines
1.6 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import DateTimePicker from 'react-datetime';
import { Components, registerComponent } from 'meteor/vulcan:core';
class Time extends PureComponent {
constructor(props) {
super(props);
this.updateDate = this.updateDate.bind(this);
}
updateDate(mDate) {
// if this is a properly formatted moment date, update time
if (typeof mDate === 'object') {
this.context.updateCurrentValues({ [this.props.path]: mDate.format('HH:mm') });
}
}
render() {
const date = new Date();
// transform time string into date object to work inside datetimepicker
const time = this.props.value;
if (time) {
date.setHours(parseInt(time.substr(0, 2)), parseInt(time.substr(3, 5)));
} else {
date.setHours(0, 0);
}
return (
<Components.FormItem {...this.props.inputProperties}>
<DateTimePicker
value={date}
viewMode="time"
dateFormat={false}
timeFormat="HH:mm"
// newDate argument is a Moment object given by react-datetime
onChange={newDate => this.updateDate(newDate)}
inputProps={{ name: this.props.name }}
/>
</Components.FormItem>
);
}
}
Time.propTypes = {
control: PropTypes.any,
datatype: PropTypes.any,
group: PropTypes.any,
label: PropTypes.string,
name: PropTypes.string,
value: PropTypes.any,
};
Time.contextTypes = {
updateCurrentValues: PropTypes.func,
};
export default Time;
registerComponent('FormComponentTime', Time);