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

1.概要

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

2.思路

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

3.效果图

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

4. el-date-picker 组件代码

<el-table :data="formDynamic.resumeItems">
  <el-table-column prop="jsrq" label="结束时间">
    <template slot-scope="scope">
      <el-date-picker
        :class="formDynamic.resumeItems[scope.$index].isToThisDay ? 'end-date-picker' : ''"
        popper-class="lvli-end-date-popper"
        v-model="formDynamic.resumeItems[scope.$index].jsrq"
        type="month"
        value-format="yyyy-MM"
        :picker-options="pickerOptions"
        @focus="() => endDatePickerFocus(scope.$index)"
        @blur="() => endDatePickerBlur(scope.$index)"
        :placeholder="formDynamic.resumeItems[scope.$index].isToThisDay ? '至今' : '选择日期'">
      </el-date-picker>
    </template>
  </el-table-column>
</el-table>

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 了

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