生成一個月日歷(函數封裝)

整理了一下,這個日歷的思路是這樣的

  1. 一個月的總天數
  2. 一個月中第一天是星期幾,即可知道前面空幾個
data(){
  return {
    objmonth:[]
  }
}
methods:{
makeCalendar(year,month){
  let now = new Date()
  let y = now.getFullYear() 
  let m = now.getMonth() 
  let d = now.getDate()
  let now1 = new Date(y,m,d) //當天時間
  let week = now.getDay()
  let endDay = new Date(year,month,0)//下個月的第0天,也說是上個月的最后一天,實例化
  let lastDay = endDay.getDate() //*這個月總天數
  let weekobj = new Date(year,month-1,1) //第一天實例化
  let firstWeek = weekobj.getDay() //第1天周幾 即可知道前面空幾個
  for(let i = 1;i<=lastDay;i++){
                    let now2 = new Date(year,month,i) //每一天都實例化
                    let _y = _now.getFullYear()
                    let _m = _now.getMonth()
                    let _d = _now.getDate()
                    let _week = _now.getDay()
                    let objday = {
                        ymd: `${_y}-${this.transeNum(_m)}-${this.transeNum(_d)}`
                        day: _d,
                        week: _week,
                        isWeekDay: _week==0 || _week==6,
                        isToday: now1.getTime() == now2.getTime(),
                        isPass: now1.getTime() > now2.getTime()
                    }
                    this.objmonth.push(objday)
                }
                for(let i = 0;i<firstWeek;i++){
                    this.objmonth.unshift('')  //補齊前面的空格
                }
}
transeNum(num){
   return num < 10 ? '0' + num :num   //小于10的數補0
}
}
mounted() {
   this.makeCalendar(2019,4) //調用函數
}
image.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • block 和 delegate 都可以通知外面。block 更輕型,使用更簡單,能夠直接訪問上下文,這樣類中不需...
    zgsddzwj閱讀 1,396評論 0 7
  • 其實 很多時候 我都在想 人 活在這個世界上到底是為了什么 到底是要得到些什么 一直以來 ...
    陳夢茹閱讀 156評論 0 0