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="Listeners"
    :type="datetype" 
    @mouseenter.native="mousetrue = true"
    @mouseleave.native="mousetrue = false"
  />
</template>

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

export default {
  name: "agDatePicker",
  props: {
    range:false,
    showTime:false,
    type: {
      type: String,
      default: "date",
    },
    value: {
      default: null||[],
    },
  },
  data() {
    return {
      width: "160px",
      dateArr: null||[],
      date_picker: false,
      mousetrue: true, 
    };
  },
  computed: {
    datetype(){
      if(this.range){
        if(this.showTime){
            return "datetimerange"
        }else{
          return "daterange";
        }
      }else{
        if(this.showTime){
           return "datetime";
          }else{
            return "date";
          }
      } 
    },
    attrs() {
      let config = {};
      if (this.range) {
        config = {
          "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]);
                },
              },
            ],
          }, //多选日期
        };
      } else {
        config = {
          align: "right",
          placeholder: "选择日期",
          "picker-options": {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [
              {
                text: "今天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime());
                  picker.$emit("pick", date);
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 1* 24 * 60 * 60 * 1000);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
                  picker.$emit("pick", date);
                },
              }, 
            ],
          },
        };
      }
      return {
        size: "small",
        type: "daterange",
        format: this.showTime?"yyyy-MM-dd hh:mm:ss":"yyyy-MM-dd",
        "value-format":this.showTime?"yyyy-MM-dd hh:mm:ss": "yyyy-MM-dd",
        ...config,
        ...this.$attrs,
      };
    },
    // 所有父级事件
    Listeners() {
      return Object.assign({}, this.$listeners, {
        input: (value) => {
          if (this.range) {
            if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
              this.$emit("change", [
                `${value[0]} 00:00:00`,
                `${value[1]} 23:59:59`,
              ]);
            } else {
              this.$emit("change", []);
            }
          } else {
            this.$emit("change", value);
          }
        },
      });
    },
    iconClass() {
      return this.date_picker && this.mousetrue
        ? "ag-icon-prefix-hide"
        : "ag-icon-prefix-show";
    },
  },
  watch: { 
    value: {
      handler(newVal) {
        if (Array.isArray(newVal)&&this.range){
          
          const [date1, date2] = newVal.slice(0, 2);
          this.dateArr = [date1 || "", date2 || ""];
        } else {
          this.dateArr = newVal;
        }
      },
      immediate: true,
    },
    dateArr: {
      handler(newVal) {
        if(!newVal){
          return
        }
        let defaultWidth = this.range ?this.showTime?"330px":"170px" : this.showTime?"190px":"140px";
        this.width = defaultWidth; 
      },
      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,
  .ag-icon-prefix-show,
  .ag-iconfont,
  .ag-icon-clear {
    position: absolute;
    width: 16px !important;
    font-size: 16px;
    margin-left: -5px;
    line-height: 1 !important;
    right: 6px;
    top: 1px;
    z-index: 1;
  }
  .el-input__prefix {
    position: absolute;
    left: 98%;
  }
  .ag-icon-clear {
    &:before {
      content: "\e6db";
    }
  }
  .ag-icon-prefix-show {
    &:before {
      content: "\e78e";
    }
  }
  .ag-icon-prefix-hide {
    display: none;
  }
}
</style>