重新封装一个Element_Ul DatePicker 日期选择器

注：因Element_Ul  DatePicker里的日期选择器不能满足实际功能的开发，因此，利用vue,JS，CSS重新封装了一个日历，用做一个时间的展示，并用来给后端传递时间，这里包括年份的切换，月份的切换，仅供参考！

1、效果图

2、点击日历上的日期，打印对应的日期

 

 3、代码

<template>
  <div class="timeBox">
      <!-- 切换年月头部 -->
      <div class="timeHead">
        <i class="el-icon-caret-top" @click="previousYear"></i>
        <i class="el-icon-caret-bottom" @click="nextYear"></i>
        <el-select v-model="nowYear" size="mini">
          <el-option
              v-for="item in yearArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select><span>年</span>
        <el-input v-model="nowMonth" size="mini" readonly="readonly" class="monthInput"></el-input><span>月</span>
        <i class="el-icon-arrow-right" @click="nextMonth"></i>
        <i class="el-icon-arrow-left" @click="previousMonth"></i>
      </div>
      <!-- 显示周部分 -->
      <div class="weekBox">
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
      </div>
      <!-- 显示日期部分 -->
      <div class="dayBox">
        <ul>
          <li v-for="item in nowWeek" :key="item + '1'"></li>
         <li v-for="item in nowDays" :key="item + '2'" @click="getNowDataFun(item)" :class="{'colorData': (colorYear + '-' + colorMonth + '-' + nowDate == nowYear + '-' + nowMonth + '-' + item) ? true : false}">
            {{ item }}
          </li>
        </ul>
      </div>
    </div> 
</template>
 
<script>
export default {
  data() {
    return {
      monthDays: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月的天数
      yearArr: [], // 年份下拉框的数据
      nowYear: 2022, // 当前年份
      nowMonth: 8, // 当前月份
      nowDate: 24, // 当前日期
      nowWeek: 1, // 当月第一天对应的星期
      nowDays: 30, // 当月天数
      colorYear: 2022,  // 今天对应的年份
      colorMonth: 8, // 今天对应的月份
    }
  },
  watch: {
    // 监听年份变化
    nowYear () {
      this.getNowMonthData();
    },
    // 监听月份变化
    nowMonth () {
      this.getNowMonthData();
    }
  },
  mounted () {
    const timeObj = new Date();
    this.nowYear = timeObj.getFullYear();
    this.nowMonth = timeObj.getMonth() + 1;
    this.getYearArr();
    this.getColorData();
    this.getNowMonthData();
  },
  methods: {
    // 设定年份下拉框的数据
    getYearArr () {
      for (let i = 0; i < 5; i++) {
        let yearNum = ++this.nowYear;
        this.yearArr.push({value: yearNum, label: yearNum});
      }
      this.nowYear = new Date().getFullYear();
    },
    // 获取到今天的日期
    getColorData () {
      // 获取到今天对应的年份，如2022.08.24拿到的就是2022
      this.colorYear = new Date().getFullYear();
      // 获取到今天对应的月份，如2022.08.24拿到的就是7
      this.colorMonth = new Date().getMonth() + 1;
      // 获取到今天对应的日期，如2022.08.24拿到的就是24
      this.nowDate = new Date().getDate();
    },
    // 上一年
    previousYear () {
      if (this.nowYear > 0) {
        this.nowYear -= 1;
      }
    },
    // 下一年
    nextYear () {
      this.nowYear += 1;
    },
    // 上一月
    previousMonth () {
      if (this.nowMonth > 1) {
        this.nowMonth -= 1;
      }
    },
    // 下一月
    nextMonth () {
      if (this.nowMonth < 12) {
        this.nowMonth += 1;
      }
    },
    // 获取到当月的日历数据
    getNowMonthData () {
      // 当月天数
      this.nowDays = this.getNowDaysFun(Number(this.nowYear), Number(this.nowMonth));
      //console.log(this.nowDays);
      // 当月第一天对应的星期
      this.getNowWeekFun();
    },
    // 获取当月的天数
    getNowDaysFun (year, month) {
      if (month === 2) {
        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
      } else {
        return this.monthDays[month - 1];
      }
    },
    // 获取当月第一天对应的星期
    getNowWeekFun () {
      this.nowWeek = new Date(this.nowYear + '-' + this.nowMonth).getDay();
      //console.log(this.nowWeek);
    },
    // 获取到当前鼠标点击的日期
    getNowDataFun (data) {
      let nowData = this.nowYear + '-' + this.nowMonth + '-' + data;
      console.log(nowData);
      // 要传递日期的接口
      // 这部分省略
    }
  }
}
</script>

<style lang="less" scoped>
.timeBox {
  width: 344px;
  height: 280px;
  background-color: #fdfdfd;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
  // 头部
  .timeHead {
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
    background-color: #fdfdfd;
    position: relative;
    // 三角图标
    .el-icon-caret-top, .el-icon-caret-bottom {
      font-size: 16px;
      color: #555555;
    }
    .el-icon-caret-top {
      position: absolute;
      left: 15px;
      top: 3px;
      cursor:pointer;
    }
    .el-icon-caret-top:hover {
      color: #009dd9;
    }
    .el-icon-caret-bottom {
      position: absolute;
      left: 15px;
      top: 10px;
      cursor:pointer;
    }
    .el-icon-caret-bottom:hover {
      color: #009dd9;
    }
    // 消除下拉框自带的图标
    /deep/.el-icon-arrow-up:before {
      display: none;
    }
    .el-select {
      margin: 6px 2px 0 30px;
      width: 30px;
    }
    .el-input {
      width: 14px;
    }
    /deep/.el-input__inner {
      width: 30px;
      height: 20px;
      padding: 0;
      text-align: center;
      border-radius: 0;
      border: none;
      background-color: #fdfdfd;
      color: #6e6e6e;
    }
    .monthInput {
      width: 14px;
      /deep/.el-input__inner {
        width: 14px !important;
      }
    }
    span {
      font-size: 12px;
      color: #6e6e6e;
    }
    // 左箭头
    .el-icon-arrow-left {
      font-size: 14px;
      float: right;
      margin-top: 7px;
      margin-right: 10px;
      font-weight: 1000;
      cursor:pointer;
    }
    .el-icon-arrow-left:hover {
      color: #009dd9;
    }
    // 右箭头
    .el-icon-arrow-right {
      font-size: 14px;
      float: right;
      margin-top: 7px;
      margin-right: 15px;
      font-weight: 1000;
      cursor:pointer;
    }
    .el-icon-arrow-right:hover {
      color: #009dd9;
    }
  }
  // 周
  .weekBox {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #fdfdfd;
    li {
      width: 14.2%;
      font-size: 12px;
      color: #6e6e6e;
      float: left;
      text-align: center;
    }
  }
  // 天
  .dayBox {
    width: 100%;
    height: 100%;
    background-color: #fdfdfd;
    li {
      width: 14.2%;
      height: 40px;
      line-height: 40px;
      color: #333333;
      font-size: 12px;
      float: left;
      text-align: center;
    }
    li:hover {
      color: #009dd9;
      cursor:pointer;
    }
    // 设定今天日期显示的样式
    .colorData {
      color: #fff;
      background-color: #009dd9;
      border-radius: 50%;
    }
    .colorData:hover {
      color: #fff;
    }
  }
}
</style>