饿了么 (Element)的 日历(Calendar)组件 自定义

笔记

1. 由于本人用vue+elementui 写了一个关于日历的项目
2. 需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价
   
3. 后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库里面没有这些方法 所以很奇怪)

具体实现的方法

一, 在网上找了很多方法 最后借鉴的是这位小姐姐的方法。

1. 准备工作
   首先需要

npm install ele-calendar

这是HTML部分 初看可能会一脸懵逼(我也一样-_-||) 下面是说明

Calendar Attributes(属性)

参数	说明	类型	可选值	默认值
data	显示的数据	array
prop	对应日期字段名	string
lang	语言切换	string	en	zh-CN
value-format	绑定值的格式。不指定则绑定值为 Date 对象	string	YYYY-MM-DD
selectionMode	日历模式	string	dates	day
highlight	是否要高亮对应日期	boolean		false
currentmonth	高亮选中日期	boolean		false
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function
border	是否带有边框	boolean		false
lunarcalendar	是否需要农历	boolean		false
defaultValue	默认展示某月	Date
render-content	内容区的渲染 Function	Function(h, parmas)

Calendar Events(方法)

事件名(Fun)	说明(Description)	参数(params)
date-change	切换时月份,年份触发的方法	data
select	选择日期的数组及节点	val,selectDom
pick	点击日历	返回当前点击时间data、event、row、dome

Scoped Slot(插槽)

name	说明
	自定义头的内容，参数为 {‘yearLabel’:‘年’,‘month’:‘月’,‘event’:[prevYear,prevMonth,nextYear,nextMonth]}

下面是js代码部分。代码比较长请耐心看

1. 核心部分就是渲染这个日历与日期对应的金钱 (项目的需求是星期六一价格高 其它日期都是统一价格-_-|| 还好不是一个日期一个价格)
2. data数据部分

 data() {
    return {
      value1: '',
      highPrice: '', //最高价格
      normalPrice: '', //正常价格
      datedef: [], //选中样式数组 只要按他的格式放入数组中 就会被渲染
      value: new Date(),
      prop: 'date', //对应日期字段名

      dayStart: '', //入住日期字符串(yyyy-mm-dd)
      startTime: 0, //入住日期时间戳
      startMoney: 0, //入住日期租金

      dayEnd: '', //离开日期字符串(yyyy-mm-dd)
      endTime: 0, //离开日期时间戳
      endMoney: 0, //离开日期租金

      totalMoney: 0, //总金额
      clickNum: 0 //点击计数器
    }
  },

3. 渲染日历的函数 有俩参数(h,params) 打印一下看结果是啥

 renderContent(h, parmas) {
      const loop = data => {
        //判断星期六 价格变动
        if (data.defvalue.column == 6) {
          return data.defvalue.value ? (
            <div class="flex2 selected">
              {data.defvalue.text}
              <span>￥{this.highPrice / 100}</span>
            </div>
          ) : (
            <div class="flex2">
              {data.defvalue.text}
              <span>￥{this.highPrice / 100}</span>
            </div>
          )
        } else {
          return data.defvalue.value ? (
            <div class="flex2 selected">
              {data.defvalue.text}
              <span>￥{this.normalPrice / 100}</span>
            </div>
          ) : (
            <div class="flex2">
              {data.defvalue.text}
              <span>￥{this.normalPrice / 100}</span>
            </div>
          )
        }
      }
      return <div style="min-height:60px;">{loop(parmas)}</div>
    },

4. 设置开始时间函数

//设置dayStart
    setStart(date) {
      this.startMoney = event.toElement.innerText.slice(-3)

      this.startTime = date
      this.dayStart = this.msToDate(date).withoutTime
    },

5. pick函数 选中的日期 会传四个参数给你(data、event、row、dom) 不知道可以打印一下这几个值

 pick(date, mouseEvent, bbb) {
      if (this.clickNum < 2) {
        // console.log('if-clickNum', this.clickNum)
        this.clickNum++
        if (this.clickNum == 1) {
          this.setStart(date)
        }

        if (this.clickNum == 2) {
          if (date > this.startTime) {
            this.endMoney = event.toElement.innerText.slice(-3)
            this.endTime = date
            this.dayEnd = this.msToDate(date).withoutTime
          } else {
            this.reset(date)
          }
        }

        if (this.dayStart && this.dayEnd) {
          // console.log('money', this.startMoney, this.endMoney)
          let lack = this.endTime - this.startTime
          let difference = lack / 1000 / 3600 / 24 + 1
          // console.log('num', difference)
          // console.log('选择的日期:', this.dayStart, this.dayEnd)
          let startNum = new Date(this.startTime).getDate()
          let endNum = new Date(this.endTime).getDate()
          let nowMonth = new Date(this.endTime).getMonth() + 1

          // console.log('first=', startNum, endNum)
          for (let i = startNum; i < endNum + 1; i++) {
            let insert = {
              date: `2019-0${nowMonth}-${i}`,
              content: null,
              cid: null
            }
            this.datedef.push(insert)
          }

          //计算租金总额
          let saturdayNum = 0
          if (this.endMoney == this.normalPrice && this.startMoney == this.normalPrice) {
            saturdayNum = Math.floor(difference / 7 + 1)
          } else {
            saturdayNum = Math.floor(difference / 7)
          }
          this.totalMoney =
            (saturdayNum * this.highPrice + (difference - saturdayNum) * this.normalPrice) / 100
          // console.log('totalMoney=', this.totalMoney)
        }
      } else {
        this.reset(date)
        // console.log('else-clickNum', this.clickNum)
      }
    },

5. 重置日期函数

//重置日期
    reset(date) {
      // console.log('ok')
      this.dayStart = ''
      this.startTime = 0

      this.dayEnd = ''
      this.endTime = 0

      this.datedef = []
      this.clickNum = 1

      this.setStart(date)
    },

6. 当年份 月份变化时 出发的函数

 change() {
      this.dayStart = ''
      this.startTime = 0
      this.dayEnd = ''
      this.endTime = 0
      this.datedef = []
      this.clickNum = 0
    },

7. 标准时间转化为时间戳 便于运算

 //中国标准时间转时间戳
    dateToMs(date) {
      let result = new Date(date).getTime()
      return result
    },

8. 转化格式 yyyy -mm -dd

//中国标准时间转年月日
    msToDate(msec) {
      let datetime = new Date(msec)
      let year = datetime.getFullYear()
      let month = datetime.getMonth()
      let date = datetime.getDate()
      let hour = datetime.getHours()
      let minute = datetime.getMinutes()
      let second = datetime.getSeconds()

      let result1 =
        year +
        '-' +
        (month + 1 >= 10 ? month + 1 : '0' + (month + 1)) +
        '-' +
        (date + 1 < 10 ? '0' + date : date) +
        ' ' +
        (hour + 1 < 10 ? '0' + hour : hour) +
        ':' +
        (minute + 1 < 10 ? '0' + minute : minute) +
        ':' +
        (second + 1 < 10 ? '0' + second : second)

      let result2 =
        year +
        '-' +
        (month + 1 >= 10 ? month + 1 : '0' + (month + 1)) +
        '-' +
        (date + 1 < 10 ? '0' + date : date)

      let result = {
        hasTime: result1,
        withoutTime: result2
      }

      return result
    },

(技术有限 还未实现跨月预定 哪位大佬跟我说说思路)
------------------------基本函数已经说完(我是分割线----------------------------------------------------