import React, { PropTypes } from 'react';
import { Field } from 'redux-form';
import { DatePicker, TimePicker } from 'redux-form-material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
import styles from './styles.scss';

injectTapEventPlugin();

const DateTimePicker = ({ name, label, error }) => {
  const datePickerStyle = { display: 'inline-block' };
  const datePickerTextFieldStyle = { width: '135px', fontSize: '18px' };
  const timePickerStyle = datePickerStyle;
  const timePickerTextFieldStyle = { width: '68px', fontSize: '18px' };

  return (
    <div className={styles.dateTimePicker} >
      <Field
        name={name}
        floatingLabelText={label}
        component={DatePicker}
        autoOk
        errorText={error}
        style={datePickerStyle}
        textFieldStyle={datePickerTextFieldStyle}
        locale="en-US"
      />
      <Field
        name={name}
        autoOk
        component={TimePicker}
        floatingLabelText=" " /* Need this to keep lines aligned :/  */
        style={timePickerStyle}
        textFieldStyle={timePickerTextFieldStyle}
        locale="en-US"
      />
    </div>
  );
};

DateTimePicker.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  error: PropTypes.string,
};

export default DateTimePicker;

@@ -415,9 +415,9 @@
 : '1
-3
+4
 5px'
@@ -835,38 +835,146 @@
 le%7D%0A        
-locale=%22en-US%22
+formatDate=%7Bnew Intl.DateTimeFormat('en-US', %7B weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' %7D).format%7D
 %0A      /%3E%0A  
@@ -1208,31 +1208,8 @@
 le%7D%0A
-        locale=%22en-US%22%0A
     

use date format from zeplin