笔记
- 由于本人用vue+elementui 写了一个关于日历的项目
- 需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价
- 后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库里面没有这些方法 所以很奇怪)
具体实现的方法
一, 在网上找了很多方法 最后借鉴的是这位小姐姐的方法。
- 准备工作
首先需要
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 | 语言切换 | 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代码部分。代码比较长请耐心看
- 核心部分就是渲染这个日历与日期对应的金钱 (项目的需求是星期六一价格高 其它日期都是统一价格-_-|| 还好不是一个日期一个价格)
- 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 //点击计数器
}
},
- 渲染日历的函数 有俩参数(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>
},
- 设置开始时间函数
//设置dayStart
setStart(date) {
this.startMoney = event.toElement.innerText.slice(-3)
this.startTime = date
this.dayStart = this.msToDate(date).withoutTime
},
- 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)
}
},
- 重置日期函数
//重置日期
reset(date) {
// console.log('ok')
this.dayStart = ''
this.startTime = 0
this.dayEnd = ''
this.endTime = 0
this.datedef = []
this.clickNum = 1
this.setStart(date)
},
- 当年份 月份变化时 出发的函数
change() {
this.dayStart = ''
this.startTime = 0
this.dayEnd = ''
this.endTime = 0
this.datedef = []
this.clickNum = 0
},
- 标准时间转化为时间戳 便于运算
//中国标准时间转时间戳
dateToMs(date) {
let result = new Date(date).getTime()
return result
},
- 转化格式 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
},
(技术有限 还未实现跨月预定 哪位大佬跟我说说思路)
------------------------基本函数已经说完(我是分割线----------------------------------------------------