Datetime format

docs/widgets.md

@@ -99,3 +99,14 @@ collections:
         searchFields: [name, twitterHandle]
         valueField: name
 ```
+
+### Date Widget / DateTime Widget
+
+The date and datetime widgets provide date or datetime pickers when the widget is active. The resulting date string can be formatted (uses Moment.js), and accepts a default value. The initial value will be the current date unless `false` or an empty string are provided as the default value.
+
+The following field configuration properties are specific to fields using the date or datetime widget:
+
+Property | Accepted Values | Description
+--- | --- | ---
+`format` | string | format string uses Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/)
+`default` | boolean, string | can be a date string, or else an empty string - defaults to current date

src/components/Widgets/DateControl.js

@@ -1,28 +1,46 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import DateTime from 'react-datetime';
+import moment from 'moment';
 
 export default class DateControl extends React.Component {
   componentDidMount() {
-    if (!this.props.value) {
-      this.props.onChange(new Date());
+    const { value, field, onChange } = this.props;
+    this.format = field.get('format');
+
+    /**
+     * Set the current date as default value if no default value is provided. An
+     * empty string means the value is intentionally blank.
+     */
+    if (!value && value !== '') {
+      this.handleChange(new Date());
     }
   }
 
-  handleChange = (datetime) => {
-    this.props.onChange(datetime);
+  handleChange = datetime => {
+    const newValue = this.format
+      ? moment(datetime).format(this.format)
+      : datetime;
+    this.props.onChange(newValue);
   };
 
   render() {
+    const { includeTime, value } = this.props;
+    const format = this.format || moment.defaultFormat;
     return (<DateTime
-      timeFormat={false}
-      value={this.props.value}
+      timeFormat={!!includeTime}
+      value={moment(value, format)}
       onChange={this.handleChange}
     />);
   }
 }
 
 DateControl.propTypes = {
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.object, // eslint-disable-line
+  value: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  includeTime: PropTypes.bool,
+  field: PropTypes.object,
 };

src/components/Widgets/DateTimeControl.js

@@ -1,27 +1,9 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import DateTime from 'react-datetime';
+import DateControl from './DateControl';
 
 export default class DateTimeControl extends React.Component {
-  componentDidMount() {
-    if (!this.props.value) {
-      this.props.onChange(new Date());
-    }
-  }
-
-  handleChange = (datetime) => {
-    this.props.onChange(datetime);
-  };
-
   render() {
-    return <DateTime value={this.props.value} onChange={this.handleChange} />;
+    const { field, format, onChange, value } = this.props;
+    return <DateControl onChange={onChange} format={format} value={value} field={field} includeTime />;
   }
 }
-
-DateTimeControl.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-  ]),
-};