單選聯動填充日期選擇器，轉換爲數組形式的方法進行日期拼接

1、效果圖

開始日期爲當天，結束日期可根據單選進行填充

---

選中本週

---

選中近三月

---

2、

<div>
   <RadioGroup v-model="period" v-on:on-change="Aperiod">
    <Radio label="本週"></Radio>
    <Radio label="本月"></Radio>
    <Radio label="近三月"></Radio>
  </RadioGroup>
 </div>
 <div>
   <span>開始日期</span><Date-picker type="date" placeholder="Start date" v-model="today">
   </Date-picker>
   <span>結束日期</span> <Date-picker type="date" placeholder="End date" v-model="end">
   </Date-picker>
 </div>

---

3、js部分

const d = new Date(); // 建立新的日期對象
const today = d.toLocaleDateString();// 獲取今天日期如：2020/7/26
const day = today.split('/');// 將今天日期轉換爲數組，以/來進行分割，day[0]爲年份，day[1]爲月份，day[2]爲日
export default {
data() {

return {
  period: '本月', // 定義默認選項
  today: '',
  end: '',
};

},
created() {

this.today = d.toLocaleDateString();// 在頁面被建立時，給today賦值

},
methods: {

Aperiod() { // 在選項狀態發生改變時觸發
  switch (this.period) {
    case '本週':
      this.ThisWeek();
      break;
    case '本月':
      this.ThisMonth();
      break;
    case '近三月':
      this.RecentThreeMonth();
      break;
    default:
      break;
  }
},
ThisWeek() {
  switch (d.getDay()) { // 獲取今天的星期名如：2020/7/26，返回0，即星期天
    case 0:
      this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 5}`; // 星期天，本週工做日日數+5
      break;
    case 1:
      this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 4}`; // 星期一，本週工做日日數+4
      break;
    case 2:
      this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 3}`; // 星期二，本週工做日日數+3
      break;
    case 3:
      this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 2}`; // 星期三，本週工做日日數+2
      break;
    case 4:
      this.end = `${day[0]}-${day[1]}-${Number(day[2]) + 1}`; // 星期四，本週工做日日數+1
      break;
    case 5:
    // eslint-disable-next-line no-alert
      alert('今天是本週工做日的最後一天喔~'); // 星期五，提示
      break;
    default:
      break;
  }
},
ThisMonth() {
  const month = new Date(day[0], day[1], 0).getDate(); // 獲取當月的天數
  this.end = `${day[0]}-${day[1]}-${month}`;
},
RecentThreeMonth() {
  if (day[1] <= 9) { // 若是月份小於等於9
    this.end = `${day[0]}-${Number(day[1]) + 3}-${day[2]}`; // 月份直接+3
  } else {
    this.end = `${day[0]}-${Number(day[1]) + 3 - 12}-${day[2]}`; // 月份先+3，再減12
  }
},

},
};