diff --git a/package.json b/package.json
index a0a84167..f9371cdb 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "markup-it": "git+https://github.com/cassiozen/markup-it.git",
     "pluralize": "^3.0.0",
     "prismjs": "^1.5.1",
+    "react-datetime": "^2.6.0",
     "react-portal": "^2.2.1",
     "selection-position": "^1.0.0",
     "semaphore": "^1.0.5",
diff --git a/src/components/Widgets/DateTimeControl.js b/src/components/Widgets/DateTimeControl.js
new file mode 100644
index 00000000..82476a25
--- /dev/null
+++ b/src/components/Widgets/DateTimeControl.js
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import DateTime from 'react-datetime';
+
+export default class DateTimeControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(datetime) {
+    this.props.onChange(datetime);
+  }
+
+  render() {
+    return <DateTime value={this.props.value || new Date()} onChange={this.handleChange}/>;
+  }
+}
+
+DateTimeControl.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};
diff --git a/src/components/Widgets/DateTimePreview.js b/src/components/Widgets/DateTimePreview.js
new file mode 100644
index 00000000..972e068c
--- /dev/null
+++ b/src/components/Widgets/DateTimePreview.js
@@ -0,0 +1,9 @@
+import React, { PropTypes } from 'react';
+
+export default function StringPreview({ value }) {
+  return <span>{value}</span>;
+}
+
+StringPreview.propTypes = {
+  value: PropTypes.node,
+};