ag-element-ui/packages/agDatePicker/src/index.vue

<template>
  <el-date-picker
    :style="{ width }"
    :prefix-icon="iconClass"
    clear-icon="ag-icon-clear"
    v-model="dateArr"
    v-bind="attrs"
    v-on="inputListeners"
    @mouseenter.native="mousetrue = true"
    @mouseleave.native="mousetrue = false"
  />
</template>

<script>
/**
 * agDatePicker 时间选择器
 */
import isEmpty from "../../../src/utils/isEmpty";

export default {
  name: "agDatePicker",
  props: {
    value: {
      type: Array,
      default: () => [null, null],
    },
  },
  data() {
    return {
      width: "160px",
      dateArr: [null, null],
      date_picker: false,
      mousetrue: true,
    };
  },
  computed: {
    attrs() {
      return {
        size: "small",
        type: "daterange",
        format: "yyyy/MM/dd",
        "value-format": "yyyy-MM-dd",
        "start-placeholder": "开始日期",
        "end-placeholder": "结束日期",
        "range-separator": "-",

        "picker-options": {
          disabledDate(time) {
            return (
              time.getTime() >
              new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1
            );
          },
          shortcuts: [
            {
              text: "本月",
              onClick(picker) {
                const end =
                  new Date(new Date().toLocaleDateString()).getTime() +
                  24 * 60 * 60 * 1000 -
                  1;
                const time = new Date();
                time.setDate(1);
                time.setHours(0);
                time.setSeconds(0);
                time.setMinutes(0);
                var start = time.getTime();
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "近六个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一年",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        }, //多选日期
        ...this.$attrs,
      };
    },
    // 所有父级事件
    inputListeners() {
      return Object.assign({}, this.$listeners, {
        input: (value) => {
          let date1 = "";
          let date2 = "";

          if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
            date1 = `${value[0]} 00:00:00`;
            date2 = `${value[1]} 23:59:59`;
          }
          this.$emit("input", [date1, date2]);
        },
      });
    },
    iconClass() {
      return this.date_picker && this.mousetrue
        ? "ag-icon-prefix-hide"
        : "ag-icon-prefix-show";
    },
  },
  watch: {
    value: {
      handler(newVal) {
        if (!Array.isArray(newVal)) {
          throw new Error("agDatePicker date请传入数组");
        }
        let [date1, date2] = newVal;
        if (!this.dateArr) {
          this.dateArr = [date1 || "", date2 || ""];
          return;
        }
        this.$set(this.dateArr, 0, date1 || "");
        this.$set(this.dateArr, 1, date2 || "");
      },
      immediate: true,
      deep: true,
    },
    dateArr: {
      handler(newVal) {
        if (
          newVal &&
          newVal.length > 0 &&
          newVal.some(
            (item) => item !== null && item !== undefined && item !== ""
          )
        ) {
          this.width = "190px";
          this.date_picker = true;
        } else {
          this.width = "160px";
          this.date_picker = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  [class*="ag-icon-"] {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .el-input__icon.el-range__close-icon {
    position: absolute;
    width: 16px;
    font-size: 16px;
    margin-left: -5px;
    line-height: 30px;
    right: 8px;
    top: 0;
    z-index: 1;
  }

  .ag-icon-clear {
    &:before {
      content: "\e6db";
    }
  }

  .ag-icon-prefix-show {
    width: 16px;
    font-size: 16px;
    margin-left: -5px;
    line-height: 38px;
    position: absolute;
    right: 8px;
    top: 1px;
    &:before {
      content: "\e78e";
    }
  }
  .ag-icon-prefix-hide {
    display: none;
  }
}
</style>