[Form.js] Add DateTimeElement wrapper (#8410)

This adds a DateTimeElement wrapper to our form classes for use
cases where a datetime needs to be selected. It is a wrapper
around the datetime-local input type.

jsx/Form.js

@@ -1,5 +1,5 @@
 /* exported FormElement, FieldsetElement, SelectElement, TagsElement, SearchableDropdown, TextareaElement,
-TextboxElement, PasswordElement, DateElement, NumericElement, FileElement, StaticElement, HeaderElement, LinkElement,
+TextboxElement, PasswordElement, DateElement, DateTimeElement, NumericElement, FileElement, StaticElement, HeaderElement, LinkElement,
 CheckboxElement, ButtonElement, LorisElement
 */
 
@@ -1792,6 +1792,102 @@ TimeElement.defaultProps = {
   },
 };
 
+/**
+ * DateTime Component
+ * React wrapper for a <input type="datetime-local"> element.
+ */
+class DateTimeElement extends Component {
+  /**
+   * @constructor
+   * @param {object} props - React Component properties
+   */
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  /**
+   * Handle change
+   *
+   * @param {object} e - Event
+   */
+  handleChange(e) {
+    this.props.onUserInput(this.props.name, e.target.value);
+  }
+
+  /**
+   * Renders the React component.
+   *
+   * @return {JSX} - React markup for the component
+   */
+  render() {
+    let disabled = this.props.disabled ? 'disabled' : null;
+    let required = this.props.required ? 'required' : null;
+    let requiredHTML = null;
+    let label;
+    let classSz;
+
+    // Add required asterix
+    if (required) {
+      requiredHTML = <span className="text-danger">*</span>;
+    }
+    if (this.props.label) {
+        label = <label className="col-sm-3 control-label"
+            htmlFor={this.props.label}>
+          {this.props.label}
+          {requiredHTML}
+            </label>;
+        classSz = 'col-sm-9';
+    } else {
+        classSz = 'col-sm-12';
+    }
+
+    return (
+      <div className="row form-group">
+        {label}
+        <div className={classSz}>
+          <input
+            type="datetime-local"
+            className="form-control"
+            name={this.props.name}
+            id={this.props.id}
+            onChange={this.handleChange}
+            value={this.props.value || ''}
+            required={required}
+            disabled={disabled}
+            pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}(:[0-5][0-9])?"
+            title={'Input must be in one of the following formats: '
+                  + 'YYYY-MM-DDTHH:MM or YYYY-MM-DDTHH:MM:SS'}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+DateTimeElement.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  onUserInput: PropTypes.func,
+};
+
+DateTimeElement.defaultProps = {
+  name: '',
+  label: '',
+  value: '',
+  id: '',
+  disabled: false,
+  required: false,
+  onUserInput: function() {
+    console.warn('onUserInput() callback is not set');
+  },
+};
+
 /**
  * Numeric Component
  * React wrapper for a <input type="number"> element.
@@ -2847,6 +2943,7 @@ window.EmailElement = EmailElement;
 window.PasswordElement = PasswordElement;
 window.DateElement = DateElement;
 window.TimeElement = TimeElement;
+window.DateTimeElement = DateTimeElement;
 window.NumericElement = NumericElement;
 window.FileElement = FileElement;
 window.StaticElement = StaticElement;
@@ -2870,6 +2967,7 @@ export default {
   PasswordElement,
   DateElement,
   TimeElement,
+  DateTimeElement,
   NumericElement,
   FileElement,
   StaticElement,