Add date format support

junjizhi · Jun 11, 2021 · 97541be · 97541be
1 parent cd8da97
commit 97541be
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ export default Vue.extend({
         :items="timelineItems"
         :reverse="true"
         :loading="true"
+        :date-format="'dd/MM/yy HH:mm:ss'"
       />
     </b-card>
   </div>
@@ -81,11 +82,11 @@ export default Vue.extend({
 
 ## Features
 - [x] Loading spinner
-- [ ] Support item head color variants
 - [x] Support `reverse` props
+- [x] Custom timestamp format
+- [ ] Support item head color variants
 - [ ] Support custom icons
 - [ ] Refactor timeline and item into separate components
-- [ ] Custom timestamp format
 
 ## Component Reference
 ### Properties

diff --git a/dev/serve.vue b/dev/serve.vue
@@ -18,19 +18,16 @@ export default Vue.extend({
         {
           timestamp: Date.parse('2021-05-29T20:20:46.444Z'),
           title: 'Dolore ullamco exercitation commodo',
-          content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.',
-          link: 'https://example1.com'
+          content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.'
         },
         {
           timestamp: Date.parse('2021-05-28T20:20:46.444Z'),
-          title: 'Voluptate pariatur dolore laborum eu',
-          link: '#'
+          title: 'Voluptate pariatur dolore laborum eu'
         },
         {
           timestamp: Date.parse('2021-01-28T20:20:46.444Z'),
           title: 'Mollit aliqua velit nostrud ipsum',
-          content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.',
-          link: '#'
+          content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.'
         }
       ]
     }
@@ -47,6 +44,7 @@ export default Vue.extend({
         :items="timelineItems"
         :reverse="false"
         :loading="true"
+        :date-format="'dd/MM/yy HH:mm:ss'"
       />
     </b-card>
   </div>

diff --git a/src/__tests__/bootstrap-vue-timeline.spec.js b/src/__tests__/bootstrap-vue-timeline.spec.js
@@ -46,7 +46,8 @@ describe('bootstrap vue timeline component', () => {
       propsData: {
         items: sampleItems,
         reverse: false,
-        loading: true
+        loading: true,
+        dateFormat: 'dd/MM/yy HH:mm:ss'
       }
     })
     const text = wrapper.text()

diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
@@ -13,7 +13,8 @@ export default /*#__PURE__*/{
   props: {
     items: Array,
     reverse: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    dateFormat: String,
   },
   methods: {
     orderedItems() {
@@ -39,7 +40,8 @@ export default /*#__PURE__*/{
       return formatDistanceToNow(timestamp, { addSuffix: true })
     },
     formatFull(timestamp) {
-      return format(timestamp, 'yyyy-MM-dd HH:mm:ss')
+      const dateFormat = this.dateFormat || 'yyyy-MM-dd HH:mm:ss'
+      return format(timestamp, dateFormat)
     },
     timestampElementId(item) {
       return item.timestamp + item.title + '-timestamp'