diff --git a/js/components/local_datetime.js b/js/components/local_datetime.js
new file mode 100644
index 00000000..94a338dc
--- /dev/null
+++ b/js/components/local_datetime.js
@@ -0,0 +1,21 @@
+import { format } from 'date-fns'
+
+export default {
+  name: 'local-datetime',
+
+  props: {
+    timestamp: String,
+    format: {
+      type: String,
+      default: 'MMM D YYYY H:mm'
+    }
+  },
+
+  computed: {
+    displayTime: function () {
+      return format(this.timestamp, this.format)
+    }
+  },
+
+  template: '<time v-bind:datetime="timestamp">{{ this.displayTime }}</time>'
+}
diff --git a/js/index.js b/js/index.js
index c6a4181c..0cb08b60 100644
--- a/js/index.js
+++ b/js/index.js
@@ -17,6 +17,7 @@ import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
 import CcpoApproval from './components/forms/ccpo_approval'
+import LocalDatetime from './components/local_datetime'
 
 Vue.use(VTooltip)
 
@@ -35,7 +36,8 @@ const app = new Vue({
     NewProject,
     selector,
     BudgetChart,
-    CcpoApproval
+    CcpoApproval,
+    LocalDatetime
   },
   mounted: function() {
     const modalOpen = document.querySelector("#modalOpen")