JS_选房日历

JS_选房日历

上代码

var d = new Date() // 有 时分秒 的今天的日期
var year = d.getFullYear()
var month = d.getMonth()
var date = d.getDate()
var nd = new Date(`${year}/${month + 1}/${date}`) // 获取不加 时分秒 的今天的日期
data:{
	monthArr: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月月份有多少天
    nowTemp: nd.getTime(), // 今天的时间戳日期
    startTemp: nd.getTime(), //开始日期 默认为今天的时间戳日期
    endTemp: 0, // 结束日期
}

//初始化
  _initCalendar: function () {
    //判断 2 月是 28天还是29天
    if (month === 1) {
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        this.data.monthArr[1] = 29
      }
    }

    //每月日历天数
    this.data.monthArr.forEach((item, index) => {
      if (month <= index) {
        this._getCalendar(item, index)
      }
    })

    // 不到半年日期，就取下一年的日期
    if (month >= 7) {
      year++
      let nextMonth = this.data.monthArr.slice(0, month - 6)
      nextMonth.forEach((item, index) => {
        this._getCalendar(item, index) // 获取日历方法
      })
    }
  },

	//获取日历
  _getCalendar: function (itemMonth, indexMonth) {
    /*
    itemMonth: 每月的天数，
    indexMonth: 当前是几月份
    */

    let arr = [];
    let nowDay = new Date(`${year}/${indexMonth + 1}/01`);
    nowDay = nowDay.getDay()

    // 获取每月的第一天是 周几
    for (let i = 0; i < nowDay; i++) {
      arr.push({
        day: 0,
        temp: 99
      }) // 周几前面的 为 空 不显示 （此处为：在dom 上 判断 不展示 day == 0 的 dom元素，可按照自己喜好设置进行处理）
    }

    // 获取每月的天数
    for (let i = 0; i < itemMonth; i++) {
      let itemDate = new Date(`${year}/${indexMonth + 1}/${i + 1}`)
      arr.push({
        day: i + 1,
        temp: itemDate.getTime()
      })
    }

    // // 补全 后续空白内容  （目前只补全42行。自行扩展 35行） 解注释即可食用
    // let length = arr.length;
    // for (let i = 0; i < (42 - length); i++){
    //   arr.push({
    //     day: 0,
    //     temp: 99
    //   }) 
    //   // 补全42 行 保证 css 样式;
    // }

	/// 下面是 dom 上 渲染数据
    this.data.calendarDateArr.push({
      arr: arr,
      title: `${year}年${indexMonth + 1}月`
    })
    this.setData({
      calendarDateArr: this.data.calendarDateArr,
    })
  },

思路：

1. 先获取每月有多少天，每月的1号 为星期几
2. 将每月1号 之前的星期，都填充为 空元素，占据dom元素但不显示，到达每月1号之前的都不显示但还占有空间，月末为同样思路
3. 遍历每月时，根据当前 年 月 日 添加时间戳 字段
4. 在dom上渲染时 将时间戳 转为 月-日 即可

这是小程序代码片段 ( 可直接食用 )：https://developers.weixin.qq.com/s/zjSb6imJ7qjr

 
 
// 一个月薪2500的狗头，只能记录+分享它的狗生了…