date format ใน vue js

ใน Vue.js คุณสามารถจัดรูปแบบวันที่และเวลาโดยใช้ JavaScript และไลบรารีอื่นๆ ได้อย่างหลากหลายวิธี นี่คือวิธีการจัดรูปแบบวันที่และเวลาใน Vue.js:

  1. ใช้ 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>
  2. ใช้ 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>
  3. ใช้ 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 ตามที่คุณต้องการให้วันที่และเวลาแสดงผล.