elementui日期时间选择框自定义组件

1.需求场景

业务中需要，日期选择框方便客户对日期的选择（比如近5天，本周，本月，本年等等），并按小时展示。

2.组件代码MyDateTimeChange.vue

<template>
  <el-date-picker
    v-model="internalValue"
    :default-time="['00:00:00', '23:59:59']"
    size="small"
    :style="{width:width,height:height}"
    type="datetimerange"
    range-separator="-"
    :start-placeholder="$t('datepicker.startDate')"
    :end-placeholder="$t('datepicker.endDate')"
    :picker-options="pickerOptions"
    :value-format="customFormat"
    :format="format"
    :clearable="clearable"
    @change="dateChanged"
  ></el-date-picker>
</template>
 
<script>
 
 
export default {
 
  name: "MyDateChange",
  props: {
    width: {
      type: String,
      default: ''
    },
    height:{
      type:String,
      default:'41px'
    },
    customFormat:{
      type:String,
      default: 'yyyy-MM-dd'
    },
    value:{
      type:Array,
    },
    format:{
      type:String,
      default: 'yyyy-MM-dd'
    },
    clearable: {
      type: Boolean,
      default: false
    },
  },
  data() {
    const _this = this
    return {
      pickerOptions: {
        shortcuts: [{
          text: this.$t('datepicker.today'),
          onClick(picker) {
            const start = _this.getFirstTime(new Date());
            const end = _this.getEndTime(new Date());
            //start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
          {
            text: this.$t('datepicker.thisWeek'),
            onClick: (picker) => {
              const start = _this.getFirstTime(this.getStartOfWeek());
              const end = _this.getEndTime(new Date());
              //start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: this.$t('datepicker.thisMonth'),
            onClick: (picker) => {
              const start = _this.getFirstTime(this.getStartOfMonth());
              const end = _this.getEndTime(new Date());
              //start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: this.$t('datepicker.thisYear'),
            onClick: (picker) => {
              const start = _this.getFirstTime(this.getFirstDayOfYear());
              const end = _this.getEndTime(new Date());
              //start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: this.$t('datepicker.recentSeven'),
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              _this.getFirstTime(start);
              const end = _this.getEndTime(new Date());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: this.$t('datepicker.recentFifteen'),
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              _this.getFirstTime(start);
              const end = _this.getEndTime(new Date());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: this.$t('datepicker.recentThirty'),
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              _this.getFirstTime(start);
              const end = _this.getEndTime(new Date());
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      dateRange: '',
      submitButtonLoading: false,
      internalValue:this.value
    };
 
  },
  watch:{
    value: {
      handler(val) {
        this.$set(this,"internalValue",val);
        return val
      }
    }
  },
 
  methods: {
    getFirstTime(day){
      day.setHours(0);
      day.setMinutes(0);
      day.setSeconds(0);
      day.setMilliseconds(0);
      return day;
    },
    getEndTime(day){
      day.setHours(23);
      day.setMinutes(59);
      day.setSeconds(59);
      day.setMilliseconds(999);
      return day;
    },
    getStartOfWeek() {
      let today = new Date();
      let day = today.getDay(); // 获取今天是星期几 (0 是周日，1 是周一，以此类推)
      let startOfWeek = new Date(today); // 复制今天的日期
      // 将日期设置为本周的第一天 (星期日)
      startOfWeek.setDate(today.getDate() - day);
      return startOfWeek;
    },
    getStartOfMonth() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth(); // 获取当前月份，注意月份是从 0 开始的（0 表示一月）
      // 设置日期为本月的第一天
      const firstDay = new Date(year, month, 1);
      return firstDay;
    },
    getFirstDayOfYear() {
      const today = new Date();
      const year = today.getFullYear();
      // 设置日期为今年的第一天
      const firstDayOfYear = new Date(year, 0, 1); // 月份从0开始，0表示一月
      return firstDayOfYear;
    },
    dateChanged(newDate) {
      this.internalValue = newDate; // 更新内部数据
      this.$emit('input', newDate); // 触发父组件的更新
    }
  },
 
 
};
 
</script>
<style lang="css">
/*去掉了选择日期时间页面的分和秒*/
.el-time-spinner__wrapper{
  width: 100% !important;
}
.el-scrollbar:nth-of-type(2){
  display: none;
}
/*去掉了选择日期时间页面的清空按钮*/
.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text  {
  display: none;
}
</style>

3.使用

import MyDateTimeChange from "@/components/xxx/MyDateTimeChange";
 
......
<el-form-item :label="$t('OpenapiLogStatistics.time')">
        <my-date-time-change v-model="dateRange" format="yyyy-MM-dd HH" custom-format="yyyy-MM-dd HH:mm:ss" width="340px" height="32px"></my-date-time-change>
      </el-form-item>
......
 
data() {
    return {
              dateRange: [getNowFormatDate("-")+' 00:00:00',getNowFormatDate("-")+' 23:59:59'],
 
    }
}
 
......
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
	let search = params;
	search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
	dateRange = Array.isArray(dateRange) ? dateRange : [];
	if (typeof (propName) === 'undefined') {
		search.params['beginTime'] = dateRange[0];
		search.params['endTime'] = dateRange[1];
	} else {
		search.params['begin' + propName] = dateRange[0];
		search.params['end' + propName] = dateRange[1];
	}
	return search;
}
 
/**
 * 默认生成日期格式 yyyyMMdd
 * @param seperator1 分隔符
 * @returns 返回日期字符串
 */
export function getNowFormatDate(seperator1) {
  seperator1 = seperator1||''
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
 
  return year + seperator1 + month + seperator1 + strDate;
}
 
......
 
methods:{
    getQueryParams() {
      if (this.dateRange) {
        return this.addDateRange(this.queryParams, this.dateRange)
      }
      this.queryParams.params=[];
      return this.queryParams;
    },
 
 
}
 

4.效果