生成一个月日历(当月)

整理了一下,这个日历的思路是这样的

  1. 一个月的总天数
  2. 一个月中第一天是星期几,即可知道前面空几个
data(){
  return {
    objmonth:[]
  }
}
methods:{
makeCalendar(){
  let now = new Date()
  let y = now.getFullYear() 
  let m = now.getMonth() //3 代表4月
  let d = now.getDate()
  let week = now.getDay()
  let endDay = new Date(y,m+1,0)//下个月的第0天,也说是上个月的最后一天,实例化
  let lastDay = endDay.getDate() //*这个月总天数
  let weekobj = new Date(y,m,1) //实例化当月第一天
  let firstWeek = weekobj.getDay() //第1天周几 即可知道前面空几个
  for(let i = 1;i<=lastDay;i++){
                    let _now = new Date(y,m,i) //每一天都实例化
                    let _y = _now.getFullYear()
                    let _m = _now.getMonth()
                    let _d = _now.getDate()
                    let _week = _now.getDay()
                    let objday = {
                        allDate: `${_y}-${this.transeNum(_m+1)}-${this.transeNum(_d)}`,
                        day: _d,
                        week: _week,
                        isWeekDay: _week==0 || _week==6,
                        isToday: d == _d,
                        isPass: _d<d
                    }
                    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() //调用函数
}
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容