基于Vue的日歷小功能，可根據(jù)實際開發(fā)情況按每年、每月、每周、進行切換

<template>
  <div class="date">
      <!-- 年份 月份 -->
      <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>
</template>

js部分：目前默認顯示一周，可根據(jù)實際情況更改

<script>


  export default {
    name: 'date',

    data () {
      return {
        currentYear: 1970,   // 年份
        currentMonth: 1,  // 月份
        currentDay: 1,    // 日期
        currentWeek: 1,    // 星期
        days: [],
      }
    },

    mounted () {

    },

    created () {
      this.initData(null)
    },

    methods: {
      formatDate (year, month, day) {
        const y = year
        let m = month
        if (m < 10) m = `0${m}`
        let d = day
        if (d < 10) d = `0$ze8trgl8bvbq`
        return `${y}-${m}-$ze8trgl8bvbq`
      },

      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個 這里默認顯示一周，如果需要顯示一個月，則第二個循環(huán)為 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) {
        alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
      },
    },
  }
</script>

<style lang="scss">
  @import "~base";

  .date {
    height: px2rem(180);
    color: #333;

    .month {
      font-size: px2rem(24);
      text-align: center;
      margin-top: px2rem(20);
    }

    .weekdays {
      display: flex;
      font-size: px2rem(28);
      margin-top: px2rem(20);

      li {
        flex: 1;
        text-align: center;
      }
    }

    .days {
      display: flex;

      li {
        flex: 1;
        font-size: px2rem(30);
        text-align: center;
        margin-top: px2rem(10);
        line-height:  px2rem(60);

        .active {
          display: inline-block;
          width: px2rem(60);
          height: px2rem(60);
          color: #fff;
          border-radius: 50%;
          background-color: #fa6854;
        }

        .other-month {
          color: #e4393c;
        }
      }
    }
  }
</style>

相關參考鏈接；http://www.jb51.net/article/96402.htm

總結

以上是生活随笔為你收集整理的基于Vue的小日历（支持按周切换）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。