實現(xiàn)簡易日歷

頁面代碼

<div class="f2">
        <div class="ititle">
          <div class="im" @click="plusMonth()">
            <img src="static/images/icon/sileft.png"/>
          </div>
          <div class="title">{{nowMonth}}</div>
          <div class="im1" @click="addMonth()">
            <img src="static/images/icon/siright.png"/>
          </div>
        </div>
        <div class="week">
          <div class="weeekRes">
            <div class="weekResT1" v-for="(item,index) in days" :key="index">
              <div class="weekResti1"><span>{{item.week}}</span></div>
            </div>
            <div class="weekResT2" v-for="(item,index) in list" :key="index">
              <div :class="['orderYuan']">
                <span :class="['orderYuanTT',{'cirTT':item.sign},{'y':!item.inMonth}]">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>

js代碼
通過moment庫的一些事件方法實現(xiàn),首先獲取到今天是周幾,然后通過這個周幾來算出這個月的日歷要顯示上個月的幾天,最后通過add方法,把這個月的天數(shù)和下個月的天數(shù)補齊即可,

  getCal() {
        let monthOffset = this.monthOffset
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY-MM') + '-01'
        //當前選擇的年月(獲取到1號)
        let list = []
        //算出周幾
        let vWeekOfDay = moment(nowMonth).format('E') //算出這周的周幾
        if (vWeekOfDay == 7) {
          vWeekOfDay = 0
        }
        //獲取這個月的日歷需要補滿上個月的幾天
        let left = vWeekOfDay
        for (let i = vWeekOfDay; i > 0; i--) {
          //10-1往前減
          let xdate = moment(nowMonth).subtract(i, 'days')
          console.log(xdate)
          let xname = xdate.format('D')
          console.log(xname)
          list.push({
            name: xname,
            date: xdate.format('YYYY-MM-DD'), sign: false
          })
        }
        if (this.exceed) {
          //遍歷出一個月的日歷顯示的總天數(shù)減去上個月需要顯示的天數(shù)剩余的所有天數(shù)
          //比如這個月的日歷需要顯示5天上個月的日子,
          //那就用42減去5.得到剩下要顯示的天數(shù),
          //剩下37,也就是說除了這個月的30天之外,
          //還會額外顯示下個月的7天,
           //add方法返回的就是從這個moment(nowMonth)開始,
         //后面的第i天的號數(shù),比如返回的是15,意思就是下個月的15號,
          for (let i = 0; i < 42 - vWeekOfDay; i++) {
            let xdate = moment(nowMonth).add(i, 'days')
            let xname = xdate.format('D')
            list.push({
              name: xname,
              date: xdate.format('YYYY-MM-DD'),
              sign: false
            })
          }
        } else {
          //7-少了幾個
          for (let i = 0; i < 7 - vWeekOfDay; i++) {
            let xdate = moment(nowMonth).add(i, 'days')
            let xname = xdate.format('D')
            list.push({
              name: xname,
              date: xdate.format('YYYY-MM-DD'),
              sign: false
            })
          }
        }
        this.list = list
        let that = this
        this.list.forEach(item => {
          item.inMonth = that.isInMoth(item.date)
        })
        // this.getSigned()
      },
      isInMoth(date) {
        let tmonth = moment(date).format('YYYY年MM月')
        if (tmonth == this.nowMonth) {
          return true
        }
        return false
      },
      plusMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset - 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      },
      addMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset + 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      },
    }


//計算周幾
let wk = new Date().getDay() 
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
//getDay方法返回的數(shù)字當作下標,就可以得到今天是周幾
。。。
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容