real3d-portalsite/src/views/cockpitNew1/datePicker.vue

<template>
  <!-- value-format="yyyy-MM-dd" -->
  <el-date-picker
    v-model="dateValue"
    class="timePicker"
    type="daterange"
    :picker-options="pickerOptions"
    value-format="yyyyMMdd"
    range-separator="~"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :clearable="false"
    align="left"
    @change="dateChange"
  >
  </el-date-picker>
</template>

<script>
const nowYear = new Date().getFullYear();
const nowMonth = new Date().getMonth() + 1 + "";
const nowDay = new Date().getDate() + "";
function setdata(time) {
  return `${time.length == 1 ? "0" : ""}${time}`;
}
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今年",
            onClick(picker) {
              const start = new Date(`${nowYear}-01-01`);
              const end = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "去年",
            onClick(picker) {
              const start = new Date(`${nowYear - 1}-01-01`);
              const end = new Date(`${nowYear - 1}-12-31`);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近三年",
            onClick(picker) {
              const start = new Date(`${nowYear - 3}-${nowMonth}-${nowDay}`);
              const end = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近五年",
            onClick(picker) {
              const start = new Date(`${nowYear - 5}-${nowMonth}-${nowDay}`);
              const end = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`]
      dateValue: [
        `${nowYear}0101`,
        `${nowYear}${setdata(nowMonth)}${setdata(nowDay)}`,
      ],
    };
  },
  mounted() {
    this.dateChange();
  },
  methods: {
    dateChange() {
      this.$emit("dateChange", this.dateValue);
      store.setCockpitDate(this.dateValue);
    },
  },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
// 日期按选择器样式修改
.timePicker {
  position: absolute;
  top: 40px; //top: 10%;
  left: 23%;
  z-index: 100;
  font-size: 14px;
  padding: 0;
  width: 180px !important;
}
@import "datePicker";
</style>