elementui的DatePicker日期控件，添加确定/取消按钮

在Element UI的DatePicker组件中，默认情况下，确认和取消按钮是通过点击日期面板上的“今天”和“清除”按钮来触发的。如果你想要在弹出的面板上显示确认和取消按钮，并且通过这些按钮来控制日期的选择，你需要自定义DatePicker。

以下是一个自定义确认和取消按钮的示例代码：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions"
    @change="handleChange"
  >
    <template v-slot:default="{ visible }">
      <div v-if="visible" style="text-align: right; padding: 10px;">
        <el-button size="small" @click="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      pickerOptions: {
        // 你的其他选项配置
      },
    };
  },
  methods: {
    handleChange(value) {
      // 当用户更改日期时触发
      console.log('Selected Date:', value);
    },
    handleCancel() {
      // 当用户点击取消时需要做的操作
      this.value = ''; // 或者设置为之前的值
    },
    handleConfirm() {
      // 当用户点击确认时需要做的操作
      console.log('Confirmed Date:', this.value);
    },
  },
};
</script>

在这个示例中，我们使用了v-slot:default来在DatePicker的下方插入自定义按钮。visible属性用于判断日期选择面板是否可见，以便只在面板打开时显示自定义按钮。handleCancel和handleConfirm方法分别处理取消和确认操作。你可以在这些方法中添加你需要的逻辑，比如将日期重置为之前的值或者关闭面板。