Create MuiPicker component to display dates

packages/vulcan-ui-material/lib/components/forms/base-controls/MuiPicker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
+import withStyles from '@material-ui/core/styles/withStyles';
+import ComponentMixin from './mixins/component';
+import MuiFormControl from './MuiFormControl';
+import MuiFormHelper from './MuiFormHelper';
+import TextField from '@material-ui/core/TextField';
+
+import moment from 'moment';
+import 'moment-timezone';
+
+const dateFormat = 'YYYY-MM-DD';
+
+export const styles = theme => ({
+  inputRoot: {
+    '& .clear-enabled': { opacity: 0 },
+    '&:hover .clear-enabled': { opacity: 0.54 },
+  },
+  inputFocused: {
+    '& .clear-enabled': { opacity: 0.54 }
+  },
+});
+
+//noinspection JSUnusedGlobalSymbols
+const MuiPicker = createReactClass({
+
+  mixins: [ComponentMixin],
+
+  displayName: 'MuiPicker',
+
+  propTypes: {
+    type: PropTypes.oneOf([
+      'date',
+      'datetime',
+      'datetime-local',
+    ]),
+    errors: PropTypes.array,
+    placeholder: PropTypes.string,
+    formatValue: PropTypes.func,
+    hideClear: PropTypes.bool,
+  },
+  
+  getDefaultProps: function () {
+    return {
+      type: 'date',
+    };
+  },
+  
+  handleChange: function (event) {
+    let value = event.target.value;
+    if (this.props.scrubValue) {
+      value = this.props.scrubValue(value);
+    }
+    this.props.onChange(value);
+  },
+  
+  render: function () {
+    const { classes, disabled, autoFocus } = this.props;
+    const value = moment(this.props.value, dateFormat, true).isValid() ? this.props.value : moment(this.props.value).format(dateFormat);
+
+    const options = this.props.options || {};
+
+    return (
+      <MuiFormControl {...this.getFormControlProperties()} htmlFor={this.getId()}>
+        <TextField
+            ref={c => (this.element = c)}
+            {...this.cleanProps(this.props)}
+            id={this.getId()}
+            value={value}
+            autoFocus={options.autoFocus || autoFocus}
+            onChange={this.handleChange}
+            disabled={disabled}
+            placeholder={this.props.placeholder}
+            classes={{ root: classes.inputRoot }}
+        />
+        <MuiFormHelper {...this.getFormHelperProperties()}/>
+      </MuiFormControl>
+    );
+  }
+});
+
+
+export default withStyles(styles)(MuiPicker);

packages/vulcan-ui-material/lib/components/forms/controls/Date.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MuiInput from '../base-controls/MuiInput';
+import MuiPicker from '../base-controls/MuiPicker';
 import { registerComponent } from 'meteor/vulcan:core';
 import withStyles from '@material-ui/core/styles/withStyles';
 
@@ -29,9 +29,7 @@ export const styles = theme => ({
   
 });
 
-
 const DateComponent = ({ refFunction, classes, ...properties }) =>
-  <MuiInput {...properties} ref={refFunction} type="date"/>;
+  <MuiPicker {...properties} {...classes} ref={refFunction}/>;
-
 
 registerComponent('FormComponentDate', DateComponent, [withStyles, styles]);