ใน Vue.js คุณสามารถจัดรูปแบบวันที่และเวลาโดยใช้ JavaScript และไลบรารีอื่นๆ ได้อย่างหลากหลายวิธี นี่คือวิธีการจัดรูปแบบวันที่และเวลาใน Vue.js:
ใช้ Moment.js (หากคุณต้องการไลบรารีที่มีความสามารถในการจัดรูปแบบวันที่และเวลาอย่างหลากหลาย):
- ติดตั้ง Moment.js โดยใช้ npm หรือ yarn:
1
npm install moment --save
- ในคอมโพเนนต์ Vue.js ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<template>
<div>
<p>{{ formattedDate }}</p>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
date: new Date() // วันที่และเวลาปัจจุบัน
};
},
computed: {
formattedDate() {
return moment(this.date).format('YYYY-MM-DD HH:mm:ss');
}
}
};
</script>ใช้ JavaScript Date Object (หากคุณไม่ต้องการใช้ไลบรารีเสริม):
- ในคอมโพเนนต์ Vue.js ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<template>
<div>
<p>{{ formattedDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
date: new Date() // วันที่และเวลาปัจจุบัน
};
},
computed: {
formattedDate() {
const year = this.date.getFullYear();
const month = String(this.date.getMonth() + 1).padStart(2, '0');
const day = String(this.date.getDate()).padStart(2, '0');
const hours = String(this.date.getHours()).padStart(2, '0');
const minutes = String(this.date.getMinutes()).padStart(2, '0');
const seconds = String(this.date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
};
</script>ใช้ Vue Filters (Vue.js 2.x):
- ในคอมโพเนนต์ Vue.js ของคุณ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<template>
<div>
<p>{{ date | formatDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
date: new Date() // วันที่และเวลาปัจจุบัน
};
},
filters: {
formatDate(value) {
const year = value.getFullYear();
const month = String(value.getMonth() + 1).padStart(2, '0');
const day = String(value.getDate()).padStart(2, '0');
const hours = String(value.getHours()).padStart(2, '0');
const minutes = String(value.getMinutes()).padStart(2, '0');
const seconds = String(value.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
};
</script>
ในทุกกรณี, คุณสามารถปรับแต่งรูปแบบของวันที่และเวลาตามความต้องการของคุณโดยใช้ฟอแมตเตอร์ใน Moment.js หรือฟอแมตเตอร์ใน JavaScript Date Object และ Vue Filters ตามที่คุณต้องการให้วันที่และเวลาแสดงผล.