migrate date and datetime widgets

packages/netlify-cms-widget-date/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "netlify-cms-widget-date",
+  "description": "Widget for editing dates in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-date.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "date",
+    "dates"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "react-datetime": "^2.11.0"
+  },
+  "devDependencies": {
+    "css-loader": "^1.0.0",
+    "to-string-loader": "^1.1.5",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "moment": "^2.11.2",
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1",
+    "react-emotion": "^9.2.6"
+  }
+}

packages/netlify-cms-widget-date/src/DateControl.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectGlobal } from 'react-emotion';
+import DateTime from 'react-datetime';
+import dateTimeStyles from 'react-datetime/css/react-datetime.css';
+import moment from 'moment';
+
+injectGlobal`
+  ${dateTimeStyles}
+`
+
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
+const DEFAULT_DATETIME_FORMAT = moment.defaultFormat;
+
+export default class DateControl extends React.Component {
+  static propTypes = {
+    field: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    classNameWrapper: PropTypes.string.isRequired,
+    setActiveStyle: PropTypes.func.isRequired,
+    setInactiveStyle: PropTypes.func.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+    ]),
+    includeTime: PropTypes.bool,
+  };
+
+  format = this.props.field.get('format');
+
+  componentDidMount() {
+    const { value } = this.props;
+
+    /**
+     * 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());
+    }
+  }
+
+  // Date is valid if datetime is a moment or Date object otherwise it's a string.
+  // Handle the empty case, if the user wants to empty the field.
+  isValidDate = datetime => (moment.isMoment(datetime) || datetime instanceof Date || datetime === '');
+
+  handleChange = datetime => {
+    const { onChange } = this.props;
+
+    /**
+     * Set the date only if it is valid.
+     */
+    if (!this.isValidDate(datetime)) {
+      return;
+    }
+
+    /**
+     * Produce a formatted string only if a format is set in the config.
+     * Otherwise produce a date object.
+     */
+    if (this.format) {
+      const formattedValue = moment(datetime).format(this.format);
+      onChange(formattedValue);
+    } else {
+      const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
+      onChange(value);
+    }
+  };
+
+  onBlur = datetime => {
+    const { setInactiveStyle } = this.props;
+
+    if (!this.isValidDate(datetime)) {
+      const parsedDate = moment(datetime);
+
+      if (parsedDate.isValid()) {
+        this.handleChange(datetime);
+      } else {
+        window.alert('The date you entered is invalid.');
+      }
+    }
+
+    setInactiveStyle();
+  };
+
+  render() {
+    const { includeTime, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+    return (
+      <DateTime
+        timeFormat={!!includeTime}
+        value={moment(value, this.format)}
+        onChange={this.handleChange}
+        onFocus={setActiveStyle}
+        onBlur={this.onBlur}
+        inputProps={{ className: classNameWrapper }}
+      />
+    );
+  }
+}

packages/netlify-cms-widget-date/src/DatePreview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const DatePreview = ({ value }) => (
+  <WidgetPreviewContainer>{value ? value.toString() : null}</WidgetPreviewContainer>
+);
+
+DatePreview.propTypes = {
+  value: PropTypes.object,
+};
+
+export default DatePreview;

packages/netlify-cms-widget-date/src/index.js

@@ -0,0 +1,2 @@
+export DateControl from './DateControl';
+export DatePreview from './DatePreview';

packages/netlify-cms-widget-date/webpack.config.js

@@ -0,0 +1,17 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+const baseWebpackConfig = getConfig();
+
+module.exports = {
+  ...baseWebpackConfig,
+  module: {
+    rules: [
+      ...baseWebpackConfig.module.rules,
+      {
+        test: /\.css$/,
+        include: [/react-datetime/],
+        use: ['to-string-loader', 'css-loader'],
+      },
+    ],
+  },
+};