/**
 * @Description  獲取當(dāng)前月份的天數(shù)
 * @param { Array } 年月組成的數(shù)組，例如：[2022,7]
 * @return {Number}例如：2022年7月有31天 返回31
 **/
export function getCurrentMonthCount([year, month]) {
  // 當(dāng)我們實例化Date函數(shù)的時候，傳入第三個參數(shù)為0可以通過getDate獲取到當(dāng)前月份具體有多少天
  return new Date(year, month, 0).getDate();
}
/**
 * @Description  獲取當(dāng)前月份1號是星期二幾
 * @param { Array } 年月組成的數(shù)組，例如：[2022,7]
 * @return {Number}  例如2022-7-1是星期5，返回5
 **/
export function getFirstMonthDayWeek([year, month]) {
  return new Date(year, month - 1, 1).getDay();
}
/**
 * @Description  根據(jù)年月，組裝渲染天的表格數(shù)據(jù)
 * @param { Array } 年月組成的數(shù)組，例如：[2022,7]
 * @return {Array}
 **/
/* 
在這里介紹下我們時間組件寫法的思路：
1.對于時間組件的布局，可以先去參考iview element等開源組件庫的date-picker組件的布局，基本上都是一樣的
2.在清楚布局之后，我們需要根據(jù)用戶傳入的時間，生成一個6*7=42的天數(shù)的td單元格，在這42個單元格中，包含上月剩余的天數(shù)，當(dāng)前月份的全部天數(shù)，下月的開始天數(shù)
3.如果你清楚了步驟二，那么我們接下來就容易多了，我們要計算上月的天數(shù)，當(dāng)前月份的全部天數(shù)，下月的開始天數(shù)，以及當(dāng)前月份1號星期幾
4.由于頭部是星期日，星期一，星期二，星期三，星期四，星期五，星期六的布局，因此我們需要計算當(dāng)前月份1號星期幾，這樣我們就能找到上月的剩余天數(shù)了，下月的剩余天數(shù)就等于42-當(dāng)前月份天數(shù)-上月剩余天數(shù)
5.在上面步驟知道后我們就可以著手根據(jù)上面提供的工具函數(shù)，生成我們需要的表格數(shù)據(jù)了
最終生成的是6*7的二維數(shù)組，因為表格天數(shù)的布局為6*7的布局，數(shù)據(jù)格式如下：
數(shù)組的個數(shù)代表了渲染的列數(shù)，內(nèi)部每項數(shù)組代表每列的td個數(shù)
[
  [
    {
      //代表當(dāng)前的td幾號
       value: xxx,
       //上個月的號數(shù)和下個月的號數(shù)標(biāo)識下，渲染的時候，我們樣式另外布局
        disbled: true,
        //當(dāng)前td的時間格式，用于點擊了，給input顯示以及供用戶使用格式為2022-7-22
        date: xxx,
        // 當(dāng)前天的時間td，我們需要高亮顯示。添加標(biāo)識
        active：xxx,
        //當(dāng)前td的索引
        index: xxx,
    },
    {},
    {},
    {},
    {},
    {},
    {}
  ],
  [],
  [],
  [],
  [],
  [],
]
*/
export function genarateDayData([year, month]) {
  // 獲取上月天數(shù)
  let lastMonthCount = getCurrentMonthCount([year, month - 1]);
  // 獲取當(dāng)月天數(shù)
  let currentMonthCount = getCurrentMonthCount([year, month]);
  // 獲取當(dāng)月1號星期
  let currentMonthFirstDayWeek = getFirstMonthDayWeek([year, month]);
  let dayList = [];
  let lastMonthPointer = 1;
  let currentMonthPoiner = 1;
  let nextMonthPointer = 1;
  // 根據(jù)日期組件的天數(shù)布局，共計42天，包含上月剩余天數(shù)+當(dāng)月天數(shù)+下月初始天數(shù)
  for (let i = 0; i < 42; i++) {
    // 上個月需要渲染的td個數(shù)，以及對應(yīng)的值
    if (lastMonthPointer <= currentMonthFirstDayWeek) {
      // 上月
      dayList.unshift({
        value: lastMonthCount--,
        disbled: true,
        date: year + "-" + (month - 1) + "-" + (lastMonthCount + 1),
        index: i,
      });
      lastMonthPointer++;
    } else if (currentMonthPoiner <= currentMonthCount) {
      // 當(dāng)月
      dayList.push({
        value: currentMonthPoiner++,
        disbled: false,
        active:
          new Date().getFullYear() == year &&
          new Date().getMonth() + 1 == month &&
          currentMonthPoiner - 1 == new Date().getDate(),
        date: year + "-" + month + "-" + (currentMonthPoiner - 1),
        index: i,
      });
    } else {
      // 下月
      dayList.push({
        value: nextMonthPointer++,
        disbled: true,
        date: year + "-" + (month + 1) + "-" + (nextMonthPointer - 1),
        index: i,
      });
    }
  }
  // 當(dāng)前天數(shù)高亮
  // 最后將數(shù)據(jù)生成二維數(shù)組返回:對應(yīng)的就是6*7的二維數(shù)組用于渲染天數(shù)表格列
  let result = [];
  let index = 1;
  let i = 0;
  while (index <= 6) {
    let arr = [];
    for (let j = 0; j < 7; j++) {
      arr.push(dayList[i]);
      i++;
    }
    result.push(arr);
    index++;
  }
  return result;
}

