generic datetime picker component for nova:forms working on new & edit post

packages/nova-forms/lib/DateTime.jsx

@@ -1,29 +1,34 @@
 import React, { PropTypes, Component } from 'react';
-import DateTimeField from 'react-bootstrap-datetimepicker';
+import DateTimeField from 'react-datetime';
-import Row from './row.js';
-import ComponentMixin from './component.js';
 import moment from 'moment';
 
 class DateTime extends Component {
-
   render() {
-
-    const date = this.props.value ? moment(this.props.value).format("x") : moment().format("x");
-    // console.log(this)
-    // console.log(date)
-
     return (
       <div className="form-group row">
         <label className="control-label col-sm-3">{this.props.label}</label>
-        <div className="col-sm-9"><DateTimeField dateTime={date} format={"x"} inputProps={{name: this.props.name}}/></div>
+        <div className="col-sm-9">
+          <DateTimeField 
+            value={this.props.value || new Date()}
+            defaultValue={moment().format("x")}
+            onChange={newDate => this.props.updateCurrentValue(this.props.name, newDate._d)}
+            format={"x"} 
+            inputProps={{name: this.props.name}}
+          />
         </div>
-    )
+      </div>
+    );
   }
 }
 
 DateTime.propTypes = {
+  control: React.PropTypes.any,
+  datatype: React.PropTypes.any,
+  group: React.PropTypes.any,
   label: React.PropTypes.string,
-  value: React.PropTypes.any
+  updateCurrentValue: React.PropTypes.func,
+  name: React.PropTypes.string,
+  value: React.PropTypes.any,
 }
 
 export default DateTime;

packages/nova-forms/lib/FormComponent.jsx

@@ -53,8 +53,8 @@ class FormComponent extends Component {
           return <RadioGroup    {...properties} />;
         case "select":
           return <Select        {...properties} />;
-        // case "datetime":
+        case "datetime":
-        //   return <DateTime      {...properties} />;
+          return <DateTime      {...properties} />;
         default: 
           return <Input         {...properties} type="text" />;
       }

packages/nova-forms/lib/NovaForm.jsx

@@ -302,6 +302,9 @@ class NovaForm extends Component{
   submitForm(data) {
     this.setState({disabled: true});
 
+    // mutate data with values not caught by formsy submit handler (ex: datetimepicker)
+    data = {...data, ...this.state.currentValues};
+
     const fields = this.getFieldNames();
 
     // if there's a submit callback, run it

packages/nova-forms/lib/datetime.scss

@@ -1 +1,217 @@
-// @import '{}/node_modules/react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css';
+/*!
+ * https://github.com/arqex/react-datetime
+ */
+
+.rdt {
+  position: relative;
+}
+.rdtPicker {
+  display: none;
+  position: absolute;
+  width: 250px;
+  padding: 4px;
+  margin-top: 1px;
+  z-index: 99999 !important;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  border: 1px solid #f9f9f9;
+}
+.rdtOpen .rdtPicker {
+  display: block;
+}
+.rdtStatic .rdtPicker {
+  box-shadow: none;
+  position: static;
+}
+
+.rdtPicker .rdtTimeToggle {
+  text-align: center;
+}
+
+.rdtPicker table {
+  width: 100%;
+  margin: 0;
+}
+.rdtPicker td,
+.rdtPicker th {
+  text-align: center;
+  height: 28px;
+}
+.rdtPicker td {
+  cursor: pointer;
+}
+.rdtPicker td.rdtToday:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
+  color: #999999;
+}
+.rdtPicker td.rdtToday {
+  position: relative;
+}
+.rdtPicker td.rdtToday:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #428bca;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.rdtPicker td.rdtActive.rdtToday:before {
+  border-bottom-color: #fff;
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.rdtPicker td span.rdtOld {
+  color: #999999;
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker th {
+  border-bottom: 1px solid #f9f9f9;
+}
+.rdtPicker .dow {
+  width: 14.2857%;
+  border-bottom: none;
+}
+.rdtPicker th.rdtSwitch {
+  width: 100px;
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+  font-size: 21px;
+  vertical-align: top;
+}
+
+.rdtPrev span,
+.rdtNext span {
+  display: block;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker thead tr:first-child th {
+  cursor: pointer;
+}
+.rdtPicker thead tr:first-child th:hover {
+  background: #eeeeee;
+}
+
+.rdtPicker tfoot{
+  border-top: 1px solid #f9f9f9;
+}
+
+.rdtPicker button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.rdtPicker button:hover {
+  background-color: #eee;
+}
+
+.rdtPicker thead button {
+  width: 100%;
+  height: 100%;
+}
+
+td.rdtMonth,
+td.rdtYear {
+  height: 50px;
+  width: 25%;
+  cursor: pointer;
+}
+td.rdtMonth:hover,
+td.rdtYear:hover {
+  background: #eee;
+}
+
+.rdtCounters {
+  display: inline-block;
+}
+
+.rdtCounters > div{
+  float: left;
+}
+
+.rdtCounter {
+  height: 100px;
+}
+
+.rdtCounter {
+  width: 40px;
+}
+
+.rdtCounterSeparator {
+  line-height: 100px;
+}
+
+.rdtCounter .rdtBtn {
+  height: 40%;
+  line-height: 40px;
+  cursor: pointer;
+  display: block;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;
+}
+.rdtCounter .rdtBtn:hover {
+  background: #eee;
+}
+.rdtCounter .rdtCount {
+  height: 20%;
+  font-size: 1.2em;
+}
+
+.rdtMilli {
+  vertical-align: middle;
+  padding-left: 8px;
+  width: 48px;
+}
+
+.rdtMilli input {
+  width: 100%;
+  font-size: 1.2em;
+  margin-top: 37px;
+}
+
+.rdtDayPart {
+  margin-top: 43px;
+}

packages/nova-i18n-en-us/lib/en_US.js

@@ -29,6 +29,7 @@ Telescope.strings.en = {
   "posts.enter_thumbnail_url": "Enter URL",
   "posts.created_message": "Post created.",
   "posts.rate_limit_error": "Please wait {details} seconds before posting again.",
+  "posts.postedAt": "Posted at",
 
   "comments.comments": "Comments",
   "comments.count": "{count, plural, =0 {No comments} one {# comment} other {# comments}}",

packages/nova-posts/lib/schema.js

@@ -71,8 +71,8 @@ Posts.schemaJSON = {
   postedAt: {
     type: Date,
     optional: true,
-    // insertableIf: Users.is.admin,
+    insertableIf: Users.is.admin,
-    // editableIf: Users.is.admin,
+    editableIf: Users.is.admin,
     publish: true,
     control: "datetime",
     group: adminGroup