javascript 前端 elementUI 日期组件 el-date-picker 实现含有 “至今” 按钮

文章目录

1.概要2.思路3.效果图4. el-date-picker 组件代码5.实现“至今”按钮的样式6.实现显示“至今”的样式7.实现“至今”功能8.小结

1.概要

提示：elementUI el-date-picker 实现含有 “至今” 按钮

2.思路

1.使用 picker-options 面板，把按钮文本及其样式修改为“至今”按钮。 2.使用 el-date-picker 的 placeholder 来显示“至今”文本。

3.效果图

本例是在表格里使用表单，所以有多个日期组件（如果单个组件更简单）。如下图：

4. el-date-picker 组件代码

5.实现“至今”按钮的样式

.lvli-end-date-popper .el-picker-panel__body {

margin-left: 0px !important;

}

.lvli-end-date-popper .el-picker-panel__sidebar {

width: 100% !important;

top: inherit !important;

bottom: -20px !important;

border-top: 1px solid #ddd !important;

}

.lvli-end-date-popper .el-picker-panel__sidebar button {

text-align: center !important;

}

6.实现显示“至今”的样式

其实就是修改一下placeholder的颜色

// 其他浏览器兼容性自测

.end-date-picker ::-webkit-input-placeholder {

color: #000;

}

7.实现“至今”功能

因为在表格里，并且 el-date-picker 组件无法知道当前行，所以通过 @focus @blur 来确定是操作哪一行的 el-date-picker

const DEFAULT_RESUME = {

jsrq: '',

isToThisDay: false // 至今

}

let hasClickToThisDay = false // 来确定是否点击了 “至今”

export default {

data() {

return {

formDynamic: {

resumeItems: [

Object.assign({}, DEFAULT_RESUME)

]

},

pickerOptions: {

disabledDate(time) {

return time.getTime() > Date.now()

},

shortcuts: [{

text: '至今',

onClick(vm) {

vm.$emit('pick', '')

hasClickToThisDay = true

}

}]

}

}

},

methods: {

endDatePickerFocus() {

hasClickToThisDay = false

},

endDatePickerBlur(index) {

this.formDynamic.resumeItems[index].isToThisDay = hasClickToThisDay

},

saveData(){

const saveParams = this.formDynamic.resumeItems.map(item => {

return {

jsrq: item.isToThisDay ? '至今': item.jsrq

}

})

}

}

}

8.小结

本例是把 el-date-picker 嵌入到表格里，所以略显复杂（找出当前操作的组件） 如果直接在form表单里实现，就不需要 @focus @blur 以及全局变量 hasClickToThisDay 了

至此，本文内容介绍完毕，如果更好解决方案，欢迎留言。

参考文章