//用于保存組建的常量，靜態(tài)數(shù)據(jù)，比如表頭的星期
export const weekList = ["日", "一", "二", "三", "四", "五", "六"];

<template>
  <div class="date-picker-wrap">
    <div class="date-eidtor">
      <!-- 顯示時間的input -->
      <input
        type="text"
        :placeholder="placeholder"
        class="date-edit-input"
        v-model="currentDate"
        @click.stop="showDatePannel = !showDatePannel"
      />
    </div>
    <!-- 面包通過過渡組件包裹，實現(xiàn)顯示隱藏友好過渡 -->
    <transition name="date-picker">
      <div class="date-pocker-panel" v-show="showDatePannel">
        <!-- 時間控件的頭部，用戶切換年月 -->
        <date-picker-head
          @dateRangeChange="dateRangeChange"
          :date="curDate"
        ></date-picker-head>
        <!-- 主要的時間顯示列表組件，用于顯示對應(yīng)月份的時間 -->
        <date-table :list="list" @dateChange="dateChange"></date-table>
      </div>
    </transition>
  </div>
</template>
<script>
import { genarateDayData } from "./utils";
import DatePickerHead from "./DatePickerHead.vue";
import DateTable from "./DateTable.vue";
export default {
  components: {
    DatePickerHead,
    DateTable,
  },
  props: {
    // 輸入框提示
    placeholder: {
      type: String,
      default: "選擇時間",
    },
    // 時間，為Date類型，默認(rèn)為當(dāng)前時間
    date: {
      type: Date,
      default() {
        return new Date();
      },
    },
  },
  data() {
    return {
      // 用于控制面包顯示與隱藏
      showDatePannel: false,
      // 表格數(shù)據(jù)
      list: [],
      // 處理props時間為數(shù)組格式[年，月]
      curDate: [this.date.getFullYear(), this.date.getMonth() + 1],
      // 用戶input顯示時間
      currentDate: "",
    };
  },
  mounted() {
    // 獲取當(dāng)前月份的時間數(shù)據(jù)
    this.getDateList();
    // 除開時間組件的其他地方點擊，關(guān)閉時間面板
    window.addEventListener("click", () => {
      this.showDatePannel = false;
    });
  },
  methods: {
    // 監(jiān)聽每個td時間項點擊
    dateChange(date) {
      this.$emit("dateChange", date);
      this.showDatePannel = false;
      this.currentDate = date;
    },
    // 頭部年月切換
    dateRangeChange(type) {
      switch (type) {
        // 上一年點擊
        case "lastYear":
          this.curDate = [this.curDate[0] - 1, this.curDate[1]];
          break;
        // 上一月點擊（月份<1,就要返回到上一年的12月份）
        case "lastMonth":
          this.curDate = [
            this.curDate[1] - 1 <= 0 ? this.curDate[0] - 1 : this.curDate[0],
            this.curDate[1] - 1 <= 0 ? 12 : this.curDate[1] - 1,
          ];
          break;
        // 下一年點擊
        case "nextYear":
          this.curDate = [this.curDate[0] + 1, this.curDate[1]];
          break;
        case "nextMonth":
          // 下一月點擊（月份>12,就要到下一年的一月份）
          this.curDate = [
            this.curDate[1] + 1 > 12 ? this.curDate[0] + 1 : this.curDate[0],
            this.curDate[1] + 1 > 12 ? 1 : this.curDate[1] + 1,
          ];
          break;
      }
      this.getDateList();
    },
    // 通過props傳遞的時間，組裝成長度為42的數(shù)組,具體看utils文件下下面的這個方法
    getDateList() {
      this.list = genarateDayData(this.curDate);
    },
  },
};
</script>
<style lang="less">
.date-picker-wrap {
  position: relative;
  .date-pocker-panel {
    position: absolute;
    left: 0;
    top: 50px;
    width: 324px;
    height: 343px;
    color: #606266;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    background: #fff;
    border-radius: 4px;
    line-height: 30px;
    padding: 12px;
    text-align: center;
  }
  .date-eidtor {
    width: 220px;
    .date-edit-input {
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  .date-picker-enter-active,
  .date-picker-leave-active {
    transition: all 0.25s ease;
  }
  .date-picker-enter,
  .date-picker-leave-to {
    opacity: 0;
    height: 0;
  }
}
</style>

<template>
  <!-- 頂部的時間切換組件 -->
  <div class="date-picker-head">
    <div class="arrow-left">
      <!-- 上一年點擊 -->
      <span class="last-year arrow" @click.stop="toogleDate('lastYear')"></span>
      <!-- 上一月點擊 -->
      <span class="last-month arrow" @click.stop="toogleDate('lastMonth')"></span>
    </div>
    <!-- 顯示當(dāng)前的年和月 -->
    <div class="date-content">{{ date[0] + "年" + date[1] + "月" }}</div>
    <div class="arrow-right">
      <!-- 下一月點擊 -->
      <span class="next-month arrow" @click.stop="toogleDate('nextMonth')"></span>
      <!-- 下一年點擊 -->
      <span class="next-year arrow" @click.stop="toogleDate('nextYear')"></span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 時間
    date: {
      type: Array,
      default() {
        return [new Date().getFullYear(), new Date().getMonth() + 1];
      },
    },
  },
  methods: {
    // 派發(fā)table事件處理邏輯，參數(shù)為當(dāng)前td的時間，格式為2022-7-22
    toogleDate(type) {
      this.$emit("dateRangeChange", type);
    },
  },
};
</script>
<style lang="less">
.date-picker-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  .last-year,
  .next-month {
    margin-right: 15px;
  }
  .arrow {
    cursor: pointer;
  }
}
</style>

