Skip to content

Commit 97541be

Browse files
committed
Add date format support
1 parent cd8da97 commit 97541be

File tree

4 files changed

+13
-11
lines changed

4 files changed

+13
-11
lines changed

README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export default Vue.extend({
7373
:items="timelineItems"
7474
:reverse="true"
7575
:loading="true"
76+
:date-format="'dd/MM/yy HH:mm:ss'"
7677
/>
7778
</b-card>
7879
</div>
@@ -81,11 +82,11 @@ export default Vue.extend({
8182

8283
## Features
8384
- [x] Loading spinner
84-
- [ ] Support item head color variants
8585
- [x] Support `reverse` props
86+
- [x] Custom timestamp format
87+
- [ ] Support item head color variants
8688
- [ ] Support custom icons
8789
- [ ] Refactor timeline and item into separate components
88-
- [ ] Custom timestamp format
8990

9091
## Component Reference
9192
### Properties

dev/serve.vue

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,16 @@ export default Vue.extend({
1818
{
1919
timestamp: Date.parse('2021-05-29T20:20:46.444Z'),
2020
title: 'Dolore ullamco exercitation commodo',
21-
content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.',
22-
link: 'https://example1.com'
21+
content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.'
2322
},
2423
{
2524
timestamp: Date.parse('2021-05-28T20:20:46.444Z'),
26-
title: 'Voluptate pariatur dolore laborum eu',
27-
link: '#'
25+
title: 'Voluptate pariatur dolore laborum eu'
2826
},
2927
{
3028
timestamp: Date.parse('2021-01-28T20:20:46.444Z'),
3129
title: 'Mollit aliqua velit nostrud ipsum',
32-
content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.',
33-
link: '#'
30+
content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.'
3431
}
3532
]
3633
}
@@ -47,6 +44,7 @@ export default Vue.extend({
4744
:items="timelineItems"
4845
:reverse="false"
4946
:loading="true"
47+
:date-format="'dd/MM/yy HH:mm:ss'"
5048
/>
5149
</b-card>
5250
</div>

src/__tests__/bootstrap-vue-timeline.spec.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ describe('bootstrap vue timeline component', () => {
4646
propsData: {
4747
items: sampleItems,
4848
reverse: false,
49-
loading: true
49+
loading: true,
50+
dateFormat: 'dd/MM/yy HH:mm:ss'
5051
}
5152
})
5253
const text = wrapper.text()

src/bootstrap-vue-timeline.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export default /*#__PURE__*/{
1313
props: {
1414
items: Array,
1515
reverse: Boolean,
16-
loading: Boolean
16+
loading: Boolean,
17+
dateFormat: String,
1718
},
1819
methods: {
1920
orderedItems() {
@@ -39,7 +40,8 @@ export default /*#__PURE__*/{
3940
return formatDistanceToNow(timestamp, { addSuffix: true })
4041
},
4142
formatFull(timestamp) {
42-
return format(timestamp, 'yyyy-MM-dd HH:mm:ss')
43+
const dateFormat = this.dateFormat || 'yyyy-MM-dd HH:mm:ss'
44+
return format(timestamp, dateFormat)
4345
},
4446
timestampElementId(item) {
4547
return item.timestamp + item.title + '-timestamp'

0 commit comments

Comments
 (0)