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

笔记

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

具体实现的方法

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

  1. 准备工作
    首先需要
npm install ele-calendar
<ele-calendar 
defaultValue="2019-05" 
@date-change="change"
@pick="pick"
:render-content="renderContent" 
:data="datedef"
:prop="prop"></ele-calendar>

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

Calendar Attributes(属性)

参数说明类型可选值默认值
data显示的数据array
prop对应日期字段名string
lang语言切换stringenzh-CN
value-format绑定值的格式。不指定则绑定值为 Date 对象stringYYYY-MM-DD
selectionMode日历模式stringdatesday
highlight是否要高亮对应日期booleanfalse
currentmonth高亮选中日期booleanfalse
disabledDate设置禁用状态,参数为当前日期,要求返回 BooleanFunction
border是否带有边框booleanfalse
lunarcalendar是否需要农历booleanfalse
defaultValue默认展示某月Date
render-content内容区的渲染 FunctionFunction(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 //点击计数器
    }
  },
  1. 渲染日历的函数 有俩参数(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>
    },
  1. 设置开始时间函数
//设置dayStart
    setStart(date) {
      this.startMoney = event.toElement.innerText.slice(-3)

      this.startTime = date
      this.dayStart = this.msToDate(date).withoutTime
    },
  1. 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)
      }
    },
  1. 重置日期函数
//重置日期
    reset(date) {
      // console.log('ok')
      this.dayStart = ''
      this.startTime = 0

      this.dayEnd = ''
      this.endTime = 0

      this.datedef = []
      this.clickNum = 1

      this.setStart(date)
    },
  1. 当年份 月份变化时 出发的函数
 change() {
      this.dayStart = ''
      this.startTime = 0
      this.dayEnd = ''
      this.endTime = 0
      this.datedef = []
      this.clickNum = 0
    },
  1. 标准时间转化为时间戳 便于运算
 //中国标准时间转时间戳
    dateToMs(date) {
      let result = new Date(date).getTime()
      return result
    },
  1. 转化格式 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
    },

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

  • 11
    点赞
  • 71
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值