Vue日期詳解

一、日期選擇

Vue中日期選擇可以使用一些成熟的第三方插件，如Element UI和Vuetify，也可以使用原生的HTML input標籤加上date類型，但比較繁瑣。下面是使用Element UI的例子：

<el-date-picker v-model="date" type="date"></el-date-picker>

首先引入Element UI的庫文件，然後使用el-date-picker組件即可實現日期選擇。屬性v-model用於雙向綁定數據，type為date表示日期選擇類型。

在computed屬性中可以將日期格式化：

computed: {
  formattedDate() {
    return moment(this.date).format("YYYY-MM-DD");
  }
}

如果沒有使用第三方插件，使用原生HTML的input標籤，代碼如下：

<input type="date" v-model="date">

需要注意，在Safari瀏覽器上，日期選擇器的格式為YYYY-MM-DD。

二、格式化日期

使用moment.js可以方便地格式化日期，將日期轉化為指定格式的字元串：

import moment from "moment";

// 將日期格式化為YYYY-MM-DD
let formattedDate = moment(date).format("YYYY-MM-DD");

還可以使用filters將格式化日期的操作封裝起來：

filters: {
  formatDate(value) {
    if (!value) return "";
    return moment(value).format("YYYY-MM-DD");
  }
}

// 在模板中使用
<p>{{ date | formatDate }}</p>

三、展示一段時間內的日期

展示一段時間內的日期可以使用一個循環，根據循環變數計算每個日期的值：

<template>
  <div>
    <div v-for="i in numberOfDays">
      {{ moment(startDate).add(i, 'day').format('YYYY-MM-DD') }}
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      startDate: "2022-02-01",
      numberOfDays: 7
    };
  },
  computed: {
    endDate() {
      return moment(this.startDate).add(this.numberOfDays - 1, "day");
    }
  }
};
</script>

以上代碼中，使用循環變數i計算每一天的日期，通過moment.js的add方法可以方便地增加日期。endDate通過計算獲得，是循環中最後一個日期。

四、計算時間差

使用moment.js可以方便地計算時間差：

let start = moment("2022-02-01");
let end = moment("2022-02-07");

// 計算時間差
let duration = moment.duration(end.diff(start));
let days = duration.asDays(); // 6

以上代碼計算了從2022-02-01到2022-02-07的時間差，以天為單位。duration.asDays()方法可以獲得天數。

五、日期驗證

在驗證日期格式時，可以使用正則表達式：

let regExp = /^\d{4}-\d{2}-\d{2}$/;

if (regExp.test(date)) {
  console.log("日期格式正確");
} else {
  console.log("日期格式錯誤");
}

以上代碼使用了正則表達式驗證日期格式是否為YYYY-MM-DD。如果需要驗證日期是否合法，可以使用moment.js的isValid方法：

let date = moment("2022-02-29");

if (date.isValid()) {
  console.log("日期合法");
} else {
  console.log("日期不合法");
}

以上代碼使用了moment.js的isValid方法判斷日期是否合法，例如對於2022-02-29這個日期，就是不合法的。