MCPD date presentation control

src/ui/common/time/McpdDate.tsx

+import * as React from 'react';
+
+
+export default function McpdDate({ value, locale = 'en-GB' }: { value: string, locale?: string }) {
+
+    if (!value) {
+        return (<i>Date not provided</i>);
+    }
+
+    const year = value.substr(0, 4);
+    const month = value.substr(4, 2);
+    const day = value.substr(6, 2);
+    let mcpdDate;
+
+    if (!month || month === '--' || month === '00') {
+        mcpdDate = year;
+    } else {
+        if (!day || day === '--' || day === '00') {
+            const options = {year: 'numeric', month: 'long'};
+            mcpdDate = new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1).toLocaleDateString(locale, options);
+        } else {
+            const options = {year: 'numeric', month: 'long', day: 'numeric'};
+            mcpdDate = new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10)).toLocaleDateString(locale, options);
+        }
+    }
+    return (
+        <span className="prettydate">
+            { mcpdDate }
+        </span>
+    );
+}

src/ui/pages/accessions/DisplayPage.tsx

@@ -25,6 +25,7 @@ import ReduxCheckbox from 'ui/common/checkbox';
 import CropChips from 'ui/genesys/crop/CropChips';
 import LocationMap from 'ui/common/LocationMap';
 import {InstituteLink} from 'ui/genesys/Links';
+import McpdDate from 'ui/common/time/McpdDate';
 
 
 interface IBrowsePageProps extends React.ClassAttributes<any> {
@@ -121,7 +122,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     </PropertiesItem>
                     <PropertiesItem title="Country of holding institute">{ accession.institute.country.name }</PropertiesItem>
                     <PropertiesItem title="Institute code">{ accession.institute.code }</PropertiesItem>
-                    <PropertiesItem title="Acquisition date">{ accession.acquisitionDate }</PropertiesItem>
+                    <PropertiesItem title="Acquisition date"><McpdDate value={ accession.acquisitionDate } /></PropertiesItem>
 
                     <PropertiesItem title="Biological status of accession">{ accession.sampStat }</PropertiesItem>
                     <PropertiesItem title="Availability for distribution">{ t(`accession.available.${accession.available}`) }</PropertiesItem>
@@ -168,41 +169,44 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                   </Properties>
                 </PageSection>
 
-                <PageSection title="Collecting information">
-                  <Properties>
-                    { accession.countryOfOrigin && <PropertiesItem title="Country of origin">{ accession.countryOfOrigin.name }</PropertiesItem> }
-                    { accession.coll &&
-                      [ 'collDate', 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
-                        .filter((prop) => accession.coll[prop] !== null).map((prop) => (
-                        <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
-                      ))
-                    }
-                    { accession.coll &&
-                      [ 'collCode', 'collName' ]
-                        .filter((prop) => accession.coll[prop].length).map((prop) => (
-                        <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
-                      ))
-                    }
-                    { accession.geo &&
-                      [ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
-                        .filter((prop) => accession.geo[prop] !== null).map((prop) => (
-                        <PropertiesItem key={ prop } title={ t(`accession.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
-                      ))
-                    }
-                  </Properties>
+                { accession.coll &&
+                  <PageSection title="Collecting information">
+                    <Properties>
+                      { accession.countryOfOrigin && <PropertiesItem title="Country of origin">{ accession.countryOfOrigin.name }</PropertiesItem> }
+                      { accession.coll.collDate &&   <PropertiesItem key="collDate" title={ t(`accession.coll.collDate`) }><McpdDate value={ accession.coll.collDate } /></PropertiesItem> }
+                      { accession.coll &&
+                        [ 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
+                          .filter((prop) => accession.coll[prop] !== null).map((prop) => (
+                          <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
+                        ))
+                      }
+                      { accession.coll &&
+                        [ 'collCode', 'collName' ]
+                          .filter((prop) => accession.coll[prop].length).map((prop) => (
+                          <PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
+                        ))
+                      }
+                      { accession.geo &&
+                        [ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
+                          .filter((prop) => accession.geo[prop] !== null).map((prop) => (
+                          <PropertiesItem key={ prop } title={ t(`accession.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
+                        ))
+                      }
+                    </Properties>
 
-                  { hasLatLon &&
-                    <LocationMap
-                      location={
-                        {
-                          id: accession.geo.id,
-                          lat: accession.geo.latitude,
-                          lng: accession.geo.longitude,
+                    { hasLatLon &&
+                      <LocationMap
+                        location={
+                          {
+                            id: accession.geo.id,
+                            lat: accession.geo.latitude,
+                            lng: accession.geo.longitude,
+                          }
                         }
-                      }
-                    />
-                  }
-                </PageSection>
+                      />
+                    }
+                  </PageSection>
+                }
 
                 { accession.remarks && accession.remarks.length > 0 && <PageSection title="Remarks">
                   <Properties>