<template>
  <div class="date-table">
    <!-- 時間表格 -->
    <table>
      <!-- 頂部的星期組件 -->
      <date-picker-week-bar></date-picker-week-bar>
      <!-- 下方的6*7的月份天數(shù)組件 -->
      <date-picker-day-content
        :list="list"
        @dateChange="dateChange"
      ></date-picker-day-content>
    </table>
  </div>
</template>
<script>
import DatePickerWeekBar from "./DatePickerWeekBar.vue";
import DatePickerDayContent from "./DatePickerDayContent.vue";
export default {
  props: {
    // 表格數(shù)據(jù)
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    DatePickerWeekBar,
    DatePickerDayContent,
  },
  methods: {
    // 派發(fā)td天數(shù)點擊事件，參數(shù)為當(dāng)前天數(shù)的時間格式為 2022-07-22
    dateChange(date) {
      this.$emit("dateChange", date);
    },
  },
};
</script>
<style lang="less">
.date-table {
  font-size: 12px;
}
</style>

<template>
  <thead class="date-picker-week-bar">
    <tr>
      <th v-for="item in weekList" :key="item">{{ item }}</th>
    </tr>
  </thead>
</template>
<script>
import { weekList } from "./constant.js";
export default {
  data() {
    return {
      weekList,
    };
  },
};
</script>
<style lang="less">
.date-picker-week-bar {
  th {
    width: 42px;
    height: 42px;
    color: #606266;
    font-weight: 400;
    border-bottom: 1px solid #ebeef5;
  }
}
</style>

<template>
  <tbody class="date-picker-day-content">
    <tr v-for="(item, index) in list" :key="index">
      <td
        v-for="(subItem, index) in item"
        :key="index"
        :class="[
          subItem.disbled ? 'disble-item' : 'day-item',
          subItem.active ? 'active' : '',
          subItem.index == currentDay ? 'active-click' : '',
        ]"
        @click="handleDayClick(subItem)"
      >
        {{ subItem.value }}
      </td>
    </tr>
  </tbody>
</template>
<script>
export default {
  props: {
  //表格數(shù)據(jù)
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
    //當(dāng)前點擊項活躍高亮
      currentDay: -1,
    };
  },
  methods: {
    // 處理天的表格點擊，觸發(fā)關(guān)閉時間控件面板，設(shè)置時間input的值
    handleDayClick(item) {
      if (item.currentDay == item.index) return;
      this.currentDay = item.index;
      this.$emit("dateChange", item.date);
    },
  },
};
</script>
<style lang="less">
.date-picker-day-content {
  td {
    width: 40px;
    height: 40px;
    color: #606266;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
  }
  .disble-item {
    cursor: not-allowed;
    color: #c0c4cc;
  }
  .day-item.active {
    color: #008c8c;
    font-weight: bold;
  }
  .day-item.active-click {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: #008c8c;
  }
}
</style>

import DatePicker from "./DatePicker.vue";
export { DatePicker };

<template>
  <div id="app">
    <div class="test-date-picker">
      <date-picker :date="date" @dateChange="dateChange"></date-picker>
    </div>
  </div>
</template>
<script>
import { DatePicker } from "./components/DatePicker/index";
export default {
  name: "App",
  components: {
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
};
</script>
<style lang="less">
html,
body,
#app {
  height: 100%;
  width: 100%;
}
#app {
  .test-date-picker {
    width: 50%;
    margin: 20px auto;
  }
}
</style>