vue2 element ，设置DatePicker 日期选择器 只控制在 点击图标， 显示隐藏弹出框，完整代码

Vue 2 中 Element UI 的 DatePicker 组件是一个常用的用于选择日期的时间控件。如果你想只通过点击图标来显示或隐藏日期选择器的弹出框，而不是默认的行为——用户直接点击输入框打开日期选择面板，你可以使用 Vue 的事件处理机制和组件的 `v-if` 或 `v-show` 来实现。

首先，在模板上，将 DatePicker 元素包裹在一个有 `ref` 属性的元素里，比如一个 `<div>`：

<template>
  <el-date-picker
    ref="datePicker"
    v-model="selectedDate"
    type="daterange"
    :picker-options="pickerOptions"
    @click.native="showPicker = !showPicker" <!-- 控制显示/隐藏 -->
    icon-class="iconfont icon-date-picker" <!-- 自定义图标 -->
  ></el-date-picker>
  <button @click="handleCustomClick">点击图标</button>
</template>

然后在 script 部分，定义 `selectedDate` 和 `showPicker` 数据属性以及方法：

<script>
export default {
  data() {
    return {
      selectedDate: '',
      showPicker: false,
      pickerOptions: { // 如果需要自定义选项，可以放在这里
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = end.clone().subtract(7, 'days');
              picker.$emit('pick', [start, end]);
            }
          },
        ]
      },
    };
  },
  methods: {
    handleCustomClick() {
      this.showPicker = !this.showPicker; // 控制日期选择器的显示/隐藏
    },
  },
};
</script>

在这个例子中，当用户点击外部按钮时，`handleCustomClick` 方法会被调用，改变 `showPicker` 的值，从而切换日期选择器的可见状态。图标类名可以根据你的需求调整。