ask for date, populate dateCreated from it

client/src/components/atoms/Form/Input.module.scss

@@ -1,4 +1,5 @@
 @import '../../../styles/variables';
+@import './InputDate.module.scss';
 
 .inputWrap {
     background: $brand-gradient;
@@ -165,74 +166,6 @@
     align-items: center;
 }
 
-//
-// Date picker
-//
-:global .react-datepicker {
-    font-family: inherit;
-    color: inherit;
-    border-color: $brand-black;
-}
-
-:global .react-datepicker__header {
-    background: $brand-black;
-    border-radius: 0;
-
-    .react-datepicker__day-name,
-    .react-datepicker__day,
-    .react-datepicker__time-name,
-    .react-datepicker__current-month,
-    .react-datepicker-time__header,
-    .react-datepicker-year-header {
-        color: $brand-white;
-    }
-}
-
-:global .react-datepicker__current-month,
-:global .react-datepicker-time__header,
-:global .react-datepicker-year-header,
-:global .react-datepicker__day-name {
-    font-weight: $font-weight-bold;
-}
-
-:global .react-datepicker__month-container {
-    float: none;
-}
-
-:global .react-datepicker-popper {
-    max-width: 16rem;
-}
-
-:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
-:global .react-datepicker__year-read-view--down-arrow:before,
-:global .react-datepicker__month-read-view--down-arrow:before,
-:global .react-datepicker__month-year-read-view--down-arrow:before {
-    border-top-color: $brand-black;
-}
-
-:global .react-datepicker__day--selected,
-:global .react-datepicker__day--in-selecting-range,
-:global .react-datepicker__day--in-range,
-:global .react-datepicker__month-text--selected,
-:global .react-datepicker__month-text--in-selecting-range,
-:global .react-datepicker__month-text--in-range {
-    background-color: $brand-black;
-    border-radius: 50%;
-    font-weight: $font-weight-bold;
-}
-
-:global .react-datepicker__day:hover,
-:global .react-datepicker__month-text:hover {
-    background-color: $brand-pink;
-    border-radius: 50%;
-    font-weight: $font-weight-bold;
-    color: $brand-white;
-}
-
-:global .react-datepicker__day--outside-month {
-    color: $brand-grey-light;
-}
-
 // Size modifiers
 
 .inputSmall {

client/src/components/atoms/Form/InputDate.module.scss

@@ -0,0 +1,69 @@
+@import '../../../styles/variables';
+
+//
+// Date picker
+//
+:global .react-datepicker {
+    font-family: inherit;
+    color: inherit;
+    border-color: $brand-black;
+}
+
+:global .react-datepicker__header {
+    background: $brand-black;
+    border-radius: 0;
+
+    .react-datepicker__day-name,
+    .react-datepicker__day,
+    .react-datepicker__time-name,
+    .react-datepicker__current-month,
+    .react-datepicker-time__header,
+    .react-datepicker-year-header {
+        color: $brand-white;
+    }
+}
+
+:global .react-datepicker__current-month,
+:global .react-datepicker-time__header,
+:global .react-datepicker-year-header,
+:global .react-datepicker__day-name {
+    font-weight: $font-weight-bold;
+}
+
+:global .react-datepicker__month-container {
+    float: none;
+}
+
+:global .react-datepicker-popper {
+    max-width: 16rem;
+}
+
+:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
+:global .react-datepicker__year-read-view--down-arrow:before,
+:global .react-datepicker__month-read-view--down-arrow:before,
+:global .react-datepicker__month-year-read-view--down-arrow:before {
+    border-top-color: $brand-black;
+}
+
+:global .react-datepicker__day--selected,
+:global .react-datepicker__day--in-selecting-range,
+:global .react-datepicker__day--in-range,
+:global .react-datepicker__month-text--selected,
+:global .react-datepicker__month-text--in-selecting-range,
+:global .react-datepicker__month-text--in-range {
+    background-color: $brand-black;
+    border-radius: 50%;
+    font-weight: $font-weight-bold;
+}
+
+:global .react-datepicker__day:hover,
+:global .react-datepicker__month-text:hover {
+    background-color: $brand-pink;
+    border-radius: 50%;
+    font-weight: $font-weight-bold;
+    color: $brand-white;
+}
+
+:global .react-datepicker__day--outside-month {
+    color: $brand-grey-light;
+}

client/src/data/form-publish.json

@@ -70,6 +70,12 @@
             "Communication & Journalism",
             "Other"
           ]
+        },
+        "dateCreated": {
+          "label": "Creation Date",
+          "description": "Select the date the asset was created, or was updated for the last time.",
+          "type": "date",
+          "required": true
         }
       }
     },

client/src/routes/Publish/index.tsx

@@ -13,7 +13,7 @@ type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
 interface PublishState {
     name?: string
-    dateCreated?: Date
+    dateCreated?: string
     description?: string
     files?: string[]
     price?: number
@@ -35,7 +35,7 @@ class Publish extends Component<{}, PublishState> {
     public state = {
         currentStep: 1,
         name: '',
-        dateCreated: new Date(),
+        dateCreated: '',
         description: '',
         files: [],
         price: 0,
@@ -50,7 +50,12 @@ class Publish extends Component<{}, PublishState> {
         publishingError: '',
         validationStatus: {
             1: { name: false, files: false, allFieldsValid: false },
-            2: { description: false, categories: false, allFieldsValid: false },
+            2: {
+                description: false,
+                categories: false,
+                dateCreated: false,
+                allFieldsValid: false
+            },
             3: {
                 author: false,
                 copyrightHolder: false,
@@ -102,7 +107,7 @@ class Publish extends Component<{}, PublishState> {
     private toStart = () => {
         this.setState({
             name: '',
-            dateCreated: new Date(),
+            dateCreated: '',
             description: '',
             files: [],
             price: 0,
@@ -184,7 +189,11 @@ class Publish extends Component<{}, PublishState> {
         //
         // Step 2
         //
-        if (validationStatus[2].description && validationStatus[2].categories) {
+        if (
+            validationStatus[2].description &&
+            validationStatus[2].categories &&
+            validationStatus[2].dateCreated
+        ) {
             this.setState(prevState => ({
                 validationStatus: {
                     ...prevState.validationStatus,
@@ -250,7 +259,7 @@ class Publish extends Component<{}, PublishState> {
             base: Object.assign(AssetModel.base, {
                 name: this.state.name,
                 description: this.state.description,
-                dateCreated: new Date().toString(),
+                dateCreated: new Date(this.state.dateCreated).toString(),
                 author: this.state.author,
                 license: this.state.license,
                 copyrightHolder: this.state.copyrightHolder,