custom date picker for event creation

src/events/newEvent.js

@@ -2,7 +2,7 @@ import m from 'mithril';
 import { Button, Checkbox, RadioGroup, IconButton, SVG, TextField } from 'polythene-mithril';
 import { styler } from 'polythene-core-css';
 import EditView from '../views/editView';
-import { icons, textInput } from '../views/elements';
+import { icons, textInput, datetimeInput } from '../views/elements';
 
 const style = [
   {
@@ -62,23 +62,6 @@ export default class newEvent extends EditView {
       },
     };
 
-    const secondTableInputs = {
-      location: {
-        label: 'Location',
-      },
-      time_start: {
-        label: 'Event Start [Date and Time]:',
-        help: 'Format: 01.01.1970-18:00',
-        focusHelp: true,
-      },
-      time_end: {
-        label: 'Event End [Date and Time]:',
-        help: 'Format: 01.01.1970-1800',
-        focusHelp: true,
-      },
-
-    };
-
     const thirdTableInputs = {
       spots: {
         label: 'Number of Spots',
@@ -185,13 +168,21 @@ export default class newEvent extends EditView {
         style: {
           display: (this.currentpage === 2) ? 'block' : 'none',
         },
-      }, Object.keys(secondTableInputs).map((key) => {
-        const attrs = secondTableInputs[key];
-        const attributes = Object.assign({}, attrs);
-        attributes.name = key;
-        attributes.floatingLabel = true;
-        return m(textInput, this.bind(attributes));
-      })),
+      }, [
+        m(datetimeInput, this.bind({
+          name: 'time_start',
+          label: 'Event Start Time',
+        })),
+        m(datetimeInput, this.bind({
+          name: 'time_end',
+          label: 'Event End Time',
+        })),
+        m(textInput, this.bind({
+          name: 'location',
+          label: 'Location',
+          floatingLabel: true,
+        })),
+      ]),
       m('div', {
         style: {
           display: (this.currentpage === 3) ? 'block' : 'none',

src/views/elements.js

@@ -29,6 +29,80 @@ export class textInput {
   }
 }
 
+export class datetimeInput {
+  constructor({ attrs: { getErrors, name, onChange } }) {
+    // Link the error-getting function from the binding
+    this.getErrors = () => [];
+    this.name = name;
+    if (getErrors) {
+      this.getErrors = getErrors;
+    }
+    this.value = '';
+    this.date = null;
+    this.time = null;
+    this.onChangeCallback = onChange;
+  }
+
+  onChange() {
+    if (this.date && this.time) {
+      const date = new Date(this.date);
+      const h_m = this.time.split(':');
+      date.setHours(h_m[0]);
+      date.setMinutes(h_m[1]);
+      if (this.onChangeCallback) {
+        this.onChangeCallback(this.name, date.toISOString());
+      }
+    }
+  }
+
+  view({ attrs: { label } }) {
+    // set display-settings accoridng to error-state
+    const errors = this.getErrors();
+
+    const date = {
+      type: 'date',
+      style: {
+        width: '150px',
+        float: 'left',
+      },
+      onChange: ({ value }) => {
+        if (value !== this.date) {
+          this.date = value;
+          this.onChange();
+        }
+      },
+      valid: errors.length === 0,
+      error: errors.join(', '),
+    };
+
+    const time = {
+      type: 'time',
+      style: {
+        width: '100px',
+      },
+      onChange: ({ value }) => {
+        if (value !== this.time) {
+          this.time = value;
+          this.onChange();
+        }
+      },
+      valid: errors.length === 0,
+    };
+    return m('div', [
+      m(TextField, {
+        label,
+        disabled: true,
+        style: {
+          width: '200px',
+          float: 'left',
+        },
+      }),
+      m(TextField, date),
+      m(TextField, time),
+    ]);
+  }
+}
+
 export class selectGroup {
   view(vnode) {
     return m('div.form-group', { class: vnode.attrs.classes }, [