vue中 日期选择--本日、本周、本月、本年选择器实现(基于elementui)

在Vue中，可以使用Element UI库中的Date Picker组件来实现日期选择。以下是一个简单的例子，展示了如何实现“本日、本周、本月、本年”选择器：

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="date"
      placeholder="选择日期"
      :default-value="defaultDate"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '本日',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDay() - 1));
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setDate(1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(0);
            start.setDate(1);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  computed: {
    defaultDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      const day = now.getDate();
      return new Date(year, month, day);
    }
  }
};
</script>

在这个例子中，我们定义了一个el-date-picker组件，并通过pickerOptions属性定义了快捷方式（本日、本周、本月、本年）。每个快捷方式都是一个对象，具有text（显示的文本）和onClick（点击时触发的方法）属性。在onClick方法中，我们使用picker.$emit('pick', ...)来设置选中的日期。defaultDate计算属性用于设置默认显示的日期，通常是今天。