vue自定义日期选择卡片

 这是效果

 思路是先获取当前日期数据再向后获取6天数据组成7天时间数组，废话不多说直接上代码

<template>
  <div class="app-container ">
    <div class="white">
      <el-row style="height: 100%">
        <el-col :span="19" class="padding" style="padding-left: 0px">
          <div class="timeBody">
            <div class="today" @click="todayClick">回到今日</div>
            <div class="timeSelect">
              <i class="Icon el-icon-d-arrow-left" @click="leftButton"></i>
              <div v-for="(item,index) in timeSelectArr" :key="index" class="timeCard" @click="activeFun(item)">
                <div class="leftTitle " :class="activeTime==item.time?'red':''">
                  <div>{{item.time}}</div>
                  <div>{{item.nlTime}}</div>
                </div>
              </div>
              <i class="Icon el-icon-d-arrow-right" @click="rightButton"></i>
            </div>

          </div>
        </el-col>
        
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        timeSelectArr: [],
        activeTime: null
      }
    },
    mounted() {
      this.todayClick()
    },
    methods: {
      // 获取当前日期以后6天的日期信息并组装数组 加一起为7天
      getSevenDayTime(date, bool) {
        for (let i = 1; i < 7; i++) {
          let futureDate = bool ? new Date(date + i * 24 * 60 * 60 * 1000) : new Date(date.getTime() + i * 24 * 60 * 60 * 1000)
          let futureNlDate = bool ? new Date(date + i * 24 * 60 * 60 * 1000).toLocaleString('zh-Hans-u-ca-chinese') : new Date(date.getTime() + i * 24 * 60 * 60 * 1000).toLocaleString('zh-Hans-u-ca-chinese')
          let parse = []
          parse = this.parseTime(futureDate).split(" ")
          this.timeSelectArr.push({
            time: parse[0],
            timeDate: futureDate,
            nlTime: futureNlDate.split(" ")[0].split('年')[1]
          })
        }
      },
      // 日期选择
      activeFun(item) {
        this.activeTime = item.time
      },
      // 左侧按钮 将原时间数据内的第一条数据当作新数组的最后一条数据
      leftButton() {
        let today = this.timeSelectArr[0].timeDate
        let date = new Date(today - 7 * 24 * 60 * 60 * 1000)
        let parse = []
        let dateNl = new Date(today - 7 * 24 * 60 * 60 * 1000).toLocaleString('zh-Hans-u-ca-chinese')// 获取农历数据
        parse = this.parseTime(date).split(" ")
        this.timeSelectArr = []
        this.timeSelectArr.push({
          time: parse[0],
          timeDate: date,
          nlTime: dateNl.split(" ")[0].split('年')[1]
        })
        this.activeTime = parse[0]
        this.getSevenDayTime(date)
      },
      // 右侧按钮 将原时间数据内的最后一条数据当作新数组的第一条数据
      rightButton() {
        let today = this.timeSelectArr[6].timeDate
        let date = new Date(today)
        let parse = []
        let dateNl = new Date(today).toLocaleString('zh-Hans-u-ca-chinese')// 获取农历数据
        parse = this.parseTime(date).split(" ")
        this.timeSelectArr = []
        this.timeSelectArr.push({
          time: parse[0],
          timeDate: date,
          nlTime: dateNl.split(" ")[0].split('年')[1]
        })
        this.activeTime = parse[0]
        this.getSevenDayTime(date)
      },
      // 以当前日期为时间数组的第一天
      todayClick(){
        this.timeSelectArr = []
        let date = new Date()
        let dateNl = new Date().toLocaleString('zh-Hans-u-ca-chinese')// 获取农历数据
        let parse = []
        parse = this.parseTime(date).split(" ")
        this.timeSelectArr.push({
          time: parse[0],
          timeDate: date,
          nlTime: dateNl.split(" ")[0].split('年')[1]
        })
        this.activeTime = parse[0]
        this.getSevenDayTime(date, false)
      }
    }
  }
</script>

<style scoped lang="scss">
  .white {
    background: white;
    height: 100%;
    padding: 20px;
  }

  .padding {
    padding: 0 20px;
    height: 100%;
  }

  .red {
    color: #ec9d9b;
  }

  .timeBody {
    height: 120px;
    display: flex;

    .Icon {
      margin-top: 45px;
      color: #f29d6b;
    }
    

    .today {
      width: 3%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: center;
    }

    .timeSelect {
      width: 97%;
      padding: 0 15px;
      height: 100%;
      display: flex;

      .timeCard {
        width: 19%;
        height: 100%;
        border: 2px solid #f0f0f0;
        margin-left: 1%;
        display: flex;

        .leftTitle {
          width: 65%;
          border-right: 2px solid #f0f0f0;
          height: 100%;

          div {
            height: 50%;
            text-align: center;
            line-height: 60px;
          }
        }
      }
    }
  }
</style>

 日期格式化函数

// 日期格式化
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}