クリアできるredux-form-material-uiのTimePicker

TimePicker.js

import { TimePicker } from 'redux-form-material-ui'
import IconButton from 'material-ui/IconButton'
import Clear from 'material-ui/svg-icons/content/clear'

const Clearable = ComposedComponent => class extends React.Component {

    clearDate (event) {
        event.preventDefault();
        const self = this

        this.refs.timePicker.setState({
            time: null,
            dialogTime: null,
        }, () => {
            this.props.input.onChange(null, null)
        });
    }
    render () {
        return (
            <div style={{position: 'relative', display: 'inline-block'}}>
                <ComposedComponent
                    { ...this.props }
                    ref="timePicker"
                />
                {this.props.input.value &&
                <IconButton ref="button" onClick={this.clearDate.bind(this)} style={{position: 'absolute', top: '6px',right: '4px', padding: '0', width: '24px', height: '24px'}}>
                    <Clear />
                </IconButton>
                }
            </div>
        )
    }
};

export default Clearable(TimePicker)

使う側.js

import TimePicker from 'path/to/TimePicker'
<Field
  id='start_at'
  key='start_at'
  name="start_at"
  component={TimePicker}
  autoOk={true}
  format={null}
  props={{format: "24hr"}}
  style={{display:'inline-block', width: 120, verticalAlign:'top', marginLeft: 10, marginTop: 24}}
  textFieldStyle={{width: 120}}
  cancelLabel="キャンセル"
  okLabel="決定"
/>