vue实现周日历切换效果

2022-04-19 11:37:32 来源：易采站长站作者：
本文实例为大家分享了vue实现周日历切换效果的具体代码，供大家参考，具体内容如下
废话不多说，直接上干货，需要的朋友自取
vue实现周日历切换效果
代码：
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>周日历</title>  <!-- 引入组件样式 -->  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" ></head><body>  <div id="app">    <!-- 上面的日历 -->    <div class="calendar">      <div class="arrow">        <i class="el-icon-arrow-left" @click="arrow('left')"></i>        <i class="el-icon-arrow-right" @click="arrow('right')"></i>      </div>      <el-calendar v-model="value" :range="dateRange"></el-calendar>    </div>    <!-- 下面的日历 -->    <div class="date">      <div class="arrow0">        <i class="el-icon-arrow-left" @clMLbJcMKAyick="weekPre"></i>        <i class="el-icon-arrow-right" @click="weekNext"></i>      </div>      <!-- 年份 月份 -->      <div class="month">        <p>{{ currentYear }}年{{ currentMonth }}月</p>      </div>      <!-- 星期 -->      <ul class="weekdays">        <li>一</li>        <li>二</li>        <li>三</li>        <li>四</li>        <li>五</li>        <li>六</li>        <li>日</li>      </ul>      <!-- 日期 -->      <ul class="days">        <li @click="pick(day)" v-for="(day, index) in days" :key="index">          <!--本月-->          <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>          <span v-else>          <!--今天-->            <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>            <span v-else>{{ day.getDate() }}</span>          </span>        </li>      </ul>    </div>  </div></body><!-- 引入vue --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>  new Vue({  el: '#app',  data: function() {      return {        // 上        value: "",        endDate: "",        dateRange: [],        dateNum: 0,        // 下        currentYear: "",  // 年份        currentMonth: "", // 月份        currentDay: "",  // 日期        currentWeek: "",  // 星期        days: [],      }    },  mounted () {    },  created () {    // 上面的日历    this.dateList(this.dateNum);    console.log(this.dateRange);    // 下面的日历    this.initData();  },  methods: {    // 上面的日历    // 获取当前时间的周一    getMonday(date) {      var day = date.getDay();      var deltaDay;      if (day == 0) {        deltaDay = 6;      } else {        deltaDay = day - 1;      }      var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);      monday.setHours(0);      monday.setMinutes(0);      monday.setSeconds(0);      return monday; //返回选定时间的周一的0时0分0秒    },    getDateNew(time) {      console.log(time);      let times = new Date(time);      let year = times.getFullYear();      let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;      let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;      return year + "-" + month + "-" + day;    },    dateList(delta) {      //将时间对象转换为时间戳并加几天后转换为时间对象      var DateNews = this.getMonday(        new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)      );      let startDate = this.getDateNew(DateNews, delta);      this.endDate = this.getDateNew(        new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)      );      this.dateRange = [startDate, this.endDate];    },    arrow(arrow) {      if (arrow == "left") {        this.dateNum--;        this.dateList(this.dateNum);      } else if (arrow == "right") {        this.dateNum++;        this.dateList(this.dateNum);      }    },    // 下面的日历    formatDate (year, month, day) {      const y = year      let m = month      if (m < 10) m = `0${m}`      let d = day      if (d < 10) d = `0${d}`      return `${y}-${m}-${d}`    },    initData (cur) {      let date = ''      if (cur) {        date = new Date(cur)      } else {        date = new Date()      }      this.currentDay = date.getDate()     // 今日日期 几号      this.currentYear = date.getFullYear()    // 当前年份      this.currentMonth = date.getMonth() + 1  // 当前月份      this.currentWeek = date.getDay() // 1...6,0  // 星期几      if (this.currentWeek === 0) {        this.currentWeek = 7      }      const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日      this.days.length = 0      // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek      /* eslint-disabled */      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {        const d = new Date(str)        d.setDate(d.getDate() - i)        // console.log(y:" + d.getDate())        this.days.push(d)      }      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {        const d = new Date(str)        d.setDate(d.getDate() + i)        this.days.push(d)      }    },    // 上个星期    weekPre () {      const d = this.days[0]  // 如果当期日期是7号或者小于7号      d.setDate(d.getDate() - 7)      this.initData(d)    },    // 下个星期    weekNext () {      const d = this.days[6]  // 如果当期日期是7号或者小于7号      d.setDate(d.getDate() + 7)      this.initData(d)    },    // 上一個月  传入当前年份和月份    pickPre (year, month) {      const d = new Date(this.formatDate(year, month, 1))      d.setDate(0)      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))    },    // 下一個月  传入当前年份和月份    pickNext (year, month) {      const d = new Date(this.formatDate(year, month, 1))      d.setDate(35)      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))    },    // 当前选择日期    pick (date) {    www.easck.com  alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))    },  },})  </script><style lang="scss">  #app {    width: 40%;    margin: auto;  }  ul {    padding: 0;  }  li {    list-style-type: none;  }  /* 上面的日历 */  .calendar {    position: relative;    width: 100%;    background: #fff;    margin-top: 20px;    margin-left: 20px;  }  .el-calendar__header {    display: block;  }  .el-calendar-table .el-calendar-day {    height: auto;    text-align: center;  }  .el-calendar-table td.is-selected {    background-color: #24b18d;    color: #fff;  }  .el-calendar-table .el-calendar-day:hover {    background-color: #24b18d;    color: #fff;  }  .el-calendar-table {    border-bottom: 1px solid #e4e4e4;    padding-bottom: 15px;  }  .el-calendar-table .next {    color: rgb(143, 143, 143);  }  .el-calendar__title,.el-calendar__button-group {    text-align: center;  }  .arrow {    width: 100%;    max-height: 46px;    position: absolute;    top: 15px;    text-align: center;  }  .arrow i {    font-size: 20px;    cursor: pointer;  }  .arrow i:nth-child(1) {    margin-right: 10%;    text-align: left;  }  .arrow i:nth-child(2) {    margin-left: 10%;    text-align: right;  }  /* 下面的日历 */  .date {    position: relative;    margin-top: 20px;    padding: 10px 20px;    background-color: #D3D3D3;  }  .arrow0 {    width: 100%;    max-height: 46px;    position: absolute;    top: 27px;    left: 0px;    text-align: center;  }  .arrow0 i {    font-size: 20px;    cursor: pointer;  }  .arrow0 i:nth-child(1) {    margin-right: 10%;    text-align: left;  }  .arrow0 i:nth-child(2) {    margin-left: 10%;    text-align: right;  }  .month {    text-align: center;  }   .weekdays {    display: flex;  }  .weekdays li {    flex: 1;    text-align: center;  }  .days {    display: flex;  }  .days li {    flex: 1;    text-align: center;    cursor: pointer;  }  .day易采站长站s li span {    display: inline-block;    width: 22px;    height: 22px;  }  .days li span:hover {    color: #fff;    background-color: #409EFF;    border-radius: 50%;  }  .active {    display: inline-block;    color: #fff;    border-radius: 50%;    background-color: #fa6854!important;  }  .other-month {    color: #e4393c;  } </style></html>
第二种日历的实现方式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。