官方提供了很详细的文档, 这里就不在复述了, 这里和大家聊一聊在项目中遇到的需求和实现(快捷日期和快捷时间的实现)
需求要 有快捷日期和快捷时间的功能
首选接到需求后, 就知道单纯的element组件是无法实现的, 于是请教朋友, 朋友告知可能需要改轮子, 太过麻烦, 就没去弄,具体实现过程请听我慢慢阐述
话不多说, 上代码(折叠部分自行ctrl c v)
element原本的组件无法满足, 但是又没有好的办法? 别先想着造轮子, 原生js就是最后的手段
首先我们来看一下, 快捷日期官网有, 但是官网是一点击就直接获取了当前的时间点,然后关闭了选择器, 需求是选完左侧的快捷日期后,再次点击时间点才能确定选中, 并且关闭
快捷日期并且不关闭选择器实现步骤(以"今日"为例):
1.js原生获取日期时间选择器的dom节点;
2.因为日期与时间的输入框完全一致, 所以我们取第0个input输入框(日期框)
3.然后将获取到今天的日期时间戳转化为日期格式;
4.将日期格式赋值给获取的输入框;
示例展示
快捷时间实现步骤(以"9:00"为例):
1.js原生获取日期时间选择器的dom节点;
2.因为日期与时间的输入框完全一致, 所以我们取第0个input输入框(日期框);
3.判断日期是否有值, 有值的话设置时间9点, 没有值就获取当天的日期然后设置时间9点;
示例展示
注意:
1.this的指向问题, 我这里用到了全局公共日期格式化方法[that.$tools.formatDate()], 所以需要 var that = this 一下
2.同页面多个日期时间选择器, 在关闭的时候更新一下选择器的日历
3.禁用之前的日期使用的官方文档 disabledDate(time) { return Date.now()>(time.getTime()+3600*1000*24) },
完整代码:
```pickerOptions: {
disabledDate(time) {
return Date.now()>(time.getTime()+3600*1000*24)
},
shortcuts: [{
text: '今天',
onClick(picker) {
const date = new Date(new Date(new Date().toLocaleDateString()));
date.setTime(date.getTime());
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
juDate[0].value = that.$tools.formatDate(date)
},
}, {
text: '明天',
onClick(picker) {
const date = new Date(new Date(new Date().toLocaleDateString()));
date.setTime(date.getTime() + 3600 * 1000 * 24);
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
juDate[0].value = that.$tools.formatDate(date)
},
}, {
text: '后天',
onClick(picker) {
const date = new Date(new Date(new Date().toLocaleDateString()));
date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
juDate[0].value = that.$tools.formatDate(date)
},
}, {
text: '09:00',
onClick(picker) {
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
let zhDate = juDate[0].value
if (zhDate) {
const date1 = new Date(zhDate);
let date3 = date1.setHours(9)
picker.$emit('pick', date3);
} else {
const date2 = new Date(new Date(new Date().toLocaleDateString()).getTime());
let date4 = date2.getTime() + (3600 * 1000 * 9)
picker.$emit('pick', date4);
}
}
}, {
text: '12:00',
onClick(picker) {
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
let zhDate = juDate[0].value
if (zhDate) {
const date1 = new Date(zhDate);
let date3 = date1.setHours(12)
picker.$emit('pick', date3);
} else {
const date2 = new Date(new Date(new Date().toLocaleDateString()).getTime());
let date4 = date2.getTime() + (3600 * 1000 * 12)
picker.$emit('pick', date4);
}
}
}, {
text: '17:00',
onClick(picker) {
let selDate = document.getElementsByClassName('el-date-picker__editor-wrap')[0]
let juDate = selDate.getElementsByClassName('el-input__inner')
let zhDate = juDate[0].value
if (zhDate) {
const date1 = new Date(zhDate);
let date3 = date1.setHours(17)
picker.$emit('pick', date3);
} else {
const date2 = new Date(new Date(new Date().toLocaleDateString()).getTime());
let date4 = date2.getTime() + (3600 * 1000 * 17)
picker.$emit('pick', date4);
}
}
}]
},```
网友评论