mirror of
https://github.com/vale981/Vulcan
synced 2025-03-10 12:36:39 -04:00
61 lines
1.6 KiB
JavaScript
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);
|