BUG: Use datepicker in collection form (#81)

Fixes #73

app/models/collection.js

@@ -7,9 +7,9 @@ const { Model, attr, belongsTo, hasMany } = DS;
 export default Model.extend({
   displayName:         attr('string'),
   numberOfTraps:       attr('number'),
-  collectionStartDate: attr('string-null-to-empty'),
+  collectionStartDate: attr('ccdb-date'),
   collectionStartTime: attr('string-null-to-empty'),
-  collectionEndDate:   attr('string-null-to-empty'),
+  collectionEndDate:   attr('ccdb-date'),
   collectionEndTime:   attr('string-null-to-empty'),
   notes:               attr('string'),
 

app/templates/components/collection/create-container.hbs

@@ -79,19 +79,35 @@
             {{/validated-field}}
 
             {{#validated-field property='collectionStartDate' label='Collection start date' changeset=changeset}}
-              {{input value=changeset.collectionStartDate type='date' class='form-control'}}
+              {{
+                pikaday-input
+                onSelection=(action (mut changeset.collectionStartDate))
+                value=changeset.collectionStartDate
+                useUTC=true
+                placeholder='MM/DD/YYYY'
+                format='MM/DD/YYYY'
+                class='form-control'
+              }}
             {{/validated-field}}
 
             {{#validated-field property='collectionStartTime' label='Collection start time' changeset=changeset}}
-              {{input value=changeset.collectionStartTime type='time' class='form-control'}}
+              {{input value=changeset.collectionStartTime type='time' class='form-control' placeholder='HH:MM:SS (24 hour)'}}
             {{/validated-field}}
 
             {{#validated-field property='collectionEndDate' label='Collection end date' changeset=changeset}}
-              {{input value=changeset.collectionEndDate type='date' class='form-control'}}
+              {{
+                pikaday-input
+                onSelection=(action (mut changeset.collectionEndDate))
+                value=changeset.collectionEndDate
+                useUTC=true
+                placeholder='MM/DD/YYYY'
+                format='MM/DD/YYYY'
+                class='form-control'
+              }}
             {{/validated-field}}
 
             {{#validated-field property='collectionEndTime' label='Collection end time' changeset=changeset}}
-              {{input value=changeset.collectionEndTime type='time' class='form-control'}}
+              {{input value=changeset.collectionEndTime type='time' class='form-control' placeholder='HH:MM:SS (24 hour)'}}
             {{/validated-field}}
           {{/with}}
         {{/f.content}}

app/transforms/ccdb-date.js

@@ -0,0 +1,18 @@
+import DS from 'ember-data';
+
+export default DS.Transform.extend({
+  deserialize(serialized) {
+    return serialized || '';
+  },
+
+  serialize(date) {
+    if (date !== '') {
+      const day = date.getDate();
+      const month = date.getMonth() + 1;
+      const year = date.getFullYear();
+      return `${year}-${month}-${day}`;
+    } else {
+      return null;
+    }
+  }
+});