application/metaproperties/datetime-meta-property.js

import React from 'react';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import Subheader from 'material-ui/Subheader';
import shallowCompare from 'react-addons-shallow-compare';
import moment from 'moment';

import {Row, Col} from './../components/flexbox';

class DateMetaProperty extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'DateMetaProperty';
        this.state = {
            date: false,
            time: false
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.value != this.props.value) {
            return true;
        }
        if (nextProps.disabled != this.props.disabled) {
            return true;
        }
        return false;
    }

    rando() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        let str = [];
        for (let i=0; i<5; i++) {
            str.push(chars.charAt(Math.floor(Math.random() * chars.length)));
        }

        return str.join('');
    }

    handleDateChange(e, date) {
        const useDate = new moment(date).format('Y-MM-DD');
        this.setState({date: useDate}, this.handleChange.bind(this));
    }

    handleTimeChange(e, time) {
        const useTime = new moment(time).format('HH:mm:ss');
        this.setState({time: useTime}, this.handleChange.bind(this));
    }

    handleChange() {
        let {date, time} = this.state;
        let defaultDate = moment();
        if (this.props.value) {
            defaultDate = moment.utc(this.props.value, 'Y-MM-DD HH:mm:ss').local();
        }

        if (!date) {
            date = defaultDate.format('Y-MM-DD');
        }

        if (!time) {
            time = defaultDate.format('HH:mm:ss');
        }

        const propName = this.props.name;
        const newTime = moment(date + ' ' + time, 'Y-MM-DD HH:mm:ss');

        let fakeEvent = {
            target: {
                getAttribute: function() {
                    return propName;
                },
                value: newTime.utc().format('Y-MM-DD HH:mm:ss')
            }
        };

        this.props.onChange(fakeEvent);
    }

    render() {
        const name = this.props.name ? this.props.name : 'date_' + this.rando();
        let defaultDate;

        if (this.props.value) {
            defaultDate = moment.utc(this.props.value, 'Y-MM-DD HH:mm:ss').local().toDate();
        }

        return (
            <div>
                <span className='fixed-label'>{this.props.floatingLabelText}</span>
                <Row top='xs'>
                    <Col xs={6}>
                        <DatePicker
                            name={name}
                            floatingLabelText='Date'
                            fullWidth={true}
                            onChange={this.handleDateChange.bind(this)}
                            defaultDate={defaultDate}
                            autoOk={true}
                            firstDayOfWeek={0}
                            />
                    </Col>
                    <Col xs={6}>
                        <TimePicker
                            name={name}
                            floatingLabelText='Time'
                            fullWidth={true}
                            onChange={this.handleTimeChange.bind(this)}
                            defaultTime={defaultDate}
                            autoOk={true}
                            />
                    </Col>
                </Row>
            </div>
        );
    }
}

export default DateMetaProperty;