soc_web/src/components/dateTime/daterange.picker.vue

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    :clearable="clearable"
    :picker-options="pickerOptions"
    @change="onSelect"
    v-bind="$attrs"
    class="customDatePicker"
  />
</template>
<script>
// import sync from '@/components/computed.sync.ts'
// import { set } from 'vue/types/umd';
export default {
  inheritAttrs: false,
  data() {
    return {};
  },
  computed: {
    // pv: sync("value"),

    // val:{
    //     get(){return this.value},
    //     set(v){
    //         this.$emit("input",v)
    //     }
    // },
    pickerOptions() {
      return {
        shortcuts: [
          {
            text: "今天",
            onClick: (picker) => {
              let date = this.$dateRange.before(0);
              date[1] = date[0];
              console.log(date);
              picker.$emit("pick", date);
            },
          },
          {
            text: "昨天",
            onClick: (picker) => {
              let date = this.$dateRange.yesterday(-1);
              date[1] = date[0];
              console.log(date);
              picker.$emit("pick", date);
            },
          },
          {
            text: "最近一周",
            onClick: (picker) => {
              picker.$emit("pick", this.$dateRange.before(-6));
            },
          },
          {
            text: "最近一个月",
            onClick: (picker) => {
              picker.$emit("pick", this.$dateRange.before(-29));
            },
          },
          {
            text: "最近三个月",
            onClick: (picker) => {
              picker.$emit("pick", this.$dateRange.before(-90));
            },
          },
        ],
      };
    },
  },
  watch: {},
  props: {
    value: {},
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onSelect(v) {
      this.$emit("input", v);
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.customDatePicker {
  ::v-deep .el-date-editor--daterange {
    width: 250px !important;
  }
  ::v-deep .el-range-editor--small .el-range-input {
    font-size: 16px !important;
  }
}
</style>