Format date and time the Right Way (™️)

src/routes/WatchHistory.vue

@@ -15,7 +15,7 @@
                 Watched {{ doc.timeAgo }}
               </span>
             </template>
-            <span>{{ doc.timestamp.toString() }}</span>
+            <span>{{ doc.formattedDate }}</span>
           </v-tooltip><br />
         </VideoItem>
       </v-col>
@@ -57,6 +57,7 @@ export default {
     async loadData () {
       this.data = (await getWatchedVideos()).map(doc => {
         doc.timeAgo = LibPiped.timeAgo(doc.timestamp)
+        doc.formattedDate = LibPiped.formatFullDate(doc.timestamp)
         return doc
       })
       this.loaded = true

src/tools/libpiped.js

@@ -7,6 +7,11 @@ TimeAgo.addDefaultLocale(en)
 const timeAgo = new TimeAgo('en-US')
 
 class LibPiped {
+  intlDTF = new Intl.DateTimeFormat([], {
+    dateStyle: 'full',
+    timeStyle: 'full'
+  })
+
   timeFormat (duration) {
     const pad = function (num, size) {
       return ('000' + num).slice(size * -1)
@@ -26,6 +31,10 @@ class LibPiped {
     return str
   }
 
+  formatFullDate (date) {
+    return this.intlDTF.format(date)
+  }
+
   numberFormat (num) {
     const digits = 2
     const si = [