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

<template>
  <el-date-picker
    :style="{ width }"
    class="ag-date-picker"
    v-model="dateArr"
    v-bind="attrs"
    v-on="inputListeners"
  />
</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],
    };
  },
  computed: {
    attrs() {
      return {
        size: "small",
        type: "daterange",
        format: "yyyy/MM/dd",
        "value-format": "yyyy-MM-dd",
        "start-placeholder": "开始日期",
        "end-placeholder": "结束日期",
        "range-separator": "-",
        "prefix-icon": " ag-el-icon-prefix",
        "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]);
        },
      });
    },
  },
  watch: {
    value: {
      handler(newVal) {
        if (!Array.isArray(newVal)) {
          throw new Error("agDatePicker date请传入数组");
        }
        console.log(newVal,'newVal');

        newVal.length > 0 &&
        newVal.some(
          (item) => item !== null && item !== undefined && item !== ""
        )
          ? (this.width = "205px")
          : (this.width = "160px");
        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,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  [class*="el-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-range-editor.is-active:hover{
    border: #8a1818;
  }
  .el-input__icon.el-range__close-icon {
    position: absolute;
    font-size: 12px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    right: 5px;
    &:hover {
      border-radius: 50%;
      color: #c0c4cc;
      background: #ecedee;
    }
  }

  .ag-el-icon-prefix {
    width: 16px;
    font-size: 16px;
    margin-left: -5px;
    line-height: 38px;
    position: absolute;
    right: 8px;
    top: 0;
    &:before {
      content: "\e78e";
    }
  }

  .el-icon-circle-close:before {
    content: "\e6db";
  }
}
</style>